Dynamiczne kolory, które zostały dodane w Androidzie 12, umożliwiają użytkownikom personalizowanie urządzeń przez dopasowanie ich tonacji do schematu kolorów osobistej tapety lub wybranego koloru w selektorze tapet.
Możesz wykorzystać tę funkcję, dodając interfejs API DynamicColors, który stosuje ten motyw do aplikacji lub aktywności, aby aplikacja była bardziej spersonalizowana dla użytkownika.
Na tej stronie znajdziesz instrukcje implementacji dynamicznych kolorów w aplikacji. Ta funkcja jest też dostępna osobno w przypadku widżetów i ikon adaptacyjnych, co opisujemy poniżej. Możesz też wypróbować ćwiczenia w Codelabs.
Jak Android tworzy schematy kolorów
Android wykonuje te czynności, aby wygenerować schematy kolorów na podstawie tapety użytkownika.
System wykrywa główne kolory na wybranym obrazie tapety i wyodrębnia kolor źródłowy.
System używa tego koloru źródłowego do dalszej ekstrapolacji 5 kluczowych kolorów, które są określane jako podstawowy, dodatkowy, trzeciorzędny, neutralny i neutralny wariant.
Rysunek 2. Przykład wyodrębniania koloru źródłowego z obrazu tapety i wyodrębniania 5 kolorów kluczowych System interpretuje każdy kolor klucza jako paletę tonalną składającą się z 13 odcieni.
Rysunek 3. Przykład generowania danej palety tonalnej System używa tej jednej tapety do wygenerowania 5 różnych schematów kolorów, które stanowią podstawę dla jasnych i ciemnych motywów.
Jak wersje kolorystyczne wyświetlają się na urządzeniu użytkownika
Od Androida 12 użytkownicy mogą wybierać warianty kolorystyczne spośród kolorów wyodrębnionych z tapety i różnych motywów. W Androidzie 13 dodano więcej wariantów. Na przykład użytkownik telefonu Pixel z Androidem 13 wybiera wariant w ustawieniach Tapeta i styl, jak pokazano na rysunku 4.
W Androidzie 12 dodano wariant Tonal Spot, a w Androidzie 13 – warianty Neutral, Vibrant Tonal i Expressive. Każdy wariant ma unikalną formułę, która przekształca kolory bazowe tapety użytkownika, zmieniając ich jaskrawość i odcień. Poniższy przykład pokazuje pojedynczy schemat kolorów wyrażony za pomocą tych 4 wariantów kolorystycznych.
Aplikacja nadal używa tych samych tokenów, aby uzyskać dostęp do tych kolorów. Szczegółowe informacje o tokenach znajdziesz w sekcji Tworzenie motywu za pomocą tokenów na tej stronie.
Pierwsze kroki z Widokami
Dynamiczne kolory możesz stosować na poziomie aplikacji lub aktywności. Aby to zrobić, wywołaj metodę applyToActivitiesIfAvailable(), aby zarejestrować ActivityLifeCycleCallbacks w aplikacji.
Kotlin
class MyApplication: Application() { override fun onCreate() { DynamicColors.applyToActivitiesIfAvailable(this) } }
Java
public class MyApplication extends Application { @Override public void onCreate() { super.onCreate(); DynamicColors.applyToActivitiesIfAvailable(this); } }
Następnie dodaj motyw do aplikacji.
<style
name="AppTheme"
parent="ThemeOverlay.Material3.DynamicColors.DayNight">
...
</style>
Tworzenie motywu za pomocą tokenów
Dynamiczne kolory wykorzystują tokeny projektowe, aby ułatwić i ujednolicić przypisywanie kolorów do różnych elementów interfejsu. Token projektowy umożliwia semantyczne przypisywanie ról kolorów, a nie ustawionych wartości, do różnych elementów interfejsu. Dzięki temu system tonalny aplikacji jest bardziej elastyczny, skalowalny i spójny, co jest szczególnie przydatne podczas projektowania jasnych i ciemnych motywów oraz dynamicznych kolorów.
Poniższe fragmenty kodu pokazują przykłady jasnych i ciemnych motywów oraz odpowiadający im plik XML koloru po zastosowaniu dynamicznych tokenów kolorów.
Jasny motyw
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>
Ciemny motyw
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>
Plik XML z kolorami
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>
Więcej informacji:
Więcej informacji o dynamicznym kolorze, spersonalizowanych kolorach i generowaniu tokenów znajdziesz na stronie Material 3 poświęconej dynamicznemu kolorowi.
Aby wygenerować podstawową paletę kolorów oraz kolory i motyw aplikacji, skorzystaj z narzędzia Material Theme Builder, które jest dostępne jako wtyczka Figma lub w przeglądarce.
Aby dowiedzieć się więcej o tym, jak korzystanie ze schematów kolorów może poprawić dostępność aplikacji, zapoznaj się ze stroną Material 3 dotyczącą ułatwień dostępu w systemie kolorów.
Zachowywanie kolorów niestandardowych lub kolorów marki
Jeśli aplikacja ma niestandardowe kolory lub kolory marki, których nie chcesz zmieniać zgodnie z preferencjami użytkownika, możesz dodać je pojedynczo podczas tworzenia schematu kolorów. Przykład:
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>
Możesz też użyć narzędzia Material Theme Builder, aby zaimportować dodatkowe kolory, które rozszerzą schemat kolorów, tworząc w ten sposób ujednolicony system kolorów.
W przypadku tej opcji użyj suwaka HarmonizedColors, aby zmienić odcień spersonalizowanych kolorów. W połączeniu z kolorami wygenerowanymi przez użytkownika zapewnia to równowagę wizualną i odpowiedni kontrast. Występuje w czasie działania z applyToContextIfAvailable().
Zapoznaj się ze wskazówkami dotyczącymi harmonizowania spersonalizowanych kolorów w Material 3.
Zastosuj dynamiczne kolory do ikon adaptacyjnych i widżetów
Oprócz włączenia motywu kolorystycznego w aplikacji możesz też obsługiwać motyw kolorystyczny w przypadku widżetów od Androida 12 i ikon adaptacyjnych od Androida 13.