CHRIS ARRIOLA: Compose allows you
to build beautiful UIs quickly.
But together with the Android Studio tooling support,
you're able to accelerate the development
process even further with faster iteration and better debugging.
[MUSIC PLAYING]
Previously, we implemented a single answer option
in the Jet Survey app.
Let's see how Android Studio can help us write this efficiently.
Let's go ahead and open the Jet Survey project
in Android Studio and see what features
it has in store for us.
To start writing our composable, simply write C-O-M-P and press
Tab or Return to automatically generate the composable.
Let's call it SurveyAnswer.
Hit Return and start implementing it.
To implement the row inside our survey answer,
we simply type W-R and press Tab or return to generate the row.
Similarly, if you want to wrap a component
around a row or another layout, you
can right-click the component, select Show Context Actions,
Surround With Widget, and then Surround With Row.
These shortcuts are called life templates
that help you generate common code snippets.
Check all of them in your Android Studio preferences
under live templates.
Next, we can implement the content of our row.
We start by adding an image that displays the lens drawable.
We'll use the painter resource API to help load this.
One of the challenges when working with drawables
is that it's hard to know what the drawable looks like.
But as you can see, the image shows
an icon in our editor's gutter.
This makes it easy to quickly preview and switch
to another image.
Let's go ahead and switch the image to display spark.
Next, we implement the row's text.
And let's give it a custom color.
You can see the color showing up in the gutter.
Clicking it gives us a color picker
that we can use to quickly change the color.
Here, you can enter RGB, hex, or easily
pick colors out of the material color palette, which
is quick and handy.
Finally, we implement the Radio button.
Live templates and gutter icons help us write code
while making fewer mistakes.
Now let's see how we can quickly iterate on our UI using
previews.
With our basic composable function,
it's time to see how this composable actually looks.
It would be great to be able to see our composable while we
work on it without having to run the whole app on a device.
This is made easy by creating a preview composable.
Simply type P-R-E-V and press Tab or Return.
This generates a composable function
with the extra @preview annotation.
Let's call it SurveyAnswerPreview
and tell it to render our survey answer composable.
Something to keep in mind is that composable functions
annotated with the app preview annotation cannot accept
arguments, so we must provide all the data needed to preview
a composable.
Let's also wrap this in our app custom theme.
The preview annotation tells Android Studio
that this composable should be shown in the Design
View of this file.
So when we click the split icon at the top
and we press build and refresh, our composable preview
shows up.
Using the cog wheel in the gutter,
we can specify all kinds of properties of this preview.
For example, I can show the preview
with a certain background color using night mode.
You can add the preview annotation to the same function
multiple times, so we could also choose
to add another preview that shows the form
item with an extra large font.
Closing this pop up should then reflect all the changes
that we made into our code.
Oftentimes, you want to see how your composables look
like in differing configurations--
in light or dark mode, in different font sizes,
and so on.
With the multipreview feature in Android Studio
you can define an annotation class
that itself has multiple preview annotations associated with it.
Let's take a look.
To make a multipreview annotation in a file,
define a custom annotation class with a desired preview
configurations.
Here we're adding a small font and large font version.
You can also add another annotation
for displaying both dark and light mode.
Then simply add that custom annotation
to your preview composable.
And the different previews will be shown automatically.
If you want to see how this preview behaves
on an emulator or physical device,
we can use the Run icon in the gutter.
Instead of following the previous configuration
parameters, this will use the configuration of your device.
When you update a composable, you
have to build and refresh the preview or redeploy
to your device.
With live edit of literals, rebuilding
isn't necessary for certain constant literals
like integers, strings, and colors.
For example, if we update the name of our super hero,
we see that change is being updated immediately.
Similarly, we can change the color of the text
without needing to rebuild.
Live edit takes this behavior even further
and lets you adapt the contents of a composable function
without needing to rebuild.
Working on our form item, we can add modifiers, properties,
or even remove or add child composables.
All these changes are automatically
reflected on your device.
Live edit is a new experimental feature.
So right now, it's not available by default.
Read the documentation to learn how you can enable it
for your project.
With previews, multipreview, live edit of literals,
and live edit, iterating on your design is a breeze.
But what if there's something wrong with your composable
and you need to debug it?
Android Studio allows you to dig deeper so you can figure out
what's wrong.
First, let's open up our Layout Inspector.
We have to select the process we're interested in.
So let's select the Jet Survey app running in our emulator.
It shows us the current screen of the app.
On the left is a component tree that contains
all the nodes in our UI hierarchy.
We can expand all of them at once,
and we can see what our composables look like.
This tree can get quite big.
So we can right click on any node in the tree
and show only its parents or its subtree to simplify our view.
On the right, we see the attributes
for each of the composables in our node.
For lambda attributes, we can also
see a link to the specific line in code
where the lambda is defined, which
helps a lot when debugging.
While implementing a design, we can overlay a picture
on top of the layout, which helps
to verify if our design implementation is pixel
perfect.
In our case, we can see that there's still some more work
to be done.
From the previous episode, you know
that using components from the Compose toolkit
will give us that Pixel perfection.
I'll leave that as an exercise for you to do.
And that's it.
That covers a lot of the helpful tooling provided
by Android Studio to help us develop apps
much faster in Compose.
To summarize, with live templates,
we can insert common code snippets much faster
using abbreviations.
Contextual gutter icons allow us to quickly change
things like images and colors.
The @preview annotation allows us
to see our composables without having to deploy
the entire app to a device.
Both the live edit of literals and live edit
allows us to see code updates in real time.
If you've been following everything so far,
congratulations.
I hope these episodes have helped
you get started with Compose.
Coming up next, we have a tip from a community
member on how you can speed up your learning with Compose.
After that, we'll wrap up with a live Q&A
with me and my teammates.
You can tweet us your questions by using
the #madcompose hashtag.
As always, like and subscribe for more.
And I'll see you soon.
[MUSIC PLAYING]