[MUSIC PLAYING]
RODY DAVIS: Hi, I'm Rody Davis, a developer
advocate for Material Design.
IVY KNIGHT: And I'm Ivy Knight, a designer
advocate for Material Design.
RODY DAVIS: Our team focuses on helping the community build
beautifully with Material Design by providing resources,
tooling, and examples.
IVY KNIGHT: Material design is a design system
created by Google, backed by open source code
to help teams build high quality digital experiences for Android
Flutter and the web.
It includes an extensive library of components
that can be customized to meet your style and brand needs.
Building off Material Design's primary and secondary colors,
Material Design 3 introduces tertiary and additional color
slots to check for accessibility and ensure harmony.
This year at I/O, we showed the bold and expressive evolution
of Material Design.
We're excited to be here to show more of Material You
with dynamic color to show what it is
and how to implement it in your own app.
Material You reimagines color as a more individualized
experience.
So what is dynamic color?
The Android S color values can be selected algorithmically
through dynamic color extraction.
With dynamic color, custom palettes
are generated based on an individual's wallpaper choice.
Dynamic light and dark schemes can
manifest throughout an individual system UI
and in certain apps.
Schemes will be changed or adjusted
based on preferences and vision needs.
Dynamic color is an algorithmic system
that supports individualized color experiences, while also
honoring color that connote brand
identity or conventional meaning, such as green for Go
or red for Stop.
How does this work?
Well, starting with the user's wallpaper,
a source color is extracted and extrapolated
into five key colors.
Each key color is then interpreted into a tonal
palette of 13 tones.
And a selection of colors from the tonal palettes
are then slotted to a group of specific roles and values
that map to components called a scheme.
Color schemes can be considered a cohesive group
of relative tones rather than a fixed group of constant values.
Light and dark scheme is generated for each.
Schemes will be changed or adjusted
based on preferences and vision needs.
Air color is also slotted automatically.
Each color role required in UIs is
derived from the key colors using this process,
using proper contrast between elements.
These roles are what you will map to in your designs.
You may be familiar with the current 12 color spots,
like primary and on primary.
With Material Design 3, or M3, we
introduce a new tonal palette in roles and schemes.
Container and its respective on container,
used for UI elements that do not need
as much emphasis as their non container counterparts,
and a new tonal palette, tertiary,
used to bring broader color expression in your product.
RODY DAVIS: How do we make this all possible?
Well, it's through tokens.
This allows you to change your role assignment
that cascade consistently.
Building with values that change at runtime
means we need a reference colors by semantic meaning instead
of hard coded values.
Building off of the Material Design 2 color roles,
tokens provide global styling slots.
A token can be multiple types, paired with the value
or referencing another token.
With Material 3, we now have the concept of pallet, reference,
and system tokens.
The color roles you build with are system tokens,
and they can inherit from reference tokens, which we're
introducing with the tonal pallets, which include primary,
secondary, tertiary, neutral, neutral variant, and error.
Design tokens enable flexibility and consistency
across a product by allowing designers
to assign an element's color role in a UI,
rather than a set value that are handed off to implement.
Design tokens can be generated, saving the developer
and designer time by agreeing on a single source of truth.
A developer can then reference this file to map to the theming
object in Compose, for example.
If these tokens are changed in code,
this can now be shared back with the designer
to have the values updated in their designs.
Swapping colors and typography hard coded values with tokens
should make it a lot easier for you to iterate on your designs.
Colors in a tonal palette are mapped
to light or a dark scheme through design tokens.
The color scheme values can be overridden
to inherit from custom colors or other reference tokens.
User-generated color utilizes these color mappings
with tokens to create dynamic and expressive UIs.
When the system colors change at runtime,
they update the tonal palettes, which
then update the color schemes, which
is what you use to map to your theme and components.
It is important to use the right color rules for the color
spawning component to ensure accessibility and continuity.
But how can these tokens on their own ensure accessibility?
IVY KNIGHT: Since color schemes are defined by tonality, rather
than hue or a hex value, the system of tonal palettes
is essential to making any color scheme accessible by default.
So color combinations between elements based on luminance
will meet accessibility standards
as a result. For example, these colors may have a different hue
to them, but the tone is very similar,
making contrast inaccessible, especially for those
with certain color blindness.
And here's the same concept applied to components.
The colors are guaranteed to be accessible,
because of all the pairings have a 60 luminant spread.
Dynamic color lets personal devices
feel personal by incorporating personal preferences
in the UI of your product.
Users will have more control than ever over their devices.
With the dynamic color and M3 color schemes,
your app's colors automatically adapt and integrate
with your user's colors by letting
their wallpaper influence the app's color scheme.
We understand this is a new way of thinking of colors
for your app, but our digital products we create
can now reflect trends in our real life products
that adopt to more personal colors, patterns,
and materials.
Sometimes, we just need some colors.
If you don't feel comfortable coming up with your own color
palette or lack the resources, dynamic color
provides a way to have ready-made, accessible color
palettes that your user will love.
We understand that your brand color schemes
may need to be the focal point.
But with the lightest color system,
it will still be accessible and fit into the overall color
story, so this is all possible with your own brand and design
system colors, creating harmonious, accessible color
palettes.
M3 supports systematic applications
of custom parameters that help define and maintain your brand.
This custom color scheme can be used
as a fallback for Android apps that
have dynamic color turned off.
Either way, to migrate and take advantage of Material 3
within your Android app, you will
need to first migrate to baseline or M3 custom scheme
to access the new tokens.
Or we always encourage you to utilize material design,
and expand as needed.
The color system can be integrated with custom
components and brand styles.
The color system is designed to automatically handle
critical adjustments that provide accessible color
contrast, legibility, interaction states,
and component structure.
RODY DAVIS: The first step in migrating to Material 3
is referencing the new tokens and connecting them
to your components in your app.
The topography, shape, and color files
should feel very similar to Material 2.
Make sure to grab the latest baseline or custom
branded scheme and set the values.
There are a few new tokens to look out
for, such as primary, secondary, and tertiary container,
as well as on variants.
This could be quite laborious, so we created a tool
to generate these for you, called the Material
Theme Builder.
You can open it up on the web and click on Custom
and then export for Compose.
If you have any custom colors, they
can be added as extended colors.
We could start by opening the tool
and navigating to the Custom tab.
In the Material Theme Builder, you can identify and input
one or more brand colors that will
be used to define your palette.
Adding specific colors determines
how each tonal palette is generated.
Here, you can input the key colors for your brand.
Each color should be assigned the appropriate corresponding
key color role depending on its purpose in the UI.
If you have an existing app, you can use the Material 2 colors
for primary and secondary.
You can export the code on the top right
and select Compose in the dropdown.
You can then take these files and drop them directly
into Android studio and update your package imports,
if needed.
This will update the colors, typography, and theme files.
With the code updated, you can now
run your app to see your new branded theme reflected
in the components.
To explore dynamic color, you can use the web tool
to preview various schemes generated from a source
color or an image.
Next, we'll talk about how to update your app
to use the colors generated from a user's selected image.
Open up the theme Kotlin file and add a check
to see if you're using dynamic colors.
You can then return the light in dark colors
for a scheme created by the tonal palettes from the system.
With the code added, you can now run your app on a device
and change the wallpaper.
It will now show the user-generated colors
for your theme.
You can add a toggle for the user
to choose between dynamic or custom themes.
Both of these will have light and dark schemes
that the user can choose from.
Dynamic color can be applied selectively
to work alongside a branded color scheme.
For example, a profile or account screen
can reflect an individual user's color,
making important moments feel individualized.
If you have semantic colors, they don't have to be left out
and will be included in as additional colors
ready to be implemented.
This means you can use the dynamic color for your app's
main theme and include extended colors for semantics or even
brand colors, or maybe have an extensive library of colors.
The extended colors will still go
through the same tonal process.
IVY KNIGHT: With both dynamic and branded themes,
Material You allows you to build beautiful expressive apps
with color that reflects the user's choice and tokens
that help developer and designer collaboration.
We're excited to see what you build.
For more on dynamic color, you can
find the Material Theme Builder on the web,
or install the Figma plugin, which
works with the updated M3 design kit,
available through the Figma community
to visualize dynamic color and create custom color schemes.
And of course, check out material.io
for the material three guidance and links
to all the resources mentioned.
You can find us at @RodyDavis and @margeeta on Twitter.
Thanks, you all.
RODY DAVIS: Thanks, you all.
[MUSIC PLAYING]