SPEAKER 1: So a vertical guideline
is, basically you can think of it as a new edge of the screen.
So it's like I have one on the left of the screen.
I have one on the right screen.
And now I've put an edge of the screen
in the middle of the screen that I can use
as an anchor for constraints.
I'm going to go ahead and move that to where
I'd like it in my design.
And now, I could just take those text views
and create constraints from those to this guideline.
And to kind of visualize what this is doing underneath,
if I move the guideline, it's actually
going to move the entire layout now.
So if we go into Helpers and we use Add Vertical Barrier,
this allows you to add a barrier to the screen.
And what a barrier is, is it's kind of like a view group.
And it's actually called a grouping code.
So we can open up the componentry,
select our email and password, and drag that down
to be inside of our barrier.
Now, it's not actually a view group.
It's just a view that's added to the screen.
It's positioned on one side or the other of all of the views
that are inside of it.
Right?
By default, it's on the left, but if I open up the Attributes
pane and scroll down to the bottom,
I'm going to find a barrier direction, which
I can set to the end.
And now that I've done that, I'm going to set up my constraints
and then translate my English over to German.
And everything's going to relay out and do
exactly what I expected.
SPEAKER 2: We've added the ability to add constraints
directly with the context menu.
So in this case, if you have components
that are really close to each other,
this makes it a lot more precise and more direct to actually set
those constraints.
So in this case--
and this is available in 3.3 beta
as well, so you can try it out today.
And so in this case, we select one component,
which we have this lovely cat picture.
You can just simply constrain it to the parent.
So what does it look like if you have multiple components?
So in this case, we have these two text views that
are really close to each other.
And so, I'm not sure if people have
tried to create constraints between two text views
that almost overlap--
it becomes a little painful when you're
going from the bottom of one to the top of the other.
And so with this new Context menu,
you can actually just keep the two selected.
And then when you open up the Context menu,
there's now this Constrain menu.
And so you can actually just see that the two elements
that you want to use are there.
And then you can easily cascade to the right constraint
that you want.
The design surfaces has always had a bunch of view options
to take advantage of when you're working with your layouts.
So the two I'll talk about specifically which we added
is Show All Constraints and Live Rendering.
What we've done in Android Studio
3.3 is we've added this option to show all constraints.
But it's actually turned off by default.
And so here's a quick video to show you what that looks like.
And so what we'll do instead is we only
show the constraints on the actively selected component.
So this makes it easier to just work with the component
that you're actually working with,
and not be distracted by all the arrows and margins that
usually come with the layout.
The other view option we have is Live Rendering.
So we've actually done live rendering by default
in constraint layout for quite some time.
And so it's on by default. But depending
on the specs of your machine [INAUDIBLE],,
it can actually be a little slow.
You've actually been able to zoom and pan in the layout
editor for a while now.
And it comes really in handy when
you're dealing with constraint layouts, especially when,
again, when things are really small
or when they're really close to each other or overlapping.
But what we've done in 3.3 is we've actually
changed the keyboard shortcuts to match
more of what we expect from the design tools like Photoshop
and Sketch.
And so to zoom in, you can use Command or Control,
depending on what OS you're on, and then the equals sign.
And then with the mouse wheel, you can hold Command or Control
and scroll up.
And then if you have a trackpad, you can just pinch in to zoom.
Then the opposite is for zoom out.
So it's Command and Control minus, then Command and Control
with the mouse wheel to scroll down, and then pinch
in the opposite direction.
And then zoom to fit.
So if you're zoomed in and you want to get back to that layout
where you can see the whole thing,
you can just use Command and Control plus 0.
And so then, if you're zoomed in and you don't actually
want to zoom out, but you want to pan around,
you can actually do so by holding Space and then using
the mouse to click and drag.
[MUSIC PLAYING]