The last thing we need to add are a couple of buttons.

They will always be anchored at the bottom of the screen, one on top of each other.

So we already have Button displayed over here in the Palette.

I'm gonna drag this down to the bottom.

And once again, it just drops in the upper-left, but

I'll pull it all the way down.

Constrain the left, constrain the right, and this time constrain the bottom.

Just like before, let's change a couple things.

This is going to be our choice number two, so let's call this choice2Button.

Let's set the margin to 0 all around.

Let's set the width to 0dp again, force it to match the width of it's parent.

And now let's customize a few things.

So the first thing we want to do is change the background to be white,

just like our designer had mocked up.

So we did this before.

We can come over here, select Color and search for white.

Select that.

Now we have a white background, cool.

And we want to change the text color.

So if we scroll down a little bit we can see there are TextView properties for

this button.

Fun fact, Button is actually a subclass of TextView.

So it is a TextView, but it has additional properties that make it act like a button.

We'll put in placeholder text in a moment.

Actually, look at that.

We've got it right here.

I forgot that this version of Android Studio has this little tools text.

That's what this little wrench means.

So let's delete this text, and then here, for

the placeholder text let's use a string.

Actually, we can click on the ellipsis here, and here are all of our strings.

Let's use page0_choice2.

There we go.

We can see it down there.

Let's change the textSize here to also be 16sp, just a little bit bigger.

And we're going to change the textColor to be a little bit of a bright blue.

Let's go with #3A8AEC.

And that value was taken directly from our mockups.

Okay, time for another mini-challenge.

Why don't you pause me and see if you can do the second button and

then we'll put it on here.

All right, so we should be able to quickly run through this.

Pull the Button down.

Constrain the left, constrain the right.

And I'm gonna pull the bottom to the top of the existing button.

Let's call this one choice1Button.

Change all the margins to 0, including this one here at the bottom.

Force it to recalculate the width with 0dp.

Set the background to white, again.

Click OK.

And let's scroll down a little bit to the TextView properties again.

Get rid of the Button text that's currently in there, and for

the placeholder text let's use page0_choice1.

Don't want to forget the textSize.

Let's make this 16sp, and

we'll change the color again to #3A8AEC.

Okay, so that felt pretty repetitive, didn't it?

Wouldn't it be nice if we could apply the same UI changes across multiple versions

of a control?

Well, guess what?

We can.

Now we aren't going to cover it right now, but

there are things called styles that we can use to style different elements.

And we can then apply styles to multiple things and change the definition of

the style and then update multiple things with that one change.

Check the teacher's notes for

a link to material that will teach you more about that.

There are two other things I want to do here before we forget.

Number one, we're working on story activity.

And if you remember from a while ago when we first made our main activity portrait

only, I mentioned that it's easy to forget

to convert your additional activities to portrait-only mode too.

Now if you have taken the optional challenge video and

have the custom application class working with the forced portrait mode, then great,

you don't need to worry about this.

However, if you haven't done that, you need to go into your manifest and for

each activity, once again, you wanna add screenOrientation="portrait".

And I'm just going to copy this and paste it down here for StoryActivity, as well.

Okay, so now both activities will be locked into portrait mode.

The other thing I want to do is update the button style here in our main activity.

So this still has the default buttonStyle.

So let's make a few of those changes we just saw.

Now here, I'm not sure how this margin ended up as 1.

Let's make that 0.

Set the background to white.

Then we'll go down to the text properties.

This one we do want the hardcoded text because we're not going to change

it dynamically.

Get the size to the 16sp, the color, one more time #3A8AEC.

All right, so now our layouts look much more like our design mockups.

We're in pretty good shape.

There is one more thing we need to be concerned with though.

Let's take a short break,

and then I'll show you how to fix this last remaining problem.