Android 12에 추가된 동적 색상을 사용하면 기기를 개인 배경화면의 색 구성표에 맞춥니다. 배경화면 선택 도구에서 선택한 색상을 볼 수 있습니다.
DynamicColors API를 추가하여 이 기능을 활용할 수 있습니다.
앱 또는 활동에 이 테마를 적용하여 더욱 맞춤설정된 앱을 만들 수 있습니다.
표시됩니다.
이 페이지에는 앱에 동적 색상을 구현하는 방법이 나와 있습니다. 이 기능은 위젯 및 적응형 아이콘과 함께 사용 설정해야 합니다. Codelab을 사용해 볼 수도 있습니다.
Android에서 색 구성표를 만드는 방법
Android는 다음 단계를 실행하여 사용자의 배경화면을 설정할 수도 있습니다.
시스템은 선택된 배경화면 이미지에서 기본 색상을 감지하고 source 색상을 추출합니다.
시스템은 이 소스 색상을 사용하여 5가지 주요 색상을 추가로 추정합니다. 기본, 보조, 3차, 중립, 중립이라고 함 변형입니다.
그림 2. 배경화면 이미지 및 추출에서 5가지 주요 색상으로 소스 색상에 맞춤의 예 시스템은 각 키 색상을 13가지 색조의 색조 팔레트로 해석합니다.
그림 3. 지정된 색조 팔레트 생성 예 시스템은 이 단일 배경화면을 사용하여 다섯 가지 색상을 도출합니다. 스키마가 포함됩니다.
사용자의 기기에 색상 옵션이 표시되는 방식
사용자는 배경화면에서 추출한 색상과 다양한 색상 옵션 중에서 선택할 수 있습니다. 테마가 Android 12부터 지원되며 Android 13에는 더 많은 변형이 추가되었습니다. 대상 예를 들어 Android 13을 실행하는 Pixel 휴대전화를 사용하는 사용자는 변형을 선택합니다. 배경화면 & style으로 설정합니다.
<ph type="x-smartling-placeholder">
Android 12에서는 색조 스팟 변형을 추가하고 중립적, 생동감 Android 13의 Tonal, Expressive 변형입니다. 각 대안에는 고유한 생동감을 통해 사용자 배경화면의 시드 색상을 변환하는 레시피 색조를 회전할 수도 있습니다. 다음 예는 단일 색 구성표를 보여줍니다. 4가지 색상 변형을 통해 표현할 수 있습니다.
앱은 여전히 동일한 토큰을 사용하여 이러한 색상에 액세스합니다. 자세히 알아보기 이 페이지의 토큰으로 테마 만들기를 참조하세요.
Compose 시작하기
Compose를 사용하여 UI를 빌드하는 경우 다음을 확인하세요. 동적 색상을 적용하는 방법에 관한 자세한 내용은 Compose의 Material Theming을 참고하세요. 있습니다.
뷰 시작하기
앱 또는 활동 수준에서 동적 색상을 적용할 수 있습니다. 이렇게 하려면
applyToActivitiesIfAvailable()를 클릭하여
ActivityLifeCycleCallbacks를 앱에 추가합니다.
Kotlin
class MyApplication: Application() { override fun onCreate() { DynamicColors.applyToActivitiesIfAvailable(this) } }
자바
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); DynamicColors.applyToActivitiesIfAvailable(this); } }
다음으로 앱에 테마를 추가합니다.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
토큰으로 테마 만들기
동적 색상은 디자인 토큰을 활용하여 보다 간소화되고 일관성 있는 UI 요소를 제공합니다. 디자인 토큰을 사용하면 의미론적으로 색상 역할을 할당하도록 UI의 여러 요소에 적용할 수 있습니다. 이렇게 하면 앱의 색조 시스템이 일관성, 확장성, 일관성이 있으며 밝은 테마와 어두운 테마 및 동적 색상 디자인
다음 스니펫은 밝은 테마와 어두운 테마의 예를 보여줍니다. 동적 색상 토큰을 적용한 후 해당하는 색상 xml을 만듭니다.
밝은 테마
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
…..
</style>
</resources>
어두운 테마
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Dark.NoActionBar">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
……
</style>
</resources>
색상 XML
Colors.xml
<resources>
<color name="md_theme_light_primary">#6750A4</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#EADDFF</color>
<color name="md_theme_light_onPrimaryContainer">#21005D</color>
<color name="md_theme_light_error">#B3261E</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_errorContainer">#F9DEDC</color>
<color name="md_theme_light_onErrorContainer">#410E0B</color>
<color name="md_theme_light_surface">#FFFBFE</color>
<color name="md_theme_light_onSurface">#1C1B1F</color>
<color name="md_theme_light_surfaceVariant">#E7E0EC</color>
<color name="md_theme_dark_primary">#D0BCFF</color>
<color name="md_theme_dark_onPrimary">#381E72</color>
<color name="md_theme_dark_primaryContainer">#4F378B</color>
<color name="md_theme_dark_onPrimaryContainer">#EADDFF</color>
<color name="md_theme_dark_secondary">#CCC2DC</color>
<color name="md_theme_dark_onSecondary">#332D41</color>
<color name="md_theme_dark_secondaryContainer">#4A4458</color>
<color name="md_theme_dark_onSurface">#E6E1E5</color>
<color name="md_theme_dark_surfaceVariant">#49454F</color>
</resources>
자세히 알아보기:
동적 색상, 커스텀 색상, 토큰 생성에 대해 자세히 알아보려면 Material 3 동적 색상 페이지를 확인하세요.
기본 색상 팔레트와 앱의 색상 및 테마를 생성하려면 다음을 선택합니다. 머티리얼 테마 빌더를 공개합니다. Figma 플러그인 또는 브라우저).
색 구성표를 사용하여 접근성을 높이는 방법에 관해 자세히 알아보기 자세한 내용은 관련 Material 3 페이지를 참고하세요 색상 시스템 접근성.
맞춤 색상 또는 브랜드 색상 유지
앱에 다른 색상으로 변경하지 않을 맞춤 색상이나 브랜드 색상이 있는 경우 원하는 대로 설정할 수 있습니다. 색상을 구축할 때 개별적으로 추가할 수 있습니다. 스키마입니다. 예를 들면 다음과 같습니다.
Themes.xml
<resources>
<style name="AppTheme" parent="Theme.Material3.Light.NoActionBar">
...
<item name="home_lamp">@color/home_yellow</item>
...
</style>
</resources>
Colors.xml
<resources>
<color name="home_yellow">#E8D655</color>
</resources>
또는 머티리얼 테마 빌더를 사용하여
색 구성표를 확장하여 통일된 색 체계를 만듭니다.
이 옵션에서는 HarmonizedColors을(를) 사용하여 맞춤 어조를 바꿉니다.
있습니다. 이렇게 하면 시각적 균형을 이루고 대비를 쉽게 할 수 있습니다.
사용자가 만든 색상으로 표시됩니다. 이는 런타임 시 발생하며
applyToContextIfAvailable()
맞춤 색상 조화에 관한 Material 3의 안내를 참고하세요.
적응형 아이콘 및 위젯에 동적 색상 적용
앱에 동적 색상 테마 설정을 사용 설정하는 것 외에도 동적 색상 테마 설정: widgets이 다음에서 시작 Android 12 및 적응형 아이콘이 Android 13