Introducing ScrollViews

We have a little problem with our layout. 0:00 What happens if our story text here takes up more space than we 0:02 currently have available? 0:05 Watch how it looks if we switch to a smaller screen size. 0:07 Let's go with the Nexus 4, for example. 0:10 Okay, that still fits all right. 0:12 But let's go down to something smaller like the old Nexus 1. 0:14 Okay, you can see that our story text is now showing up behind our buttons that's 0:18 no good. 0:22 Whenever we have more content than we can fit on the screen, 0:23 we need to decide what to display and how to bring the rest onto the screen. 0:26 In this case, let's allow the user to scroll the page as they read. 0:30 Android provides a special view group called a ScrollView. 0:34 The way it works is this. 0:37 We define the ScrollView as a rectangle on the screen. 0:38 And then anything we put inside it as child views can then be scrolled 0:41 horizontally, vertically, or in both directions. 0:44 In this case, let's keep the buttons on the screen at all times, but 0:47 let's allow the user to scroll both the image and the text as needed. 0:51 We won't need this for most of the pages in the story on most phones. 0:55 But again, we always wanna be proactive about how things will look for 0:58 all types of devices. 1:01 So let's get a scroll view from our palette. 1:03 We can search for it, or go to Containers, and then here we find a ScrollView. 1:06 And we want the Vertical ScrollView, not the Horizontal ScrollView. 1:10 Although you can make a ScrollView scroll in both directions. 1:14 So let's drag this onto the screen and go ahead and just drop it anywhere. 1:17 Now before we even begin formatting this I do wanna warn you that 1:21 laying things out with ScrollViews especially within a constrained layout 1:24 can get a little frustrating. 1:28 It's not necessarily hard but often I'll constrain or 1:30 move something incorrectly and it will mess up a number of things. 1:33 If you ever get really stuck like that it's usually easier just to start over. 1:37 All right, so the first thing we want to do with our new 1:41 scroll view is constrain all the edges. 1:44 It's a little bit small I'll pull the right side over. 1:45 Pull the left side back. 1:49 Pull the bottom all the way to the bottom. 1:51 Oops, that's not what I meant to do. 1:53 Let's see, Command + Z undos that constraint and 1:55 Ctrl + Z on Windows should do the same. 1:57 I wanna pull the bottom on top of the buttons, 2:00 not all the way to the bottom of the screen, there we go. 2:02 And then I'll take the top all the way to the top. 2:05 This is where a blueprint view can actually help. 2:09 You can see the ScrollView while it's still kind of hard to see, but 2:12 it's a little bit easier to see once you remove some of the clutter. 2:15 As usual, we're going to switch the margins to 0 for 2:19 everything, And now before we put anything in this ScrollView, 2:22 it's important to note that a ScrollView can only have one direct child view. 2:27 Now in our case, we want both the image and the text to scroll together. 2:32 That means we need to group them together in some kind of view group, 2:36 like a linear layout or a relative layout. 2:39 This ScrollView if we scroll down to this component tree, this ScrollView 2:41 has a linear layout already in it by default and that will work perfectly for 2:44 us because we want these two views laid out one on top of the other. 2:49 So now we're going to make use of this component tree. 2:53 This shows us the hierarchy of our layout so at the root we have a constraint layout 2:55 and within that we have these five views including our new ScrollView. 3:00 Then if we keep drilling down, our ScrollView has the linear layout. 3:04 So what we wanna do is move the storyImageView and 3:07 the textView inside this linear layout. 3:10 Actually, it's bothering me that we forgot to rename the ID. 3:13 So let's click on textView, go up to the top. 3:15 And let's call this storyTextView to make it more consistent. 3:18 Okay, so now we can drag things directly in this component tree. 3:22 And this is again, what I was cautioning about this can sometimes mess thing up. 3:26 You might drag it into the wrong place or it'll break a constraint. 3:30 Don't worry if any of that happens, you can either undo with the keyboard 3:33 shortcuts or just rebuild your layout from scratch. 3:36 So let's take storyImageView, pull it down here, and try and 3:39 drop it on top of LinearLayout. 3:43 And sure enough, there it goes. 3:44 It's now within our LinearLayout. 3:46 And storyTextView, we will do the same thing and 3:48 we can maybe put it underneath the bottom there. 3:51 Yup there goes now it's underneath, okay that's a good 3:53 sign everything looks consistent over here, so our ScrollView is still taking 3:56 up this rectangle from the top down to the top of the buttons and within this 4:01 ScrollView we're now displaying ImageView followed by the textView. 4:05 So I'm hesitant to run this yet without a little bit of review let's take a look 4:09 at properties for the individual components. 4:12 Okay, so here we have 0dp for both the width and the height. 4:15 That's because a ScrollView always needs to calculate both of these dimensions. 4:18 This is what we want to see here. 4:22 There are some additional things we can customize, 4:24 but I'm gonna check this box called fillViewport. 4:26 This is somewhat similar to the adjust view bounds we've seen for images, but 4:29 it doesn't actually change anything in our layout right here. 4:33 Let's click on view all properties, and 4:36 let's set the background of this ScrollView to white. 4:39 I noticed when I was testing on the device that the background of the ScrollView is 4:43 transparent, but the background of the textView was white so 4:47 it looked a little bit funny. 4:49 So down here we have a couple different backgrounds let's pull this over and 4:51 see we want the regular background property here. 4:54 And we can select white again just like we've been doing. 4:57 And we haven't really explored over here yet but we can also take a look at 5:00 the constraints here in this section in our properties so let's just double check. 5:04 You gotta pull it even further to read but 5:08 it says constrain the bottom to the top of our first button, good. 5:11 Left and right to the parent and top also to the parent. 5:15 Cool, so the constraints are how we want them to be. 5:18 Next, let's review our LinearLayout. 5:21 And I'm going to start by going back to the Fewer Properties view. 5:24 So you probably haven't seen a LinearLayout yet 5:27 in our courses here at Treehouse. 5:29 It's similar to how a relative layout works, except it's more simple. 5:31 We can only lay items out in a linear fashion, 5:35 either horizontally or vertically. 5:38 So what that means is, just like in this case, Vertically we have one item, and 5:39 then when it's done the next is displayed, etc. 5:43 And we could keep going for as many items as we wanted. 5:45 So here we see that the orientation is set to vertical, 5:48 although we could switch this to horizontal. 5:50 And here, because it is no longer the direct child of a ConstraintLayout, 5:52 we don't have any constraints. 5:57 We have the old layout, width and height. 5:58 We want it to match the parent, which means it will stretch from left to right 6:00 and the height will wrap the content of what's inside, 6:04 which in this case, is the image in the text view. 6:06 Now what's apparent of the LinearLayout? 6:08 That's right, it's the ScrollView itself. 6:11 So the ScrollView is constrained, but 6:12 then the LinearLayout is relative to how it's positioned in the ScrollView. 6:14 We could put an optional ID up here, but we don't need that, so let's skip that. 6:19 Now for the ImageView and textView themselves, let's switch to the XML view. 6:24 All right, so we still have our buttons here. 6:29 And then we have the ScrollView. 6:31 And remember the order doesn't matter. 6:33 At this point, we are within the ConstraintLayout. 6:34 So as long as these children are constrained relative to each other, 6:38 then we are okay. 6:41 So here's our LinearLayout. 6:43 Within it is our ImageView. 6:44 It's got all the attributes of before. 6:46 And we could actually get rid of the constraints now because it's no longer 6:48 a child of the ContraintView. 6:52 Same thing for the TextView let's get rid of these constraints. 6:54 And just to make sure I'm not lying, let's look at the design view. 6:58 Yep, still looks the same. 7:01 So one more thing here in the TextView just like before we have 7:03 a missing content description. 7:07 So let's add a new line, and type android:contentDescription. 7:09 And let's just call this Story page image, 7:13 just to simply describe what it's there for. 7:16 Now the next warning is about converting this to a string resource, 7:19 so hit Alt + Enter for a quick fix, Strict string resource, and 7:24 let's call this story_image_ content_description. 7:29 Okay I think we're actually set here, let's click on design, and 7:34 let's run this on the Pixel 5 emulator and see how it looks. 7:38 Okay here we go, I'm gonna enter my name, start my adventure, That's right, 7:42 we are only using placeholder data in our layout right now, 7:47 that's why we don't see anything here. 7:50 Well that's a perfect segway because coming up next we're going to see how 7:53 to load the data for our first page for our story into our view here. 7:56