Material You is enabling a new level of individuality across interfaces. But how does dynamic color interact with the distinct brand expression in your app? We dive into the NEW tooling for visualizing dynamic color and seeing those changes reflected throughout your app’s UI.
Resources: Material Theme Builder → https://goo.gle/material-theme-builder-web Material Theme builder available for Figma : https://goo.gle/material-theme-builder-figma M3 Design Kit : https://goo.gle/m3-design-kit
Speakers: Ivy Knight, Rody Davis
Watch more: Watch all the Android Dev Summit sessions → https://goo.gle/ads21-allsessions Watch all the Jetpack Compose, now with Material You sessions → https://goo.gle/ads21-materialcompose
Subscribe to Android Developers → https://goo.gle/AndroidDevs
#AndroidDevSummit #MaterialYou #Featured #Latest
product: Material Design - Material You; event: Android Dev Summit 2021; fullname: Ivy Knight, Rody Davis; re_ty: Publish;
0:00 · [MUSIC PLAYING] RODY DAVIS: Hi, I’m Rody Davis, a developer advocate for Material Design.
0:11 · IVY KNIGHT: And I’m Ivy Knight, a designer advocate for Material Design.
0:14 · RODY DAVIS: Our team focuses on helping the community build beautifully with Material Design by providing resources, tooling, and examples.
0:21 · 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.
0:30 · It includes an extensive library of components that can be customized to meet your style and brand needs.
0:36 · 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.
0:46 · This year at I/O, we showed the bold and expressive evolution of Material Design.
0:50 · 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.
0:58 · Material You reimagines color as a more individualized experience.
1:01 · So what is dynamic color?
1:03 · The Android S color values can be selected algorithmically through dynamic color extraction.
1:09 · With dynamic color, custom palettes are generated based on an individual’s wallpaper choice.
1:14 · Dynamic light and dark schemes can manifest throughout an individual system UI and in certain apps.
1:20 · Schemes will be changed or adjusted based on preferences and vision needs.
1:25 · 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.
1:38 · How does this work?
1:39 · Well, starting with the user’s wallpaper, a source color is extracted and extrapolated into five key colors.
1:45 · Each key color is then interpreted into a tonal palette of 13 tones.
1:50 · 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.
2:00 · Color schemes can be considered a cohesive group of relative tones rather than a fixed group of constant values.
2:06 · Light and dark scheme is generated for each.
2:09 · Schemes will be changed or adjusted based on preferences and vision needs.
2:13 · Air color is also slotted automatically.
2:16 · Each color role required in UIs is derived from the key colors using this process, using proper contrast between elements.
2:24 · These roles are what you will map to in your designs.
2:28 · You may be familiar with the current 12 color spots, like primary and on primary.
2:33 · With Material Design 3, or M3, we introduce a new tonal palette in roles and schemes.
2:40 · 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.
2:53 · RODY DAVIS: How do we make this all possible?
2:55 · Well, it’s through tokens.
2:57 · This allows you to change your role assignment that cascade consistently.
3:01 · Building with values that change at runtime means we need a reference colors by semantic meaning instead of hard coded values.
3:08 · Building off of the Material Design 2 color roles, tokens provide global styling slots.
3:13 · A token can be multiple types, paired with the value or referencing another token.
3:18 · With Material 3, we now have the concept of pallet, reference, and system tokens.
3:23 · 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.
3:38 · 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.
3:49 · Design tokens can be generated, saving the developer and designer time by agreeing on a single source of truth.
3:57 · A developer can then reference this file to map to the theming object in Compose, for example.
4:02 · If these tokens are changed in code, this can now be shared back with the designer to have the values updated in their designs.
4:08 · Swapping colors and typography hard coded values with tokens should make it a lot easier for you to iterate on your designs.
4:15 · Colors in a tonal palette are mapped to light or a dark scheme through design tokens.
4:20 · The color scheme values can be overridden to inherit from custom colors or other reference tokens.
4:25 · User-generated color utilizes these color mappings with tokens to create dynamic and expressive UIs.
4:32 · 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.
4:40 · It is important to use the right color rules for the color spawning component to ensure accessibility and continuity.
4:47 · But how can these tokens on their own ensure accessibility?
4:50 · 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.
5:00 · 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.
5:16 · And here’s the same concept applied to components.
5:19 · The colors are guaranteed to be accessible, because of all the pairings have a 60 luminant spread.
5:25 · Dynamic color lets personal devices feel personal by incorporating personal preferences in the UI of your product.
5:32 · Users will have more control than ever over their devices.
5:35 · 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.
5:45 · 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.
5:58 · Sometimes, we just need some colors.
6:00 · 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.
6:09 · We understand that your brand color schemes may need to be the focal point.
6:14 · 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.
6:25 · M3 supports systematic applications of custom parameters that help define and maintain your brand.
6:32 · This custom color scheme can be used as a fallback for Android apps that have dynamic color turned off.
6:37 · 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.
6:47 · Or we always encourage you to utilize material design, and expand as needed.
6:52 · The color system can be integrated with custom components and brand styles.
6:57 · The color system is designed to automatically handle critical adjustments that provide accessible color contrast, legibility, interaction states, and component structure.
7:07 · RODY DAVIS: The first step in migrating to Material 3 is referencing the new tokens and connecting them to your components in your app.
7:14 · The topography, shape, and color files should feel very similar to Material 2.
7:19 · Make sure to grab the latest baseline or custom branded scheme and set the values.
7:24 · There are a few new tokens to look out for, such as primary, secondary, and tertiary container, as well as on variants.
7:31 · This could be quite laborious, so we created a tool to generate these for you, called the Material Theme Builder.
7:36 · You can open it up on the web and click on Custom and then export for Compose.
7:40 · If you have any custom colors, they can be added as extended colors.
7:45 · We could start by opening the tool and navigating to the Custom tab.
7:48 · In the Material Theme Builder, you can identify and input one or more brand colors that will be used to define your palette.
7:55 · Adding specific colors determines how each tonal palette is generated.
7:59 · Here, you can input the key colors for your brand.
8:01 · Each color should be assigned the appropriate corresponding key color role depending on its purpose in the UI.
8:07 · If you have an existing app, you can use the Material 2 colors for primary and secondary.
8:12 · You can export the code on the top right and select Compose in the dropdown.
8:16 · You can then take these files and drop them directly into Android studio and update your package imports, if needed.
8:23 · This will update the colors, typography, and theme files.
8:27 · With the code updated, you can now run your app to see your new branded theme reflected in the components.
8:33 · To explore dynamic color, you can use the web tool to preview various schemes generated from a source color or an image.
8:40 · Next, we’ll talk about how to update your app to use the colors generated from a user’s selected image.
8:46 · Open up the theme Kotlin file and add a check to see if you’re using dynamic colors.
8:51 · You can then return the light in dark colors for a scheme created by the tonal palettes from the system.
8:56 · With the code added, you can now run your app on a device and change the wallpaper.
9:00 · It will now show the user-generated colors for your theme.
9:04 · You can add a toggle for the user to choose between dynamic or custom themes.
9:08 · Both of these will have light and dark schemes that the user can choose from.
9:12 · Dynamic color can be applied selectively to work alongside a branded color scheme.
9:16 · For example, a profile or account screen can reflect an individual user’s color, making important moments feel individualized.
9:24 · 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.
9:32 · 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.
9:41 · The extended colors will still go through the same tonal process.
9:44 · 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.
9:54 · We’re excited to see what you build.
9:56 · 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.
10:09 · And of course, check out material.io for the material three guidance and links to all the resources mentioned.
10:16 · You can find us at @RodyDavis and @margeeta on Twitter.
10:19 · Thanks, you all.
10:20 · RODY DAVIS: Thanks, you all.
10:21 · [MUSIC PLAYING]