Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
ScrollViews are used to allow users to scroll around content that is too large to fit the screen. Our story is defined to fit most screens, but we'll add a ScrollView in case users read this story on a device with a small screen.
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
You need to sign up for Treehouse in order to download course files.
Sign up