[MUSIC PLAYING]
REBECCA GUTTERIDGE: Hello, hello.
My name is Rebecca, and I lead the system UI
team and Android Developer Relations Engineering.
So users expect their apps to just work.
But if you think a premium experience is still
a nice to have, then I'm here to say that these days,
it's what users expect.
They want their apps to be modern and elegant, personal,
and accessible.
So let's talk about how the Android platform can take you
there with three recent features that can help your app straight
out of the box.
First, edge to edge--
achieve a premium layout and immersive experience and scale
to foldables and tablets.
Second, predictive back-- gesture navigation
is gaining traction year on year.
So in Android 13, we've released some major improvements
to the back gesture.
Its predictive, informative, and delightful.
Third, dynamic color-- designing and accessible color system
is essential for any modern app, but you don't
need to start from scratch.
We've got you covered.
So let's get into it.
Building a premium layout with edge to edge.
So making the navigation bar transparent
has been a key piece of feedback from our Android users.
In fact, this was the case in Android 13 and in 12 and 11.
So from Android 11, the recommendation
has been to draw behind the status and navigation bar.
And we call this going edge to edge.
To avoid overlaps with the system UI,
you can use the system bar and system gesture insets
provided by the platform WindowInsets,
or using WindowInsetsCompat from Android X. Window insets
have been around for a while with a revamp of the API
in Android 10 and 11.
So here's an example of how Google Slides has applied
edge to edge, giving that full immersive experience
that users love.
Note how on scrolling, the contents draws under both bars,
and how that floating action button
stays fixed as you scroll.
For Gmail, the design means that they
don't draw under the bottom navigation bar,
but they can still ensure that the nav bar color matches,
so no more black bars.
Great.
So how can you implement this?
There are two phases to make this change, first,
in your theme.
Set the status and navigation bars to be transparent.
And yes, you do need to do this for both Compose
and Fuse based apps.
Second, in your activity, call setDecorFitSystemWindows
to false on window compat.
Before Android 13, apps needed to use the system UI visibility
API and to set a whole bunch of flags
to be requested to be laid out fullscreen.
These APIs were deprecated and replaced with this one call.
This single argument in setDecorFitSystemWindow
controls whether or not your layout
will fit inside the system windows if true,
or draw behind them if false.
And to keep the FAB pinned as you scroll,
using Jetpack Compose with the updated scaffold in Material 3,
the insets padding is automatically
handled for the FAB, so no direct inserts code
is required unless you want to customize it further using
the modifier.
This is really nice.
As for views based content, you would
need to call windowinsets.getinsets
for the system and navigation bars, and handle that padding
yourself.
And so with these changes, your apps
can reap the rewards not only on mobile, but for foldables
and tablets too.
Second, create a delightful navigation
with predictive back.
Gesture navigation is a fast, natural, and ergonomic
interaction model.
And while the back gesture is the single most popular,
we see that some result in people
leaving the apps by mistake.
And we call this falsing.
Users tell us that as they navigate the app,
they like to have visual clues to indicate where
that gesture is going to take them,
especially if that is outside of the app.
So it's quite possible that falsing has been
affecting your end metrics.
So in Android 13, we released predictive back
to help apps feel more elegant and informative,
and to lend a cohesive feel across all apps.
See here on the right, as that user swipes back,
they see that sneak peek of the home
screen to let them know that they're about to leave.
And to support this predictive animation,
System Back has moved to an ahead of time model.
So starting on Android 13, apps need
to tell the system in advance if they'll be leaving, if they'll
be handling back events.
So before the back gesture starts,
the system knows whether an application is handling System
Back, or if it should take control and display
feedforward hints.
So in this back to home example, the system knows ahead of time
whether the next back gesture will
be popping the in-app back stack,
or if it will be returning to the launcher,
allowing the system to preview the app dismiss
and revealing the launcher behind.
The cornerstone for predictive back
is a new platform API called OnBackInvokedCallback.
And this interface has one main method, on back invoked.
And so this will be called instead of the legacy
on backed press methods.
To register one of these callbacks,
you need to call OnBackInvokedDispatcher
from an activity or a dialogue.
And once you have an instance of the dispatcher,
you can register a callback.
And we've already updated the AndroidX library
with the OnBackPressedCallback starting in 1.6.
And under the hood, it is still calling those same platform
APIs.
It's all taken care of.
So for Android 13, you can opt in
by setting enableOnBackInvokedCallback
to true in your manifest.
And if you don't have any custom back navigation in your app,
then that's all you need to do.
If you do, then before you target Android 13,
you can test if your app works by setting the same flag.
And then once that flag is set, KEYCODE_BACK,
and onBackPressed() will no longer be called.
So let's take a look at an example.
So once you upgrade to AndroidX 1.6 using Jetpack Compose,
you can see here in this simple button example
that the navigation component and the usages of back handler
become instantly compatible with Android 13,
while still being backward compatible
with previous versions.
Use the recommended AndroidX activity library and its onback
press dispatch API to register on unregistered callbacks.
This is all thanks to the ahead of time model
that AndroidX library had in its own back press dispatch API.
Now, let's test.
Go to Settings, System, Developer Options,
Enable predictive back animations.
Then launch your app to test the back gesture.
And coming in Android 14, users will get a similar experience
when they swipe within the app, letting
users know where back is going to take them by leveraging
default or custom animations.
And third, create an accessible color system
with dynamic color.
So how does your app express your brand?
How does it look in different light settings?
And does it allow for the user's preference all
at the same time?
Users like their apps to be accessible and expressive.
Developers want their color system
to be scalable, because handling many color systems
is getting harder and harder to manage.
That's why in Android 12, we released dynamic color,
the modern color system.
Dynamic color and Material You allow for personalization
across the entirety of a user's device,
and allows for apps to align with their user.
So here's how it works.
Custom pallets are generated from an individual's wallpaper.
And in Android 13, we released color variants allowing
for even more palettes.
So let's take a look at some of the underlying
principles of dynamic color.
Making it accessible, that's the only way
to design for everyone, ensuring that the products that you make
are inclusive to the widest possible audience.
So in this example, two different hues are seen here,
orange and green.
But when they're gray-scaled, we find
that there's very little contrast between them.
So you can improve this contrast ratio
when gray-scaled by updating the chroma and the tone,
but still honoring the hues.
And this is a core principle in the creation
of every dynamic color palette for any given wallpaper.
Making it scalable, design tokens
enable flexibility and consistency across a product
by allowing engineers to assign an element's color role in a UI
rather than a set value.
And this creates a unified color system
and increases the ease of collaboration
between designers and engineers as they
align on the same color tokens.
So let's take a look at some code.
So using Compose, create your default light and dark color
scheme, and leverage those dynamic color tokens.
As you can see, there are many, and many more
than I've listed here.
So when creating your theme, you can also
add custom color tokens you need, like brand colors,
or maybe you have protected colors
with semantic importance.
So for example, in a caller app, you
may always want that hang up button to stay red,
but you don't mind so much if the chroma or the tone shifts.
And then create your app theme.
Note that the dynamic color logic here
is gated for Android 12.
And so what's the result?
Meet your users where they are with dynamic color
available across many of our device partners.
And the app isn't the only opportunity
to connect with your users.
The home screen is too.
Leverage app widgets and your adaptive icon.
And you can check out Marcel's talk later on app widgets.
But finally, let's take a look at that
one line code change you'll need four themed app
icons and Android 13.
So two steps, one, employ your SVG icon
as a vector drawable, and two, add the monochrome tag pointing
to that new vector drawable.
And that's it.
So for more information, check out that Google link here.
So to summarize, designing premium apps
can sometimes sound daunting and arbitrary,
but with edge to edge, predictive back,
and dynamic color, you have these features
that can help you right out of the box
to make your apps modern, and elegant,
and to keep your users happy.
Thank you.
[MUSIC PLAYING]