Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
We have a data model and a layout to display it. Time to hook it all together!
Code for copy/paste
storyTextView = (TextView)findViewById(R.id.storyTextView);
choice1Button = (Button)findViewById(R.id.choice1Button);
choice2Button = (Button)findViewById(R.id.choice2Button);
Related Links
- StackOverflow: Android getResources().getDrawable() deprecated API 22 - There's a good discussion in here about how and why we use ContextCompat.
Documentation
GitHub Repo
-
0:00
Let's hook up our data.
-
0:02
In our MVP pattern, we have the layout here as the view and
-
0:05
our story classes as the model.
-
0:07
Let's load the story into the layout using the presenter StoryActivity.
-
0:12
Let's create a new member variable because we will use our story
-
0:15
throughout this activity class.
-
0:19
So let's add a private Story and just name it story.
-
0:23
Now down here in onCreate,
-
0:25
we can initialize it with our new default constructor.
-
0:28
story = a new Story.
-
0:33
Okay, now we want to load a page from the story
-
0:37
both when the activity is first created and when a button is tapped on.
-
0:41
Sounds like we need a method.
-
0:43
Let's type the method we want to use right here first.
-
0:46
loadPage and the first page we would want to load is 0.
-
0:51
Okay, so now we can use the Android quick fix, Alt plus Enter, and
-
0:54
create this method loadPage.
-
0:56
Okay, so here's our new method and I'm going to change the parameter name for
-
0:59
int i.
-
1:00
Let's call this pageNumber.
-
1:03
Inside this new method, let's create a page named page and
-
1:07
let's hit Alt plus Enter to pull in our new page class.
-
1:12
Again, we do not want either of these PDF pages down here, so
-
1:17
pick the right one and let's set it equal to well, now what?
-
1:21
We need to get a page from our story, so let's keep typing what we want, and
-
1:24
then we can use Android Studio to help us create another new method.
-
1:28
So we want from the story to get a page of the given page number.
-
1:35
All right, so as expected, we don't have this method yet but
-
1:38
we can use another quick fix.
-
1:40
Alt Enter.
-
1:41
Create the method getPage and it adds it over here in our story class.
-
1:44
Looks like I hit an extra key when I hit Enter, okay.
-
1:48
So in here, all we wanna do is return the correct page from our pages array
-
1:53
given the page number parameter.
-
1:55
So we can just do a one line to return pages and pass in the index pageNumber.
-
2:02
Again technically we could access the pages array
-
2:05
directly if we made this a public member variable but
-
2:08
this little bit of encapsulation is a good program in practice.
-
2:11
And just to be safe, let's add a little check here to make sure that we
-
2:14
never request a page that's outside the bounds of the pages array.
-
2:18
So we can say if pageNumber is greater than or equal to pages.length,
-
2:23
then we would get an array out of bounds exception so
-
2:26
instead I'd rather have the app go back to the start then totally crash.
-
2:32
So let's set pageNumber here equal to 0 as a little safety catch.
-
2:36
All right, so back in our story activity,
-
2:39
now we want to wire up the data from this page to our user interface.
-
2:44
We'll start with variables for the views we want to update.
-
2:46
We can add them up top again as member variables so
-
2:49
that we can set them once in onCreate, but then use them in our new loadPage method.
-
2:54
So let's add view variables for the views we're interested in.
-
2:57
private ImageView,
-
3:00
let's call this storyImageView just like we gave it that same ID.
-
3:05
Then we want private TextView storyTextView.
-
3:10
Next we need our two buttons private Button choice1Button and
-
3:15
private Button choice2Button.
-
3:19
Next we can set these down in onCreate.
-
3:22
I like to keep my layout code close together so
-
3:24
I'm going to add some new lines after the call setContentView and
-
3:28
then type storyImageView = cast it to an ImageView.
-
3:34
And then call findViewById(R.id.storyImageView).
-
3:40
We need to do this three more times but for convenience sake, I'm just going to
-
3:43
paste this in and for your convenience, that code is available to paste below.
-
3:47
All right, our pieces are in place.
-
3:49
We have views and we have data so we just need to set the right thing for each view.
-
3:53
Let's start with the image down here in our loadPage method.
-
3:57
We earlier learned how to set the source image for
-
4:00
an image view in the design view of a layout.
-
4:02
Now we can take a look at how to set the source here in code.
-
4:05
So type storyImageView.
-
4:08
And then we want to set the drawable image for this image view,
-
4:12
so let's type setDrawable, and there isn't a setDrawable method,
-
4:16
but look at that, it's called setImageDrawable.
-
4:19
So go ahead and hit Enter for that.
-
4:21
And this method requires a parameter of type Drawable.
-
4:25
Let's create one on the line above.
-
4:27
So we want the Drawable type, and let's just name it image.
-
4:32
And now because we're in an activity which again, is ultimately a context.
-
4:37
We can use another shortcut from the context class to get a drawable resource.
-
4:41
Similar to what we saw previously to get a string resource.
-
4:44
Now this is a little bit different though.
-
4:45
We are going to use a method from another compatibility class called ContextCompat.
-
4:52
So from here we want to use auto complete and type getDrawable
-
4:57
then we pass in the context which is in this case is this.
-
5:01
And the ID of the drawable we want to get.
-
5:04
Let's see, where did we store the ID for the image for a specific page?
-
5:09
That's right, it's right there in the page class.
-
5:11
So from our page variable, call getImageId, which will get us
-
5:15
the appropriate ID to use, then we can add a semicolon and our image is now set.
-
5:20
Well we need to actually pop it in down here.
-
5:23
Lets use the image variable as the new parameter.
-
5:25
We're using this ContextCompat class because Android has evolved how it lets us
-
5:29
display and customize drawable resources over the years.
-
5:33
We used to be able to do this in a very similar way to strings, but
-
5:36
this is a better way to get a drawable now.
-
5:37
All right, this is quite a bit of work so let's run this and
-
5:40
make sure we haven't gone off the rails.
-
5:43
All right, loads up main activity.
-
5:45
I'll type my name.
-
5:47
Tap on the button.
-
5:49
And, okay, we have some success.
-
5:51
The image is showing up in our activity just like we wanted to see.
-
5:55
Let's take a quick break, and then we'll see how to add the rest of our layout.
You need to sign up for Treehouse in order to download course files.
Sign up