如何使用为 Android 12 发布的新 Material You 颜色 [英] How to use new Material You colors announced for Android 12

问题描述

Google )

即使在应用程序图标中也可以使用莫奈颜色！
在不同壁纸上使用基于莫奈的颜色的应用程序图标示例.(来源)

---

Jetpack Compose UI 主题与 Material You 颜色和昼/夜支持的简单示例:

import android.os.Build导入 androidx.compose.foundation.isSystemInDarkTheme导入 androidx.compose.material.MaterialTheme导入 androidx.compose.material.darkColors导入 androidx.compose.material.lightColors导入 androidx.compose.runtime.Composable导入 androidx.compose.ui.graphics.Color导入 androidx.compose.ui.res.colorResourceval Purple200 = 颜色(0xFFBB86FC)val Purple500 = 颜色(0xFF6200EE)val Purple700 = 颜色(0xFF3700B3)val Teal200 = 颜色(0xFF03DAC5)val DarkColorPalette = darkColors(主要 = Purple200，primaryVariant = Purple700，次要 = 青色200，)val LightColorPalette = lightColors(主要 = Purple500，primaryVariant = Purple700，次要 = 青色200，)@可组合有趣的我的应用主题(darkTheme: Boolean = isSystemInDarkTheme(),内容:@Composable() ->单元){val 颜色 = 当 {//适用于 Android 12+ 的 Material You 颜色Build.VERSION.SDK_INT >= 31 ->{val mainDark700 = colorResource(android.R.color.system_accent1_700)val secondary200 = colorResource(android.R.color.system_accent2_200)什么时候 {黑暗主题 ->深色(主要 = colorResource(android.R.color.system_accent1_200),primaryVariant = mainDark700，次要 = 次要 200，)否则 ->光色(主要 = colorResource(android.R.color.system_accent1_500),primaryVariant = mainDark700，次要 = 次要 200，)}}黑暗主题 ->深色调色板否则 ->浅色调色板}材质主题(颜色 = 颜色，内容=内容，)}

---

官方 Material Design 3 (M3) 颜色概览:
https://m3.material.io/styles/color/overview

所有材料你«莫奈»颜色参考，从system_accent1_0开始:
https://developer.android.com/reference/android/R.color#system_accent1_0

此答案的信息来源:媒体文章, Twitter 主题.

来自 Dmitry Chertenko 的演示应用程序，带有 «Material You» 颜色:GitHub, Google Play.提供了一个很好的使用基于 XML 的旧界面的示例.

Google announced new colors personalization for Android 12 with the "Material You" design.

How can we use these personalized colors from the application?
First of all, I wonder how to use it with the Jetpack Compose UI.

解决方案

Update (October 27, 2021): Google released official Jetpack Compose support for Material Design 3 (M3) with dynamic color support.
See details, API reference, and full M3 guide.

Material Components library also supports M3 since version 1.5.0-alpha04 or later.

So, every time users change the wallpaper on their device, Android 12 can generate a new set of colors based on that wallpaper. It’s a result of the «Material You» wallpaper-based theming system, codenamed «Monet».

The set consists of five system color groups: accent1, accent2, accent3, neutral1, and neutral2. neutral* colors can be useful for text and backgrounds. Unlike accent*, they are barely colored.

Each color has 13 shades, the lightest being coded with 0, the darkest — 1000:

system_accent1_0     // the lightest shade of accent color #1
system_accent1_10
system_accent1_50
system_accent1_100
system_accent1_200
system_accent1_300
...
system_accent1_1000  // the darkest shade of accent color #1

All colors are available like @android:color/system_accent1_0 from XML and android.R.color.system_accent1_0 from Kotlin/Java. Values can be overlaid at runtime by OverlayManager RROs!

Official Material Components library introduces the new Material 3 themes (starting from version 1.5.0-alpha03) with «Monet» support named as «dynamic colors» — based on the user’s wallpaper or color choice on the device. See documentation.

WARNING: All these colors are added in API level 31, so don’t forget to check Build.VERSION.SDK_INT for usage and make sure to update your app’s compileSdkVersion to 31.

---

Material You colors showcase:
Left: Pixel’s Wallpaper & style, Right: colors available to us through the API. (source)

Monet colors can be used even in the application icon!
Example of application icon with Monet-based colors on different wallpapers. (source)

---

Simple example of Jetpack Compose UI theme with Material You colors and Day/Night support:

import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material.MaterialTheme
import androidx.compose.material.darkColors
import androidx.compose.material.lightColors
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.colorResource

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)

val Teal200 = Color(0xFF03DAC5)

val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200,
)

val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200,
)

@Composable
fun MyAppTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = when {
        // Material You colors for Android 12+
        Build.VERSION.SDK_INT >= 31 -> {
            val mainDark700 = colorResource(android.R.color.system_accent1_700)
            val secondary200 = colorResource(android.R.color.system_accent2_200)
            when {
                darkTheme -> darkColors(
                    primary = colorResource(android.R.color.system_accent1_200),
                    primaryVariant = mainDark700,
                    secondary = secondary200,
                )
                else -> lightColors(
                    primary = colorResource(android.R.color.system_accent1_500),
                    primaryVariant = mainDark700,
                    secondary = secondary200,
                )
            }
        }
        darkTheme -> DarkColorPalette
        else -> LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        content = content,
    )
}

---

Official Material Design 3 (M3) color overview:
https://m3.material.io/styles/color/overview

All Material You «Monet» colors references, starting with system_accent1_0:
https://developer.android.com/reference/android/R.color#system_accent1_0

Information sources for this answer: Medium article, Twitter thread.

Demo application from Dmitry Chertenko with «Material You» colors: GitHub, Google Play. Provides a great example of usage with old XML-based UI.

这篇关于如何使用为 Android 12 发布的新 Material You 颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！