We have a little problem with our layout.

What happens if our story text here takes up more space than we

currently have available?

Watch how it looks if we switch to a smaller screen size.

Let's go with the Nexus 4, for example.

Okay, that still fits all right.

But let's go down to something smaller like the old Nexus 1.

Okay, you can see that our story text is now showing up behind our buttons that's

no good.

Whenever we have more content than we can fit on the screen,

we need to decide what to display and how to bring the rest onto the screen.

In this case, let's allow the user to scroll the page as they read.

Android provides a special view group called a ScrollView.

The way it works is this.

We define the ScrollView as a rectangle on the screen.

And then anything we put inside it as child views can then be scrolled

horizontally, vertically, or in both directions.

In this case, let's keep the buttons on the screen at all times, but

let's allow the user to scroll both the image and the text as needed.

We won't need this for most of the pages in the story on most phones.

But again, we always wanna be proactive about how things will look for

all types of devices.

So let's get a scroll view from our palette.

We can search for it, or go to Containers, and then here we find a ScrollView.

And we want the Vertical ScrollView, not the Horizontal ScrollView.

Although you can make a ScrollView scroll in both directions.

So let's drag this onto the screen and go ahead and just drop it anywhere.

Now before we even begin formatting this I do wanna warn you that

laying things out with ScrollViews especially within a constrained layout

can get a little frustrating.

It's not necessarily hard but often I'll constrain or

move something incorrectly and it will mess up a number of things.

If you ever get really stuck like that it's usually easier just to start over.

All right, so the first thing we want to do with our new

scroll view is constrain all the edges.

It's a little bit small I'll pull the right side over.

Pull the left side back.

Pull the bottom all the way to the bottom.

Oops, that's not what I meant to do.

Let's see, Command + Z undos that constraint and

Ctrl + Z on Windows should do the same.

I wanna pull the bottom on top of the buttons,

not all the way to the bottom of the screen, there we go.

And then I'll take the top all the way to the top.

This is where a blueprint view can actually help.

You can see the ScrollView while it's still kind of hard to see, but

it's a little bit easier to see once you remove some of the clutter.

As usual, we're going to switch the margins to 0 for

everything, And now before we put anything in this ScrollView,

it's important to note that a ScrollView can only have one direct child view.

Now in our case, we want both the image and the text to scroll together.

That means we need to group them together in some kind of view group,

like a linear layout or a relative layout.

This ScrollView if we scroll down to this component tree, this ScrollView

has a linear layout already in it by default and that will work perfectly for

us because we want these two views laid out one on top of the other.

So now we're going to make use of this component tree.

This shows us the hierarchy of our layout so at the root we have a constraint layout

and within that we have these five views including our new ScrollView.

Then if we keep drilling down, our ScrollView has the linear layout.

So what we wanna do is move the storyImageView and

the textView inside this linear layout.

Actually, it's bothering me that we forgot to rename the ID.

So let's click on textView, go up to the top.

And let's call this storyTextView to make it more consistent.

Okay, so now we can drag things directly in this component tree.

And this is again, what I was cautioning about this can sometimes mess thing up.

You might drag it into the wrong place or it'll break a constraint.

Don't worry if any of that happens, you can either undo with the keyboard

shortcuts or just rebuild your layout from scratch.

So let's take storyImageView, pull it down here, and try and

drop it on top of LinearLayout.

And sure enough, there it goes.

It's now within our LinearLayout.

And storyTextView, we will do the same thing and

we can maybe put it underneath the bottom there.

Yup there goes now it's underneath, okay that's a good

sign everything looks consistent over here, so our ScrollView is still taking

up this rectangle from the top down to the top of the buttons and within this

ScrollView we're now displaying ImageView followed by the textView.

So I'm hesitant to run this yet without a little bit of review let's take a look

at properties for the individual components.

Okay, so here we have 0dp for both the width and the height.

That's because a ScrollView always needs to calculate both of these dimensions.

This is what we want to see here.

There are some additional things we can customize,

but I'm gonna check this box called fillViewport.

This is somewhat similar to the adjust view bounds we've seen for images, but

it doesn't actually change anything in our layout right here.

Let's click on view all properties, and

let's set the background of this ScrollView to white.

I noticed when I was testing on the device that the background of the ScrollView is

transparent, but the background of the textView was white so

it looked a little bit funny.

So down here we have a couple different backgrounds let's pull this over and

see we want the regular background property here.

And we can select white again just like we've been doing.

And we haven't really explored over here yet but we can also take a look at

the constraints here in this section in our properties so let's just double check.

You gotta pull it even further to read but

it says constrain the bottom to the top of our first button, good.

Left and right to the parent and top also to the parent.

Cool, so the constraints are how we want them to be.

Next, let's review our LinearLayout.

And I'm going to start by going back to the Fewer Properties view.

So you probably haven't seen a LinearLayout yet

in our courses here at Treehouse.

It's similar to how a relative layout works, except it's more simple.

We can only lay items out in a linear fashion,

either horizontally or vertically.

So what that means is, just like in this case, Vertically we have one item, and

then when it's done the next is displayed, etc.

And we could keep going for as many items as we wanted.

So here we see that the orientation is set to vertical,

although we could switch this to horizontal.

And here, because it is no longer the direct child of a ConstraintLayout,

we don't have any constraints.

We have the old layout, width and height.

We want it to match the parent, which means it will stretch from left to right

and the height will wrap the content of what's inside,

which in this case, is the image in the text view.

Now what's apparent of the LinearLayout?

That's right, it's the ScrollView itself.

So the ScrollView is constrained, but

then the LinearLayout is relative to how it's positioned in the ScrollView.

We could put an optional ID up here, but we don't need that, so let's skip that.

Now for the ImageView and textView themselves, let's switch to the XML view.

All right, so we still have our buttons here.

And then we have the ScrollView.

And remember the order doesn't matter.

At this point, we are within the ConstraintLayout.

So as long as these children are constrained relative to each other,

then we are okay.

So here's our LinearLayout.

Within it is our ImageView.

It's got all the attributes of before.

And we could actually get rid of the constraints now because it's no longer

a child of the ContraintView.

Same thing for the TextView let's get rid of these constraints.

And just to make sure I'm not lying, let's look at the design view.

Yep, still looks the same.

So one more thing here in the TextView just like before we have

a missing content description.

So let's add a new line, and type android:contentDescription.

And let's just call this Story page image,

just to simply describe what it's there for.

Now the next warning is about converting this to a string resource,

so hit Alt + Enter for a quick fix, Strict string resource, and

let's call this story_image_ content_description.

Okay I think we're actually set here, let's click on design, and

let's run this on the Pixel 5 emulator and see how it looks.

Okay here we go, I'm gonna enter my name, start my adventure, That's right,

we are only using placeholder data in our layout right now,

that's why we don't see anything here.

Well that's a perfect segway because coming up next we're going to see how

to load the data for our first page for our story into our view here.