Build an Interactive Story App Course (How To)

In this course we will build a simple choose-your-own-adventure story app, complete with fantastic illustrations. We will model our story and introduce the Model-View-Presenter pattern, and we will learn about getting input from users, displaying images, and using more than one Activity.

What you'll learn

• Displaying images in an ImageView
• Getting input from an EditText
• Starting Activities with Intents
• Passing data between Activities
• Using the MVP design pattern

User Input

We need to be able to get input from users for our apps. In this stage we'll introduce the EditText view, which is used for entering and editing text input. We will also introduce a new layout for Android called ConstraintLayout.

Chevron 8 steps

• Introducing the Project

  1:51

• Finding Views by IDs

  1 objective

• Creating the Project

  5:37

• Introducing ImageViews

  6:38

• Using Images

  6 questions

• Introducing ConstraintLayout

  5:33

• Using EditText for Text Input

  7:05

• Using ConstraintLayouts and ImageViews

  4 objectives

• Extra Credit

  User Input Bonanza

  We learned how to get data from an EditText, which is really important. It also applies to all sorts of widgets used for user input.

  Create a simple app that has a bunch of different controls from the Widgets section in the Palette. For each control, get the value the user enters and then display it in the log or a Toast. Getting comfortable with the different widgets will cement your learning and expose you to different controls.

  Some specific ones to try include:

  • EditText with a different format
  • RadioButton
  • CheckBox
  • Switch
  • ToggleButton
  • Spinner

Tuning the User Interface

Android apps need to work on different screen sizes, different versions of Android, and sometimes, in different orientations. We'll talk about each of these and how to use the AppCompat library to keep things consistent across many devices.

Chevron 6 steps

• Changing Theme Colors

  3:14

• Review: Styles and Themes

  3 questions

• Reviewing Features from AppCompat

  3:35

• Handling Different Screen Sizes

  3:45

• Review: Tuning the User Interface

  5 questions

• Optional: Setting Portrait-Only in Code

  3:47

Intents and Multiple Activities

Intents are objects that we use when we intend to do something in Android, like start a new Activity or use the camera. In this stage we'll learn how to use them to navigate to a new Activity, including passing data as an Intent extra. We'll also take a look at string resources and how to be more mindful of text in our apps.

Chevron 13 steps

• Getting Text from an EditText

  8:21

• Getting Text from an EditText

  1 objective

• Adding a Second Activity

  1:57

• Introducing Intents

  2:23

• Starting a New Activity

  2 objectives

• Sending Data to a New Activity

  2:53

• Putting Data in an Intent

  1 objective

• Getting Data from an Intent

  3:06

• Getting Data from an Intent

  2 objectives

• Investigating a NullPointerException

  3:21

• Introducing String Resources

  2:41

• Getting Resources from the Context

  4:20

• Using String Resources

  3 objectives

• Extra Credit

  Master Your Intents

  Extra credit in an earlier stage involved creating an Activity with a lot of different user input controls (widgets). Take that project (or create a new one if you need to) and practice opening a second Activity when each control is used. Then practice attaching different types of data to the Intent and then retrieve it in the new Activity. Display the data you retrieve in a TextView in the new Activity.

  Stringization!

  Now that you know how to use a String resource, refactor every other hard-coded string in the project to use a String resource. Button labels, image content descriptions...you name it!

  For an extra challenge, see if you can refactor the Fun Facts app to use string resources, too. In particular, check out the documentation on string arrays and see if you can change the facts array to be a string-array resource instead. :)

The Model-View-Presenter Pattern

The Model-View-Presenter software design pattern allows us to architect apps in a way that makes them easier to maintain and understand. We will talk about how this pattern can be used in Android development and why it will help us.

Chevron 10 steps

• What is Model-View-Presenter (MVP)?

  4:45

• Why Do We Use MVP?

  3:28

• Review: Model-View-Presenter

  8 questions

• Defining the Data Model

  2:53

• Implementing the Data Model

  6:26

• Creating a Data Model

  4 objectives

• Adding Story Resources

  2:57

• Creating the Story

  3:54

• Adding Custom Constructors

  4:05

• Adding a Custom Constructor

  2 objectives

• Extra Credit

  A Model User

  A common data model is that of a User. Create a simple User data model with attributes like:

  • username
  • real name
  • age
  • gender
  • location

  Then use this new model in a project. Create an Activity that allows you to add data for each property of the User model.

  For extra fun, see if you can attach your User object as an extra to an Intent and send it to another Activity. Can you display all the User data in a second Activity?

Finishing the User Interface

With a fully implemented data model, we are finally ready to display our story in the app!

Chevron 8 steps

• Creating the Story Layout

  5:19

• Customizing the Buttons

  4:59

• Customizing a Button

  2 objectives

• Introducing Styles

  2 questions

• Introducing ScrollViews

  8:00

• Loading the First Page

  5:59

• Formatting Strings

  6:35

• Using a Model in the Presenter

  3 objectives

The Rest of the Story

Our one page story needs more! In this final stage we will dynamically update the story pages and add some app navigation.

Chevron 9 steps

• Loading Additional Pages

  2:40

• Ending the Story

  4:43

• Adding Story Pages

  5 questions

• Finishing an Activity

  2:40

• Finishing an Activity

  1 objective

• Navigation with Back and Up

  4:23

• Maintaining a Custom Back Stack

  6:02

• Navigation

  2 objectives

• Wrapping Up

  1:39

• Extra Credit

  Color Complimenter

  Write an app that asks the user for their favorite color, then take them to a new Activity that uses that color as a background color and says something nice about them.

  Login/Signup Mockups

  Design a fake login or signup screen that asks users for a username and password and has a button that pretends to log them in by taking them to a new Activity. Then just display their data in that new activity.

  Age Calculator

  Ask a user to input their age in years, and then take them to a new Activity that shows their age in days, weeks, months, decades, minutes, etc.