如何使用 Material 您为 Android 12 宣布的新颜色

Question

Google announced Android 12 的新颜色个性化，采用“Material 你”设计。

我们如何使用应用程序中的这些个性化颜色？
首先，我想知道如何将它与 Jetpack Compose UI.

一起使用

Answer 1

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.

因此，每次用户更改其设备上的墙纸时，Android12 都可以根据该墙纸生成一组新的颜色。这是 «Material You» 基于壁纸的主题系统的结果，代号为 «Monet»。

该集合包含五个系统颜色组：accent1、accent2、accent3、neutral1 和 neutral2。 neutral* 颜色可用于文本和背景。不像accent*，它们几乎没有颜色。

每种颜色有 13 种色调，最浅的编码为 0，最深的编码为 - 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

所有颜色都可用，例如 XML 的 @android:color/system_accent1_0 和 Kotlin/Java 的 android.R.color.system_accent1_0。值可以在运行时被 OverlayManager RROs!

覆盖

官方 Material 组件库引入了新的 Material 3 主题（从版本 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 开始。

警告：所有这些颜色都是在 API 级别 31 中添加的，所以不要忘记检查 Build.VERSION.SDK_INT 的使用情况并确保更新您应用的 compileSdkVersion 到 31.

Material 你的颜色展示：
左：Pixel 的壁纸和风格，右：我们可以通过 API 获得的颜色。 (source)

甚至在应用程序图标中也可以使用莫奈颜色！
不同壁纸上具有基于莫奈色彩的应用程序图标示例。 (source)

Jetpack Compose UI 主题的简单示例，带有 Material 颜色和 Day/Night 支持：

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,
    )
}

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

所有 Material 您的《莫奈》颜色参考，从 system_accent1_0:
开始 https://developer.android.com/reference/android/R.color#system_accent1_0

此答案的信息来源：Medium article, Twitter thread。

来自 Dmitry Chertenko with «Material You» colors: GitHub, Google Play 的演示应用程序。提供了一个很好的使用旧 XML-based UI.

的例子

如何使用 Material 您为 Android 12 宣布的新颜色

How to use new Material You colors announced for Android 12

android

kotlin

material-design

android-jetpack

android-jetpack-compose