[MUSIC PLAYING]
DIEGO PEREZ: Hi, my name is Diego Perez,
and I'm a software engineer on the Android Studio team.
Today I'm going to talk about what's new in the Compose
Design Tools.
The Compose tooling is currently available in the Canary release
of Android Studio, and you can download it from this link.
We are working on some exciting tooling for Jetpack Compose.
But today I'm going to show you the Compose layout preview.
The preview is already available,
and you can try it out today.
This preview allows you to see multiple individual Composables
side by side.
You can apply different data configurations
and see how they react to these changes.
So I'm going to quickly show you how
to navigate the layout preview.
Then we are going to see a couple of features
that allow you to interact with the components
from within the studio so you can test
how they react to interactions.
And lastly, I'm going to show you
how to use sample data to put some information
within your components and see the design in context.
So here I have a simple Composable
that I went to preview.
So this Composable takes one parameter
with some data that actually uses to populate the UI.
So let's see how we can do that.
The first thing that we need to do
is to create a Composable function.
I'm going to call mine Postcard Preview,
but you can call it whatever you want.
Then I'm going to apply a theme, because this component requires
a theme and then I'm going to set to post1.
Post1 is just a data class that I
created with some sample data, just to basically see it
in the preview.
You may need to do this in some cases.
Like, for example, if your component
requires network access, the preview doesn't allow that.
So you may need to pass the information to that component.
So this is one way to do it.
OK, so I have to find my preview.
Now I just need to tell [INAUDIBLE]
that this is a preview.
So the way to that is just by doing @Preview.
So this will pop up the preview panel on the right.
You may need to build before actually seeing the preview.
In my case, because I have built before, that is why it's there.
But I can build anyway, just to make sure that it's
displaying the right thing.
Yeah, so that looks fine.
If you are familiar with the layout editor,
you probably have seen this layout before.
So again, it's a split panel.
You can resize.
You can click Code on the top-right corner
if you don't want to see the preview at all.
You can click Design if you want to see something
in detail or full screen.
But today I'm going to use the Split
mode, because I want to see the code next to what
it's generating.
If I hover over the preview, you can
see that the boundaries of every component are painted.
So I can click in one of them, and it
will take me within the current file
to where that element was generated.
In this case, I click, and you can see there is the author
and read time.
If I click here, you'll see there is the Bookmark button.
If I double-click, it will take me to where in my project
this element was generated.
So let's see, if I double-click, now
it took me to this icon that is contained within the Bookmark
button.
So you see that this is a very easy way
to navigate your project and see where things in your preview
were generated.
Now let's look into this toolbar next to the preview.
So there are two [? buttons. ?] One of them
is what we call Interactive Preview.
If I click it, it will switch mode,
so you can see it by a different background.
And now there are no lines of the boundaries anymore.
And the reason is now I can interact with my component.
So if I click here, my Bookmark button will be enabled.
So this is running the code in the preview.
So this is a very fast way to get quick feedback of how
my component is behaving.
Once I don't want to do that or if I want to navigate again
in the source code, I can click Stop Preview,
and I'm back to the [? Program ?] [? mode. ?]
The other one allows me to deploy this component
on a device if I have one connected to my computer
or in an emulator.
In my case, I don't have any device
connected to my computer.
So if I click it, it will pop up the emulator,
and it will start this component in there.
So you see that it's starting the activity.
And now it displays.
And again, I can click and preview how it works.
But I'm not going to use them later today,
so I'm going to close it.
OK.
So we have covered the surface.
Now another interesting thing is we can customize the surface
to make the preview work in different ways for us.
So one very simple customization is to parse parameter.
So the Preview annotation has many parameters.
I'm not going to cover all of them.
But I'm going to show you some of them.
So in case, I'm going to call this Post Preview because we
are previewing posts.
A useful parameter is, for example, the width.
I can change the width of the preview.
So I can set it to something very large
and see how my component looks.
Or I can set it to something very narrow
and see how my component reacts.
So I can quickly know that, for that width,
this component isn't going to behave very well.
Let's remove it for now.
Another useful thing is I can have multiple annotations
in one component.
So what I'm going to do here is I'm going to call this large.
And then what I'm going to do is I'm
going to set the width to something more
reasonable but still wider.
So now you see, I see side by side
how my component reacts to these two different widths.
Another very useful parameter is showDecoration.
If I set it to true, then it will display this component
in the context of an activity.
So if this component is using an activity,
this is a very quick way to see it in context
and see how it looks.
This is particularly powerful when combined with the device.
So if you use the device parameter,
I can set it to, for example, NEXUS_10.
Now I can see how it looks in this device.
And you can have multiple annotations, again,
with multiple devices and multiple widths.
So it's very easy to see your component
in one view in multiple configurations.
So let's remove this again for now.
So this is one way of customizing the preview.
There is another way, which is, well, I
could have more previews.
So I could copy this.
And let's remove this.
And let's call this ThemedPreview.
And then what I'm going to do here
is I'm going to pass our theme to the ThemedPreview.
So, for example, it takes a colors argument.
And I can do dark-themed colors.
If I click the Refresh button, once it refreshes,
I will have three previews, two from the top postcard preview,
and then one with the theme.
So you see it there.
So now we have the dark previews and the light previews.
So this is a good opportunity to show another useful parameter,
which is called Group.
So for example, in here, I can do Theme.
And here I can do Devices.
So once I do that, you see that there is a list at the top.
So this is a way that, if in one file
you have multiple previews, you can group them.
And here I have my previews for different devices.
And in here I could have more than one preview
for different themes.
So it's another way of classifying them and keep
them a little bit in order.
So now we have copied the Preview,
we have used the Preview parameter,
but the problem is, if I want to generate multiple of them,
it seems that I'm going to end up
with a lot of copies of the Preview parameter
with just small changes.
So it would be nice if there was another way
of customizing this and seeing it with different properties.
So I'm going to come in this one for now.
And wouldn't it be nice if we could, for example,
pass the theme here, and the theme was, like, a parameter?
So this was the color palette theme.
This would be really nice.
But the problem is, if I look here,
then it says that I cannot do that.
Because a preview doesn't take any parameters that
are non-default or that are not [INAUDIBLE]
with that preview parameter.
So let's use this @PreviewParameter annotation.
So what this allows is to specify
a provider that basically will populate this parameter.
So I'm going to have a theme provider, for example.
And I'm going to create it here.
What is a theme provider?
Very simple.
It's just any class that inherits from Preview Parameter
Provider.
And I need to do color palette as a type.
And that's it.
I just need to implement that method, in this case, values.
So values is just a sequence.
And what it does is the preview will
be rendered with the sequence of parameters
that [? I pass ?] here.
So I only have two themes in my application right now.
So what I'm going to do is light-themed colors
and dark-themed colors.
OK, let me press Refresh.
And once it finishes, in one preview,
it will display it in both contexts.
And you can pass anything that you want in this parameter.
So you can customize it.
So for example, I'm going to do another example with this one
that I had before.
So let me [? uncommand ?] this.
And what I'm going to do is the same thing, but I'm going to,
instead of passing a theme, I'm going to pass a post.
And what I'm going to have is @PreviewParameter.
And then the provider is going to be called PostProvider.
OK.
So because this is a very common use case,
we have a small utility class.
So if you have a PostProvider, that
is called CollectionPreviewParameter.
And then it's very similar to what you've done before.
But you can use any collection.
So in here what I'm going to do is Post, and then listOf.
And then I'm going to say post1, post2, post3.
So I have three posts and two different preview notations.
So if I refresh, this is going to generate
six different previews.
We're going to see that, if we click Devices,
we are going to have six.
So we have the three different posts--
oh, see this?
I need to pass the post.
If not, you see that, on the right side,
everything is populated with the same information.
So if I click Refresh now, now much better.
So with the narrower width, I have the three posts.
And then, with the large width, I have the other three posts.
So again, very easy.
And now I have my preview populated
with a lot of information that I can see in one go.
So as I said, for now, you can only
pass one preview parameter.
But that shouldn't be a very big limitation.
So let's see how we can work around that.
So I did it very quickly.
So let's do this one.
Let's change it.
And what we are going to do is, what if we could do something
like themeAndPost?
And then, instead of this, we receive
a Pair of the theme, and then the post.
This would be really nice.
And then you could extend this to basically do anything
that you want.
And then in here, first, second.
So this would be really nice.
So let's create a theme and post provider.
So I'm going to cheat a little bit here
because I have written a little bit of code before.
But you'll see that it's very simple.
So I created this PreviewParameterCombiner.
And you can imagine it takes two things, so two types.
And what it does is what it says.
It just combines these two.
So what I'm going to do is, as the first parameter,
I'm going to pass my theme provided I created before.
And then it takes a pair provider, the second.
And that's it.
There is nothing else to do.
And then what I'm going to do is to rebuild.
And you see we have generated all the combinations
of the different posts with the different themes.
So it's very simple.
And I'm going to show you the code to do this.
It's not complicated.
So this is just a regular PreviewParameterProvider
where we have the values.
And what this does is it generates the combinations
of [? virtual ?] providers.
So you can see how these a very simple but extensible API.
So you can very quickly customize it in any way
that you want.
So that's everything that I wanted to show you today.
I hope that you like the preview.
And we are always iterating in it,
so please keep an eye on it.
And please send us your feedback.
Thank you very much.
[MUSIC PLAYING]