[MUSIC PLAYING]
MARCEL PINTO BIESCAS: Hi there.
My name is Marcel.
I'm a developer relations engineer
at Google focused on helping build
beautiful and modern widgets for everyone on Android.
Today I would like to share what makes a modern Android app
widget, why it is important, and how you can achieve it
with a few top tips.
Andoid app widgets have been in our platform
since the very beginning.
They live in the user screen, and they are a major player
for a great user experience.
That leads to an increase in user retention and engagement.
The home screen has always been a competitive place to be.
This is even more the case since we
launched Material.io, which has led to user expecting a more
personalized experience aligned with the look
and feel on their devices.
By following the principles I'm about to present,
you can increase your app chances
of being placed in the user home screen,
and also provide the desired user experience.
So when we refer to modern Android app widgets,
here is what we mean.
These widgets are aligned with the device theme.
They adapt to multiple sizes and screens,
and they are easy to discover.
They also enable some user customization,
and of course, they are helpful.
But why after all this time would you
invest again on providing a new widget experience?
Let's take a look at two great examples, Google Keep
and Google Drive.
If these apps hadn't modernized their widgets,
widgets on Android 12 home screen
would have looked a bit different.
They wouldn't have been aligned with the device theme,
thereby ignoring users' investment into their device
personalization.
They wouldn't have adapted to the available space,
leaving visual gaps or unaligned widgets.
They would have had tiny clickable targets, causing
some poor accessibility.
Some users might have kept such widgets,
but most would have removed them, or, even worse,
found other solutions.
Instead, teams working on this and other Google apps
refactor their widgets to let users adapt to the home screen,
creating a more flexible shapes and sizes,
and do even more with their widgets.
For example, Google Keep not only
adapts to the user home screen, but also brings more value
by providing more expressive shapes to maximize the space
and extend the functionality.
This is a much better user experience
compared to the static color widget that isn't
optimized for large screens.
Similar to Google Drive, our team
totally reinvented the existing semi-transparent
and static widget.
First, they leaned into the dynamic color theme.
Then they optimized the amount of glanceable information
based on the available size--
for example, by providing a new search functionality
for larger vertical spaces.
So instead of seeing widgets that are outdated and stale,
now users can enjoy an experience
that is more personalized and dynamic.
And what's more important, the teams
did not only improve widget for regular fonts.
They make sure to provide adaptive sizes for tablets
with larger fonts and additional actions,
making sure to use that extra large space.
So how can you do the same?
Whether you want to update your existing widget
or you would like to build a new one,
we recommend following these principles.
The best place to begin is with our developer resources.
We recommend starting with our refreshed guidance
and our new sample.
And even though it's currently in alpha,
it's worth checking out the new Jetpack Glance library, which
we have built with these exact principles in mind
to help you build better widgets with Compose-style code.
Here are few top tips for each of these principles that
might help you modernize your widgets.
When we refer to a widget that is aligned, we mean this.
It fits into the shared ecosystem that makes up
the home screen by adapting to the wallpaper colors
and the available size defined by the system theme.
It provides also a smooth launch experience
for your application, and here is how you can do that.
First, make sure that the layout that defines the background
uses the android:id/background as ID.
This helps the launcher identify better
the background of your widget, improving the launch
experience.
Then, use the theme from the material-components library
to define the color schemes of your widget.
This enables dynamic colors, but make
sure to set the color resources, and not the resolve color.
Otherwise, the system will be enabled to dynamically resolve
the colors.
And starting in Android 12, the system automatically
applies rounded corners.
To ensure your content adapts properly, use the system
values in your builds.
To enable widgets that are adaptable,
make sure to use the available space by filling its content
and adapting based on user preference.
At the same time, it's important to define your widget limits.
Remember, in the end, we want helpful widgets.
For example, here is the system battery widget
that adapts to the available space,
showing more or less information about the connected device
based on that.
In short, make sure your widget layout fills the space
by setting match_parent and ensuring
the rest of the content adapt.
But be sure to define your limits.
Sometimes a small widget does not make sense.
Now, starting on Android 12, we can provide responsive layout.
You can use the extensions provided in the new AndroidX
core-remoteviews to simplify that.
For example, here the weather widget
provides three types of sizes.
Then the launcher decides which of these fits better
based on the available space.
We need as well to help users discover your widget.
You can do that by providing accurate and rich previews
with proper labels and description that will
be shown on the widget picker.
Also, recommend the widget inside your application.
Help the user pin it into the home screen.
Did you know that you can as well
have Google Assistant reply to a voice query with a widget?
You can check these docs for more.
Adding a name to your widget is easy.
Add the label to your receiver.
And then make sure to provide the description in the widget
metadata.
To make widgets more discoverable,
provide an in-app experience and request the app widget manager
to pin the widget.
For example, after a user saved the new weather place,
we could show a tooltip to recommend them to add
the widget on the home screen--
so having the system to request them.
And you will be able to provide actually
a custom preview to the screen.
Every user is different, with their own individual needs.
In addition to provide different sizes,
it's important to enable customization
when it's possible.
Use the configuration screen mechanism for that,
but also make sure to provide good defaults
for the vast majority of users, so maybe skipping
the configuration at the first time.
Whatever the case, it's a good idea
to let the user reconfigure it as they want.
To enable this, you can set the configuration activity
on the widget metadata, and then set the reconfigurable
and configuration optional flags to enable the rest.
Finally, widgets should be helpful.
Don't overcrowd them.
Make sure you provide essential information
and quick, simple actions based on the available
space, and redirect users to the in-app experience
for a full set of features.
Also-- and this is important-- be respectful
of the system health, since widgets
live in the host process.
Make sure to optimize them and reduce any background
work by using WorkManager with proper parameters
and respecting the update frequency limits.
Thank you so much for watching.
We hope these principles and tips help you adjust or build
new, modern, and beautiful widgets that adapt to your user
needs and are helpful to them, bringing
more engagement and functionality
to your application.
Goodbye.
[MUSIC PLAYING]