[FREE] Material You M3 Dynamic Colors for your components!

Material You Dynamic Colors Extension Documentation

Overview

The Material You Dynamic Colors extension allows you to easily integrate dynamic theming into your app, taking advantage of the latest Android 12+ Material You design features. This extension provides a set of functions to retrieve a palette of dynamically themed colors, as well as individual colors that can be applied to various UI elements.

Key Features

  • GetColorPalette(): Returns a list of 12 dynamically themed colors that can be used to create a cohesive color scheme for your app.
  • GetDynamicColor(colorName): Retrieves a specific dynamically themed color by name (e.g., “N1_0”, “A1_50”).
  • IsMaterialYouSupported(): Checks if the device supports Material You dynamic theming, allowing you to gracefully fallback to default colors if needed.
  • No external dependencies - the extension is self-contained and easy to integrate.

Usage

Checking Material You Support

Before using the dynamic color features, it’s important to check if the device supports Material You. You can do this using the IsMaterialYouSupported() function:

if M3DynamicColors1.IsMaterialYouSupported() then
  -- Material You is supported, use dynamic colors
else
  -- Material You is not supported, use fallback colors
end if

Retrieving a Color Palette

To get a set of dynamically themed colors, use the GetColorPalette() function. This will return a list of 12 colors that you can use throughout your app’s UI:

set colors to call M3DynamicColors1.GetColorPalette()

You can then use these colors to set the background, text, or other properties of your UI elements:

set Button1.BackgroundColor to item 1 of colors
set Label1.TextColor to item 5 of colors

Retrieving Individual Colors

If you need to set a specific color, you can use the GetDynamicColor(colorName) function. This allows you to retrieve a single dynamically themed color by name:

set HorizontalArrangement1.BackgroundColor to call M3DynamicColors1.GetDynamicColor("N1_100")
set VerticalArrangement1.BackgroundColor to call M3DynamicColors1.GetDynamicColor("A1_50")

The available color names are:

  • “N1_0”, “N1_10”, “N1_50”, “N1_100” (Neutral colors)
  • “N2_0”, “N2_10”, “N2_50”, “N2_100” (Neutral colors)
  • “A1_0”, “A1_10”, “A1_50”, “A1_100” (Accent colors)

Example: Applying Dynamic Colors to a Button

Here’s an example of how you can use the Material You Dynamic Colors extension to set the background color of a button based on the device’s current theme:

if M3DynamicColors1.IsMaterialYouSupported() then
  set Button1.BackgroundColor to call M3DynamicColors1.GetDynamicColor("A1_50")
else
  set Button1.BackgroundColor to #2196F3 -- Fallback color
end if

In this example, we first check if Material You is supported. If it is, we use the GetDynamicColor() function to retrieve the “A1_50” color and apply it to the button’s background. If Material You is not supported, we fall back to a default blue color.

By using this extension, you can ensure your app’s UI seamlessly adapts to the user’s device theme, providing a modern and personalized experience.

Conclusion

The Material You Dynamic Colors extension simplifies the process of integrating dynamic theming into your Android app. With just a few lines of code, you can retrieve a palette of coordinated colors or set individual dynamic colors on your UI elements. This helps ensure your app aligns with the latest Material Design guidelines and provides a consistent, visually appealing experience for your users.

Download —>

1 Like

Could you please provide code blocks, demonstrate usage examples, and explain how it functions?

2 Likes

Sure I will upload as soon as possible.