Preview
Video Player
00:00
00:00
Introducing ScrollViews
8:00ScrollViews 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 the parent 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