Hi, everyone, my name is Nicolas.
I’m a software engineer on the Android Studio team.
I’m going to talk today about what we’ve been working on this past year.
I’ll first cover the latest updates on the design tools,
and then I will give an overview of the improvements
and new features of the ConstraintLayout library.
Diego will then cover all those new visual tools
we’ve been developing for Jetpack Compose.
One specific feature I want to highlight is in the Layout Editor.
We've been integrating a live check for accessibility warnings.
What that means is that as you go and you create a new screen,
you will see all the accessibility warnings live.
And we’ve been doing that by integrating the ATF library
straight in the Layout Editor.
Go check, there is an accessibility in Android Studio and Jetpack Compose doc,
and they will give you a lot more information on it
but you can test those features right now in Studio.
In the Layout Validation tool, we also improve performances,
but more interestingly, we added support for things like locales,
so if you have different languages defined in your application,
you can check how the screen you’re editing will look like with those languages.
We added new presets for wear devices, for tablets, and etc.
So check it out, it’s a really powerful and very useful tool.
In the Layout Inspector, we improved the stability,
better performances, specifically on older releases,
as well as adding a brand new support for Jetpack Compose.
And this is particularly convenient when you’re using some component in Jetpack
while the rest of your application is still using the algorithmic system.
The Layout Inspector will show everything in the same place.
And that allows you to see the different parameters passed,
really introspect what's going on in your applications.
It’s a hugely important and useful tool.
The last feature I want to highlight is the support for Animated Vector Drawable.
Now, you can just go open an Animated Vector Drawable and see it live in Studio.
It's much more convenient.
Let me talk now about ConstraintLayout and MotionLayout.
First, we released ConstraintLayout 2.0.
That brought many performance improvements, new ways of setting up complex screens
with VirtualLayouts and Flow.
But more importantly, it's the introduction of MotionLayout.
MotionLayout is a powerful subclass of ConstraintLayout
that allow you to coordinate easily animations of multiple views
and all of this by doing seekable and reversible animations that are easy to drive
from gestures or even programmatically.
You should go check the YouTube videos we’ve been releasing.
One is called Motion Tags.
It’s a full series on all the powerful features that MotionLayout provides.
And we have one called MAD Skills with MotionLayout
that is more specifically about examples on how you can use it.
Of course, one of the big features of MotionLayout
is the Companion Motion Editor in Android Studio.
And that’s a very powerful editor that allows you to graphically create animated screens.
In the latest release of Studio, we've been also improving it
and added support specifically, for the latest release of ConstraintLayout.
which is called ConstraintLayout 2.1.
And in ConstraintLayout 2.1, we added new features for specific and new screens
like more ways to specify baseline constraints
or negative margin and things like that.
But one of the key hallmarks is a longer list of new helpers objects
to help you create your screens.
Let me cover some of them.
Carousel is one I really like; it essentially makes it really easy to build
this kind of very complex-looking and very powerful,
very beautiful animated effects with the list.
You used to need a huge amount of time to build these kinds of things,
but now you can specify all this directly in Android Studio with little programming.
We added support for rotation.
Both in how the elements can move while animating but also with gestures.
So if you have rotation gesture, we also can support it into 2.1.
Motion Effect is a great new helper.
If you try to build an animation like the ones that you see on screen,
it looks not as nice as what it should be, and why is that?
It’s because we have a lot of views here that are overlapping.
You know, the different paths are just crossing each other
and it results into an effect that is not ideal.
Motion Effect is going to detect the overall direction
of movements and let you apply the specific effects.
So the default one is a simple fade in, fade out,
which on its own already makes the animation a lot sleeker.
But you can actually specify view transition, which is another new feature in 2.1,
to essentially reuse little bits of animation.
And in that case you can use that in conjunction with motion effects.
We also added a brand new Motion Label.
If you try to animate text, it's not easy.
Motion Label makes that simple, and also support many ways
of painting the texts in interesting manners.
Here's an example of how you can use it.
I’m driving that screen with a touch gesture,
and you can see I applied a special effect replicating the text,
and you can see all the typical tools of MotionLayout can apply.
Finally, in 2.1, we added support for foldable devices
and we do that by using a new ReactiveGuide helper,
as well as with the ability of injecting values at runtime in ConstraintLayout.
And by combining those two approaches, you can get the value of the fold
from the Window Manager library, inject it in ConstraintLayout,
and the ReactiveGuide object will position itself automatically.
And even better, if the ReactiveGuide is inside the MotionLayout,
you can just tell it to automatically animate itself.
So it makes it really easy to build fold or wear layouts with ConstraintLayout.
Do check, there is a specific doc about foldable devices
that, you know, will go in much more depth than what I have here.
Finally, we’ve introduced a new library called ConstraintLayout-Compose 1.0.
And that essentially brings all the power of ConstraintLayout to Compose.
It’s the same ConstraintLayout engine.
You can do all the types of positioning that you’re used to:
relative positioning, chains, helpers, and etc.
And we have added support for it in order to do us well,
so in the Android preview you can see the constraints directly.
So that makes it really easy to build up even a complex screen like that.
You can specify those constraints either by using the typical approach
in Compose with modifiers, and in that case, the constraints are represented as modifiers.
Or you could decide to extract the constraints
into their own specific object or constraint set.
And that’s very convenient if you want to swap a complex set of rules in one go.
We also let you specify those constraints in JSON,
and that obviously opens the door to very interesting applications.
And the last feature of this new library is MotionLayout Light.
It's not quite yet the full MotionLayout but we are getting there.
But it does allow you to interpolate
between multiple constraints set and drive that by gestures.
And what’s even better, you can do all this within the context of Android Studio.
And with this, I’m going to hand it over to Diego,
who is going to cover all the new specific tools
we’ve been developing for Jetpack Compose.
Thanks, Nicolas.
The first tool that I want to mention today is the Compose Preview in the Studio.
This is an easy way for you to preview the components that you are working on.
Usually you can have a screen or a component that looks like this.
If you want to see how it looks in Studio, you can simply add the annotation preview.
After compiling your project, it’ll allow you to see the elements render next to it.
Something like this.
The preview annotation is not limited to rendering full screens,
but a lot of its power is that it can be as granular as you need it to be.
So when you are developing,
you can use it to basically preview a single component with different states.
The Compose preview is the entry point to many other tools that provide useful feedback
and information about your components.
The annotation allows you to configure a number of things
like the background color, the size of the preview,
and things like if it’s in a day or night mode.
It has a very large number of different options
that you can check in developer.android.com.
Also, if you click the gear icon next to it, it will pop up this dialogue.
The dialogue has a list of all the options with the default values that you can tweak.
We are also working on bringing some of the best features from the Layout Editor
so they can be used also with Compose.
For example, in this case, you can see the color play mode preview.
This allows you to detect if the color themes are accessible for color blind people.
One of the features that is specific to Compose is Live Literals.
We are currently limited by the build time,
so we are working on features that allow you to make the development cycle faster.
With Live Literals, you can change some of the literals in your code
and they will automatically be reflected both in the preview
and in the emulator, if you have it open.
Along with Live Literals,
the next thing that can make your preview exponentially more useful
is the use of sample data, and I want to give you one example.
In the example before, this is a pretty common way of having a preview
and render a single post.
The data for the post comes from a data class like this.
It just has some information hard-coded.
So now, if I want to preview different data
in the same layout with maybe different colors or different images,
you can do multiple things.
One of them will be simply copying the preview code
and then having a second one with the changes.
But this is not ideal, especially if you want to preview a large number of states.
Ideally you will just receive a parameter
that actually has the info that you want to render,
and then the preview will automatically render that.
And you can do that.
You can use the sample data API
to inject any value, strings, numbers or data classes into the preview.
You just need to undertake the parameter with the preview parameter annotation.
In this case, for example, we have used this collection of posts.
So we are injecting this information into our preview, and this is how it looks.
You get the same layout, the same component
with multiple information and multiple sources.
You can, of course, create your own sources and your own providers.
You just need to implement this interface.
Another useful feature of the preview is the interactive mode.
This is not meant to replace the emulator in your regular workflow
but allows you to iterate quicker on certain aspects of your screens or components.
You can enable it by clicking the button on the top right corner of the preview.
So if you click it, it will basically allow you to interact with the component.
In this case, for example, I’m tweaking the animation of this pattern.
And what I’m using the interactive mode for is basically seeing how it reacts
to the click and tweaking the values until I get it perfect.
If your interaction requires the emulator you can use the deploy to device feature.
So if you click the icon next to the preview, you can run it on device
and get a similar experience on the emulator.
So you can still play with the button in the emulator.
The last thing that I want to talk about is the animation preview.
Compose has very powerful animation APIs.
Like in this example, this is how you define a super simple sketch transition.
If I want to try it, I can use the interactive mode.
So if I start it, then I can interact with the button and see how it scales.
But we are also working in tools that help you with the specifics of animation.
When you are in a interactive mode, you can click the start animation inspection button,
Once you click it, it will pop up this panel.
If you have used the Motion Editor, this panel should be very familiar.
It allows you to go back and forth in your animation
and see how the animation reacts.
You can also see the values that each different parameter takes.
You can also tweak the speed
so you can see your animation in slow motion or see it faster.
Or you can just change the states to see different parts of your animation.
With this, I can tweak my animation until it behaves the way that I want.
And that’s everything that I had for today.
We are hard at work,
developing tools that will allow you to develop your Compose applications faster.
Please, don't forget to send your feedback.
Thank you, back to Nicholas.
And this concludes our talk.
Just to recap, we talked about new features in the existing tools, better accessibility,
integration, new capabilities in Layout Validation, in Layout Inspector,
as well as all those new features in ConstraintLayout 2.0 and 2.1.
And of course, we’ve covered all those new tools for Jetpack Compose.
And this is just the beginning.
Thank you very much.