This course will be retired on June 1, 2025.
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
The relatively new ConstraintLayout is used to efficiently arrange layouts for all sorts of screen sizes across different versions of Android. Let's check it out!
Documentation
GitHub Repo
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Okay, so we wanted to get rid of
this little bit of padding around
0:00
our image view.
0:02
And to do that, we need to explore
a relatively new layout called
0:03
the constraint layout.
0:06
I'm going to turn off this
blueprint view here on the right,
0:07
to give myself a little more
room to zoom in on the screen.
0:10
So these three buttons
here control whether or
0:13
not we have that blueprint view.
0:15
So here's the regular view,
here's just the blueprint itself,
0:16
which shows the views but
doesn't show what they actually contain.
0:19
And here's the side by side.
0:22
So, I'm gonna go with this one.
0:23
And that allows me to
zoom in a little bit.
0:25
In a previous project, you may have
seen something called a relative layout
0:26
as the base view group on the screen.
0:30
If we take a look at the Text view of this
layout, we can see that the latest version
0:32
of the Android Studio uses a new layout
by default called the ConstraintLayout.
0:35
It does a lot of the same things as a
relative layout but it does require us to
0:40
think a little bit differently about
how to lay things out on the screen.
0:44
This ConstraintLayout is the base
ViewGroup for the entire screen.
0:47
It takes up the entire rectangle.
0:51
Everything we add will go
inside this constraint layout,
0:53
like our ImageView here.
0:55
Let's take a quick look
at the documentation.
0:57
So it says here that
a ConstraintLayout is a ViewGroup,
0:59
which allows you to position and
size widgets in a flexible way..
1:02
Even though the constraint
layout is brand new,
1:05
it's available as a support library that
we can use on older Android systems.
1:07
We'll talk just a little bit more about
the support library in a few videos.
1:12
If we click on Relative positioning here,
we can see some examples and some comments
1:15
about how to position views inside of our
constraint layout relative to one another.
1:19
We will explore this layout
throughout this project, but
1:24
make a note of this page for reference.
1:26
It's really helpful to revisit it as
you're trying to get something to show up
1:28
a certain way in your layouts.
1:31
Now as usual we can work with constraints
directly here in the XML view but
1:32
there's a nice new editor
here in the design view.
1:36
So let's work on
the horizontal layouts first.
1:40
The idea is that we wanna
constrain the edges of this image
1:43
to the edges of the parent view
which is the edge of the screen.
1:46
So here we now have four knobs on the top,
bottom, left, and right of each view.
1:49
And we can drag those to attach
them to different things.
1:54
So if I drag this beyond
the edge of the screen.
1:57
It will now constrain it,
1:59
and you can see it's illustrated over
here, to the edge of the parent.
2:01
Again, the edge of the screen.
2:04
If I do the same thing on the right.
2:05
Drag it over.
2:07
You can see it's trying to
attach to anything I drag it to.
2:08
But if I drag it beyond,
this is now attached to the right side.
2:10
And by default, it has a margin of 8 DP.
2:14
We can change this to 0 and our image,
well it didn't actually stretch.
2:17
That's because the layout
width is being calculated for
2:22
us as the width of the window.
2:25
Instead of using match parent,
like we would normally use, or
2:28
other types of layouts,
we want to set the width to 0 dp.
2:32
This forces the width to
be calculated each time
2:37
this image is drawn on the screen.
2:40
So again, to reiterate, instead of
using match parent, we set it to 0 and
2:42
then we set the constraints, and force
it to fill the entire available space.
2:46
Let's do the same thing for
2:51
the top, we can grab the knob,
drag it up beyond the top of the screen.
2:51
Change the default margin from 8 to 0.
2:55
And in this case, we want to leave
the layout height as wrap content.
2:58
We aren't going to stretch the image all
the way to the bottom because we're gonna
3:02
put some other things down here
at the bottom of our screen.
3:05
Once again, I wanna mention that
you should have adjust view bounds
3:07
checked down here.
3:10
If you don't, you can see that it
changes how the image is drawn.
3:11
We wanna make sure that it's checked.
3:14
Let's go back to our XML view for
a moment.
3:16
Notice here, in the ImageView tag,
3:19
all the attributes match
the properties that we've just set.
3:21
So here we have the idea that
we set before, titleImageView.
3:24
Down here, we have the source that we
selected, it's called srcCompat and
3:27
it's the main title image.
3:31
And then here we have all the different
constraints that we just set.
3:33
The width and the height, the margins, and
these constraints follow the format of
3:36
the left side of our view is
constrained to the left of the parent.
3:41
The right side is to
the right of the parent, and
3:46
the top is to the top of the parent.
3:48
So you can see how we can type these
in here to add additional constraints
3:51
which are all documented in
that page we just looked at.
3:54
I also wanna point out
the difference in the prefix here.
3:56
So, by default, our normal attributes
have the prefix of Android.
3:59
If they have a prefix of app like this.
4:02
That means that it's something
available from the app compat library.
4:04
The support library.
4:08
You don't really need to worry much
about these differences at this point.
4:09
But we are going to talk a little bit
more about support libraries later.
4:12
I also wanna mention, that while using
the editor is nice, I still like to have
4:15
an understanding of this code behind
the scenes to help troubleshoot issues and
4:18
to fully understand how
things are being laid out.
4:22
So if we hover over ImageView here,
it's slightly highlighted in yellow, and
4:25
that means that there's a warning.
4:28
So this says we are missing
a content description on the image.
4:30
A content description describes what
is in the image and it's used for
4:33
accessibility purposes.
4:36
It's always a good idea to add one.
4:37
So we can add a new attribute right here.
4:40
It doesn't matter where we add it.
4:41
But let's type android:contentDescription.
4:43
And here, for the value, let's type,
Signals from Mars title image.
4:46
Okay so now, why is this new
attribute highlighted in yellow?
4:53
We have a new warning.
4:56
It's telling us that the hard
coded string we just typed,
4:57
should use an app string resource instead.
5:00
Let's ignore this for now, because we're
gonna fix that in just a little bit.
5:03
All right, let's run this to make sure
that everything is working so far.
5:05
I'm going to run this
on my Pixel emulator.
5:10
I'm gonna use the same selection for
future launches, and click OK.
5:12
All right, there we go, we've got our
image and it's taking up the entire width,
5:17
and there is some room here on the bottom,
for
5:21
the stuff we're going to add next,
very cool.
5:22
So, it's obviously pretty
important to know how to add
5:25
images to an app like this.
5:27
There is a lot more we can do with them,
which we'll see as we work through this,
5:28
and future Android projects
5:31
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up