Hi, everyone. My name is Nicolas.
And today, I'm going to talk about what's new
in the Android Studio Design Tools.
So you may remember the Design Tools,
about a few years ago,
with the introduction of the Layout Editor in Android Studio 2.2.
But if you have not tried the Design Tools since then,
well, let me cover a lot of what we've been doing.
And it is a lot.
So we released new tools in most releases of Android Studio,
like the Navigation Editor or the Resource Manager,
new libraries as well that help you create your application
like Constraint Layout and Motion Layout.
So with this, we essentially build all those different tools,
and I'm going to talk a little bit about
what we did in 3.5.
In 3.5, as you may know,
the focus was to work on Project Marble,
which was explicitly not a feature release,
but we focused on improving the performances,
the stability, the overall quality of the product,
and that adds a tremendous impact on those Design Tools
because by definition, they are visual tools.
They tend to use a lot of memory.
They tend to be really CPU intensive
because we do a lot of complicated work.
So all this work in 3.5 pans out in the subsequent releases.
Specifically, with the Resource Manager,
the Navigation Editor, and the Layout Editor,
we finally got a proper ecosystem of tools
that really work together.
So it's not just one tool.
You can really take your entire project
and work with it in a visual way.
Since then, we released Android Studio 3.6
with a lot of new features and refinements.
So in the Layout Editor, for example, we added the new Split mode,
which essentially allows you to see both your XML
or your Layout Editor at the same time in the Split mode.
Let me show you how it works.
So this is the Layout Editor that you know.
By simply clicking on that icon will get your Text View on the left.
And contrary to the Preview window,
that Preview panel that we used to have,
this is actually the full-blown Layout Editor.
All the panels of the Layout Editor are available.
All the options are available, and you can see here
playing with those panels and see the changes
being reflected straight into the XML.
So again, this idea of being transparent is what we operate upon.
Another thing that's pretty convenient is that this Split View mode
applies to a lot of design tools,
and here's an example in the Navigation Editor.
You'll notice here that the section in the text
reflects into the visual portion in the Navigation Editor.
So, again, the idea is to make it a lot more easy to understand
what those tools are generating.
Because at the end of the day, those tools,
those generated files are what you are using
in your project.
Specifically, in the Navigation Editor, we did a couple of things.
One, we moved to the new Attributes panel,
and that actually brings you a lot of nice benefits.
It's the same panel as the Layout Editor,
which means that you got autocomplete,
so you won't have to think about when you type new stuff.
You have lint errors being surfaced into the panels
with Warnings, you can go back to the declaration and et cetera.
In 3.6, we did a lot of refinement in the Resource Manager.
First, we added much more support for new resources.
So you can see your different menus, you can see your fonts,
you can see your translation strings,
and all of that in a very visual way.
So it's a lot easier for you to navigate across your resources.
We also added a better support for importation of resources.
So you can import Drawables, or Colors or your Fonts.
Essentially, we tried to streamline this workflow.
We also support filtering resources
because now you can see lots of resources in your project.
For complex projects, obviously,
that can be quite a lot of things to wade through.
So now you can very quickly add filtering so that you can see
and find your resources in a more straightforward way.
Here is a quick example of how all of that works.
So, first, I can literally copy and paste straight into that,
but we also support drag and drop.
And you can see essentially that the Resource Manager
really works hand in hand with the Layout Editor.
Another example is the integration with the new ResourcePicker
that builds up upon the Resource Manager.
So, again, the idea is to make it a lot more straightforward for you
to navigate through your assets and pick the right ones.
And that brings us to Android Studio 4.0
that we just released.
We are really excited about 4.0.
We are really interested to watch what you're going to build with it,
specifically, for the Design Tools, because we added a lot of new things.
First, in the Layout Editor,
we improved on the Split View user interface,
so it's a lot easier to figure out and snappier.
So I can't resist to show it to you again.
Look at how fast that is.
So it's really, really fast to go between your text,
the preview, or the full designer.
We also support the Material Icons in a much more straightforward way.
So thousands of icons and different themes,
and all you have to do now is create a vector asset,
and you'll get a panel showing you all the icons.
And you can set up additional themes and search for them,
and it's really convenient.
Then in terms of new tools, we added the Motion Editor,
which is a brand-new graphical editor to create motion.
Here is a quick example.
I cannot resist to show you how it works,
where I can start with basic Constraint Layout
that shows me my screen.
And I can go and convert it into a Motion Layout, just like that.
Now we've got two states: a start state and an end state,
and I can go, click on them, and do some operations.
So here, I'm just going to modify something
a little bit.
Some properties that you can see that if I do go to the Transition mode,
I'll see that my text that was invisible
and is visible in the end state is now automatically changing.
And if I do some more interesting operations,
like changing the size of an element,
you see that everything is correctly interpolated.
And you can go, scrub around the timeline,
so you see what's going here.
And you are in full control
of how you want your animation to look.
So in Android Studio 4.0,
we also added a new layout validation tool,
and that allows you to see at a glance
how your layout is going to behave on a variety of form factors,
like tablets or Landscape and Portrait and things like that.
That panel can stay live and open at the same time
as you do your layout,
so you have immediate feedback when you do changes.
We also support a color blindness simulation mode
to check that your UI works well for everyone.
We also support different size visualization
for the system fonts,
so you can check that your layout handled that correctly as well.
And finally, we allow you to create
your own set of configurations
that you want to check your layout against.
So another tool we added in 4.0 is the Layout Inspector.
The Layout Inspector allows you to connect directly
to your running application and inspect it.
So here's how it looks like.
You've got this screen-- I can just go,
select elements.
You'll see it's reflected on the Component Tree on the left,
and you'll see the values of the different attributes
on the right of the element that I'm selecting.
I can also pivot that entire view in 3D
to see how the different elements are related to one another
and if elements are over shadowing each other.
That's a really, really convenient tool.
We also support attribution of those values,
and that is a game changer.
That means that I can go on my running application,
select a specific element, for example, that green background,
and find out where that green comes from.
And in that case, that file is already open.
I can go in the File, change the color,
and see it reflected into the Preview
and apply changes live to the running application,
and I see the results.
Now let me talk about 4.1.
So we introduced a lot of new stuff in 4.0,
a lot of big major features.
But in 4.1, we didn't stop,
so we continued to refine those tools,
and while there are no huge standalone features,
we really made many, many improvements in those existing tools.
Let me talk to you about the Custom View Preview.
So if you ever tried to create a custom view,
you probably wanted to test it in the Layout Editor,
and to do that, it's a little cumbersome.
You have your actual code, and you need to create an XML file
that's going to instantiate that custom view that you just did,
and then you can visualize it.
So it's a little bit not as frictionless as we would like.
So, in Android Studio 4.1, we are bringing
live Custom View Preview directly in your Code Editor.
Let me show you a little bit.
What I mean by live is that everything works.
You can even resize your component if you compile the code,
you will see the changes being reflected directly.
So it's a very, very useful tool when you are developing
custom components.
The Layout Editor has its content of new features as well.
First, we introduced a much nicer way
of setting the Visibility Attributes.
It's nice because not only it allows you to set the visibility
that you know,
but it's really easy to set the Tools Visibility.
And the Tools Attributes are attributes that are only applied
when you are editing stuff in the Layout Editor.
So it's great if you want to add or test a set of values
that works when you're editing your layout,
but that may not be the same one that you're using on a real device,
like Visibility,
so it's really easy to check the different behavior this way.
We also added a lot of new features
to make using the Constraint Layout Helpers
a lot more straightforward.
So first, we added them into the palette.
So now we've got a list of different Helpers that we provide,
and it's as easy as dragging them onto the design surface.
You can also use the right-click menu
to create those same helpers,
and what's nice with it is that if you select a bunch of widgets,
we automatically add them in the helper as references.
So here's how it works.
I've got this bunch of widgets that I already placed,
and I just would like to organize them in a nicer way
with the flow helper.
So I can just select them, right-click, create a flow helper,
and that's it.
They're all going to be properly laid out.
And because flow is a normal widget,
I can just position it as usual here with a couple of constraints in the parent.
What we support now as well is showing you the different elements
that are referenced in that constraint helper
in that top right panel.
So it's easy for me to then add new elements
to that flow as well as editing that flow.
So you have a brand new panel
to edit the different attributes of the flow,
so you don't have to guess which attributes exist.
You can just go edit it then like that.
Again, you have immediate validation of what's happening.
And that reference panel in the top right
allows you as well to reorder the elements,
or delete them in addition to add them.
So it's a lot more convenient
to use the Constraint Layout Helpers in 4.0.
So if you have not done so, I recommend it.
The Tools Toggle is, as I mentioned,
with the Visibility Tools Attributes.
You may have an attribute that only applies
when you're in the Layout Editor.
But that means that sometimes you may miss something
that you'll only find out when you deploy to device.
So that tools toggle, remove those tools attributes
when you edit,
and you can toggle back and forth between having them or not.
So it's very easy and a quick way to check that everything works well
without having to deploy to your device.
We also added a bunch of Keyboard Shortcuts.
So it's now in the normal Property panel,
the Settings panel for Android Studio,
so it's easy to create new shortcuts,
and then modify them and set new shortcuts that you do want.
We added support for a new Drawable Picker
straight in the code editor in the gutter.
So you can simply invoke it like that,
and you can navigate through the existing drawables,
save them, and we'll replace the code straightaway.
We improved the support of the Vector Assets.
So, as I mentioned before, it's now really easy to access them.
Now we make sure that we download the latest versions.
So you don't have to go to the website, you know those on the current icons.
So I cannot resist to talk a little bit about
our efforts with accessibility
and improving that for your application.
So in a future release, we are now going to have
a direct integration with the accessibility check library.
By simply clicking on that top right button,
you'll be able to run all those different checks.
So here is a quick example.
We see that different errors appear in the error reporting panel
and those are accessibility errors.
So there's a lot more that we want to do there.
But it's something that we are really keen on,
and I think it's going to make your applications a lot better as well.
The Navigation Editor in 4.1 has a few improvements as well.
We have a new Component Tree
as well as support for some of the latest developments
in the Navigation Library.
So let me show you the Component Tree first.
One thing that you now can do
is actually show the entire tree of components--
it's not a flat list anymore.
So it's very easy to go hierarchically in your file,
and then you navigate in subgraphs.
And if you want to create a deep link now,
not only is it possible,
but also we support additional checks and validation,
so it's a lot easier and faster for you to create those links.
So in 4.1, we also added a lot of new features in the Motion Editor.
Specifically, new visualization
for the reference in your key position.
We also added panels for better using
the Transforms on your views.
Here's a quick example of that panel.
So let me select that view,
and there's a couple of views, one over another.
I can simply go into the panel, and straight see the action
of rotating in the attribute panel,
and you see it replicated in the design view.
So very easy and very interactive.
Another thing we added is a better Transition panel.
So it's a lot easier to change and tweak those parameters.
Specifically, the easing curve is now immediately accessible.
Here is an example of everything together in 4.1.
So you notice here in that file, I have different states
so that I can go and click on the different states.
If I go into a transition, I can play it,
and I can see what it looks like directly.
But now I can also go and select a specific element
and check what the values are, for example, for the rotation.
If I want to tweak it, it's just there.
So I can tweak it and immediately see what's the result of that modification.
And that brings us to Compose
and what type of tooling we are going to support
in Android Studio.
Bear in mind, this is just a preview.
A lot of that is being worked on as I am talking,
but we are really excited about it.
So the first thing that you'll find if you're trying Compose
is we show you a preview of your layout straight next to your code.
A little bit like we do for the Custom View,
you can see the immediate result of what you're typing.
Here's a quick example.
So you can see that I have my different composable functions,
and each one of them can be represented in the preview.
I can also go and navigate by simply clicking on those elements.
One thing that's also pretty nice
is that it's super easy to create new previews.
So here I just copy and paste some preview code,
and I can just customize it as I want.
So another tool we are introducing
for Compose is the Interactive Preview.
So what is that?
You see those little icons on the top right of your Preview.
You can go and activate them,
and when it's there,
you literally can interact with your layouts.
without having to got the emulator,
without having to deploy the application to your device.
And it works.
So we think it's going to be a really convenient tool
that's going to make your life a lot simpler.
Finally, one of the nice things that we added too
is the ability to straightaway publish
that composable on your device.
So by just typing this little green arrow close to your composable,
we essentially are packaging that composable
as a single activity that we push to the emulator or to the device
so that you can see straightaway how it works
or how it behaves on a real device.
So to wrap up, we talked about a lot of tools.
You may know Design Tools as just the Layout Editor,
but it's much more than that.
The Navigation Editor, Resource Manager,
as well as all the new tools we just introduced
in Android Studio 4.0.
The Motion Editor or the Layout Inspector
are game changers.
And, of course, we could not resist to show you what's coming up
with the Compose Tooling.