This course will be retired on July 14, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build an Interactive Story App!
You have completed Build an Interactive Story App!
Preview
The last thing we need to add are the button choices at the bottom of our layout. We will customize these buttons and then apply the same customizations to the button on our main title layout.
GitHub Repo
Documentation
- Button - lists all the properties available to us
- Buttons Guide
- Buttons Design Guide
Challenge!
As mentioned in the video, see if you can refactor the property changes for our buttons into a common style that can be reused on all the buttons in our app. Use the link below to learn how to create a custom style, or skip ahead to stage on Styles in the Styles and Themes course.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
The last thing we need to
add are a couple of buttons.
0:00
They will always be anchored at the bottom
of the screen, one on top of each other.
0:02
So we already have Button displayed
over here in the Palette.
0:06
I'm gonna drag this down to the bottom.
0:09
And once again,
it just drops in the upper-left, but
0:11
I'll pull it all the way down.
0:13
Constrain the left, constrain the right,
and this time constrain the bottom.
0:14
Just like before,
let's change a couple things.
0:21
This is going to be our choice number two,
so let's call this choice2Button.
0:23
Let's set the margin to 0 all around.
0:29
Let's set the width to 0dp again, force
it to match the width of its parent.
0:35
And now let's customize a few things.
0:39
So the first thing we want to do is
change the background to be white,
0:42
just like our designer had mocked up.
0:46
So we did this before.
0:48
We can come over here,
select Color and search for white.
0:48
Select that.
0:53
Now we have a white background, cool.
0:54
And we want to change the text color.
0:55
So if we scroll down a little bit we can
see there are TextView properties for
0:58
this button.
1:01
Fun fact,
Button is actually a subclass of TextView.
1:02
So it is a TextView, but it has additional
properties that make it act like a button.
1:06
We'll put in placeholder text in a moment.
1:10
Actually, look at that.
1:12
We've got it right here.
1:13
I forgot that this version of
Android Studio has this little tools text.
1:14
That's what this little wrench means.
1:18
So let's delete this text,
and then here, for
1:20
the placeholder text let's use a string.
1:22
Actually, we can click on the ellipsis
here, and here are all of our strings.
1:25
Let's use page0_choice2.
1:28
There we go.
1:31
We can see it down there.
1:33
Let's change the textSize here to also
be 16sp, just a little bit bigger.
1:34
And we're going to change the textColor
to be a little bit of a bright blue.
1:39
Let's go with #3A8AEC.
1:42
And that value was taken
directly from our mockups.
1:49
Okay, time for another mini-challenge.
1:52
Why don't you pause me and
see if you can do the second button and
1:53
then we'll put it on here.
1:56
All right, so we should be able
to quickly run through this.
1:58
Pull the Button down.
2:00
Constrain the left, constrain the right.
2:03
And I'm gonna pull the bottom to
the top of the existing button.
2:07
Let's call this one choice1Button.
2:11
Change all the margins to 0,
including this one here at the bottom.
2:15
Force it to recalculate
the width with 0dp.
2:20
Set the background to white, again.
2:23
Click OK.
2:29
And let's scroll down a little bit
to the TextView properties again.
2:31
Get rid of the Button text that's
currently in there, and for
2:34
the placeholder text
let's use page0_choice1.
2:39
Don't want to forget the textSize.
2:42
Let's make this 16sp, and
2:44
we'll change the color again to #3A8AEC.
2:48
Okay, so that felt pretty repetitive,
didn't it?
2:54
Wouldn't it be nice if we could apply the
same UI changes across multiple versions
2:58
of a control?
3:02
Well, guess what?
3:03
We can.
3:04
Now we aren't going to cover it right now,
but
3:05
there are things called styles that we
can use to style different elements.
3:07
And we can then apply styles to multiple
things and change the definition of
3:12
the style and then update multiple
things with that one change.
3:15
Check the teacher's notes for
3:19
a link to material that will
teach you more about that.
3:21
There are two other things I want
to do here before we forget.
3:23
Number one,
we're working on story activity.
3:26
And if you remember from a while ago when
we first made our main activity portrait
3:28
only, I mentioned that it's easy to forget
3:32
to convert your additional activities
to portrait-only mode too.
3:35
Now if you have taken
the optional challenge video and
3:39
have the custom application class working
with the forced portrait mode, then great,
3:42
you don't need to worry about this.
3:46
However, if you haven't done that,
you need to go into your manifest and for
3:49
each activity, once again, you wanna
add screenOrientation="portrait".
3:53
And I'm just going to copy this and paste
it down here for StoryActivity, as well.
3:58
Okay, so now both activities will
be locked into portrait mode.
4:03
The other thing I want to do is update the
button style here in our main activity.
4:07
So this still has the default buttonStyle.
4:12
So let's make a few of
those changes we just saw.
4:14
Now here, I'm not sure how
this margin ended up as 1.
4:17
Let's make that 0.
4:19
Set the background to white.
4:21
Then we'll go down to the text properties.
4:31
This one we do want the hardcoded text
because we're not going to change
4:34
it dynamically.
4:37
Get the size to the 16sp,
the color, one more time #3A8AEC.
4:39
All right, so now our layouts look
much more like our design mockups.
4:47
We're in pretty good shape.
4:51
There is one more thing we need
to be concerned with though.
4:52
Let's take a short break,
4:55
and then I'll show you how to
fix this last remaining problem.
4:56
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up