SPEAKER: In Android Studio 2.2, we've
greatly improved the Visual Layout
Editor, including built-in support for ConstraintLayout.
ConstraintLayout is a great new way
to define complex layouts without the need
for nested view hierarchies, thanks to a flexible constraint
system.
It's available in the Support Repository,
and works all the way down to API level 9.
To install it in Android Studio, open the SDK manager
and select both the ConstraintLayout
for Android and Solver for ConstraintLayout
from the SDK Tools tab.
To use it in your project, add the dependency
and build a gradle.
Now, create a new layout file with the ConstraintLayout
as the root view.
Notice that, in Android Studio 2.2,
the Layout Editor gained a few new features,
such as the Blueprint mode, which
you can use alongside the Design view if you wish.
On the right side of the screen, you
can see the redesigned View Inspector.
Here, you can switch between the commonly-used View
properties, and the full list.
The Inspector also includes ConstraintLayout-specific
layout attribute editors, which I'll show you in a moment.
First, let's start by dragging an image view from the palette
onto the blueprint.
You can see that every view in a ConstraintLayout
has four handles on the sides-- top, right, bottom, and left.
Views that inherit from Text view
also have a baseline handle.
To position views relative to each other,
you can click and drag from one handle
to another of the same type.
Here, I'm placing a Text view in the layout
and aligning it to the right of the Image view
by creating a constraint from the left handle.
I'm also aligning these views vertically
by adding a top constraint.
The views are still a bit too close together,
so you can adjust the margin by dragging the Constraint
view in Design Preview, or I can use the Properties window
on the right.
That looks better.
The only thing that remains is positioning our views
inside the parent container.
By enabling the Show Constraint Settings in the toolbar,
I can see that there are currently
no constraints pointing to the outer edges of the layout.
My two views would simply get moved
to position zero at runtime.
By connecting the top and left handles to the parent edges,
I can specify how I want to position
the views in the container.
What if I want to center a view instead
of gluing it to the left or right side of the screen?
I'll create a new Text view, and center it horizontally
within the layout by connecting both sides to the parent.
You can see the view now has constraints pulling it
both ways.
Because ConstraintLayout can't satisfy both constraints
at the same time, the view remains centered.
If you now look at the Properties window,
you can see a slider called Horizontal Bias.
By changing the percent value using the slider,
I can influence the strength or weight
of each constraint, which results
in moving the view slightly to the left or right.
You can also change the desired width and height of a view
by cycling through three modes-- Wrap Content, Fixed Size,
and Match Constraint.
You shouldn't be using Match Parent in ConstraintLayout,
and use Match Constraints instead,
which basically means that the view can grow up
to the available space while still
satisfying its constraints.
To remove a constraint, click on one
of the sides of the box shown in the Properties window,
or click on a handle in the Design view.
You can also delete all constraints on a single view
by clicking here, or remove all constraints and the layout
using the button in the toolbar.
We're continuously improving both runtime performance as
well as editor capabilities, so always make sure
that you update to the newest version in the SDK Manager
and your build files.
And check out our code lab and article
on "Medium" for more advanced ConstraintLayout examples.
[MUSIC PLAYING]
Thanks for watching.
And if you want to learn more about Android
Studio and Android development, click on one of the videos
here.
[MUSIC PLAYING]