Customizing the Buttons

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 it's 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