Creating the Story Layout

[MUSIC] 0:00 We have actually completed the hardest part of this app. 0:04 Getting the data model and architecture correct can sometimes be the hardest, 0:07 most time consuming part of working on an app. 0:11 It's an important balance to find, because you can design things to death without 0:13 ever actually working on something. 0:16 You'll need to learn how you work your best. 0:18 But always remember that a little bit of thought ahead of time, 0:20 can save you headaches later on. 0:23 I personally love jumping into code, but I often need to remind myself to 0:25 think through things before I just start typing away. 0:28 Anyhow, let's take a look at our current story page layout. 0:31 When we created our StoryActivity, we also got our layout file activity_story.xml. 0:34 Time to add some things inside here. 0:40 So remember, we said that each page in our story will consist of an image, text for 0:43 the story, and then two choices, 0:47 which we will represent with white buttons at the bottom like this. 0:49 I asked our designer to create images in a horizontal rectangle shape, so 0:52 that we could fill them across the top of the screen in a consistent manner. 0:56 The basic layout will be the image at the top, the story filling up the middle, and 1:00 then our button choices at the bottom. 1:03 We are going to practice again with constraint layouts. 1:06 Remember that the key idea in using constraint layouts is to choose things 1:09 to anchor to. 1:12 In this case we will be anchoring to the sides of the screen. 1:13 Let's start by adding an image view, which we will anchor to the top left corner and 1:16 extend to the right side of the screen. 1:20 It will grow in height as needed for 1:22 the image, just like we're doing with the image on the main title screen. 1:23 In fact, why don't you treat this as a mini challenge. 1:27 Pause this video and see if you can configure it this way yourself. 1:29 Okay, let's drag a new image view. 1:33 I'll select image over here and then pull in image view, and 1:35 I can drop it anywhere on the screen. 1:38 And I'm going to pick a place holder image, I'll use one of the page images. 1:40 Let's use page0 and click OK. 1:43 So I wasn't too concerned about where to drop it on the screen, 1:46 because I'm going to align it with the constraints like this. 1:48 Left, top, and right, and then over here I wanna change all the margins to 0. 1:52 And then remember, we want to force a new calculation of the width with 0dp. 2:02 And then you might be wondering, hey why isn't this filling up the available space. 2:07 That's because we haven't changed adjustViewBounds. 2:11 So check that and, there we go, it pops into place, cool. 2:13 I'm also going to select the scale type to be fitXY again, 2:16 although it doesn't change anything on this view. 2:19 And let's change the ID to something more meaningful like storyimageView. 2:22 Let's switch over to the XML view for a moment. 2:28 We just set the source for this image view to be our drawable image, page0. 2:31 But we're actually going to change the image, 2:36 based on whichever story we're viewing. 2:38 So we don't want to necessarily hard code it, like this, it's gonna be dynamic. 2:40 However, we do want to show up in the preview over here. 2:44 We can accomplish that by using the tools prefix, like we see up here. 2:47 Any can of attribute that we prefix with tools like this, 2:53 will only show within our tools within Android Studio. 2:56 So it's a nice way to use placeholder images and text. 2:59 I'm going to delete this line and then type tools:src and 3:02 then set it equal to @drawable/page0. 3:06 Now if I flip back, we should still see the image and there we go. 3:12 We see it in the Tools, but if we ran this page right now, 3:14 there would be no image there because we didn't dynamically populate it. 3:17 All right, so next, let's add a text view for the text of this page. 3:21 We will position it directly below the image view and change a few properties. 3:25 So here, under All, we've got a TextView at the very top. 3:29 Pull it in here, and it dropped here in the upper corner. 3:32 I'm gonna pull it down and start to resize it, go to the left. 3:36 This one I wanna hook up right here to the image view. 3:39 So it is now constrained to the bottom of our image view. 3:42 Pull that right over, Change all these margins, actually for 3:46 the textView we wanna use margin of 16 all around it. 3:51 That will provide a little bit of space around the text. 3:54 Now the width, we do want to recalculate with 0dp. 3:58 And for the text, let's change that to more placeholder text in the XML view, 4:02 in just a moment. 4:06 I wanna bump up the font size just a little bit. 4:07 Right now the default is 14sp, but I wanna switch that to, let's go with 16sp. 4:09 I'm gonna type in a different value, 16sp. 4:14 Remember that we use SP instead of DP for text, because that will take into account 4:17 any individual preferences users have set for how text is displayed on their screen. 4:22 So for example, if they want all text to be a little bit bigger, 4:28 the SP settings will take that into account. 4:31 Whereas if we used DP settings, it would remain consistent, 4:33 no matter what their user settings were. 4:37 Let's go down here and 4:40 let's change one more thing, this, I'm gonna pull this over. 4:41 This says lineSpacingExtra, 4:43 this creates a little bit of room between lines of text, so let's set this to 8sp. 4:45 Pull this back, and let's switch to the text view. 4:51 And here I want to add, instead of this android:text, this hard-coded text, 4:54 let's switch this to tools and let's plug in one of our strings from the story. 5:00 So type @string/, and let's use page0, and see how it looks. 5:05 Cool, okay lets take a short break here and then we'll come back to finish 5:11 the rest of the layout including a few updates to our main title layout. 5:15