Funkcja Dynamic Color została dodana w Androidzie 12 i umożliwia personalizację urządzeń, tak aby pasowała do schematu kolorów ich osobistej tapety, a także przez wybór koloru w selektorze tapet.
Możesz skorzystać z tej funkcji, dodając interfejs API DynamicColors
, który będzie ich używać do Twojej aplikacji lub aktywności. Dzięki temu będzie ona lepiej spersonalizowana pod kątem użytkownika.
Na tej stronie znajdziesz instrukcje implementowania dynamicznych kolorów w aplikacji. Ta funkcja jest też dostępna oddzielnie dla widżetów i ikon adaptacyjnych, jak opisano w dalszej części tej strony. Możesz też wypróbować ćwiczenia z programowania.
Jak Android tworzy schematy kolorów
Aby wygenerować schematy kolorów na podstawie tapety użytkownika, Android wykonuje poniższe czynności.
System wykrywa główne kolory w wybranym obrazie tapety i wyodrębnia kolor źródłowy.
System używa tego koloru źródłowego do dalszej ekstrapolacji 5 kolorów kluczowych, tzw. podstawowych, dodatkowych, trzeciorzędnych, neutralnych i neutralnych.
System interpretuje każdy kolor klucza za pomocą palety 13 tonów.
System wykorzystuje tę pojedynczą tapetę, aby utworzyć 5 różnych schematów kolorów, które są podstawą do tworzenia jasnych i ciemnych motywów.
Jak wersje kolorystyczne wyświetlają się na urządzeniu użytkownika
Na Androidzie 12 użytkownicy mają do wyboru wersje kolorystyczne z wyodrębnionej tapety i różne motywy graficzne, a w Androidzie 13 więcej wariantów. Na przykład użytkownik telefonu Pixel z Androidem 13 wybiera wariant w ustawieniach Tapeta i styl, jak widać na ilustracji 4.
W Androidzie 12 dodano wariant Tonal Spot, a następnie wariant Neutralny, Jasny tonalny i Ekspresyjny. Każda wersja ma unikalny przepis, który zmienia kolory ziarna tapety użytkownika na żywy i obracający się barwę. Poniższy przykład pokazuje jeden schemat kolorów przedstawiony w tych 4 wersjach kolorystycznych.
Aplikacja nadal używa tych samych tokenów do uzyskiwania dostępu do tych kolorów. Szczegółowe informacje o tokenach znajdziesz w sekcji Tworzenie motywu za pomocą tokenów na tej stronie.
Wprowadzenie do tworzenia
Jeśli tworzysz interfejs użytkownika za pomocą funkcji tworzenia wiadomości, w artykule o stosowaniu motywu wizualnego w komponencie dowiesz się, jak zastosować kolory dynamiczne w aplikacji.
Pierwsze kroki ze zdjęciami
Kolory dynamiczne możesz zastosować na poziomie aplikacji lub aktywności. Aby to zrobić, wywołaj applyToActivitiesIfAvailable()
, aby zarejestrować element 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>
Utwórz motyw za pomocą tokenów
Funkcja dynamicznego koloru korzysta z tokenów projektowych, aby ułatwiać i spójne przypisywanie kolorów do różnych elementów interfejsu. Token projektowania pozwala semantycznie przypisywać role kolorów do różnych elementów interfejsu (a nie wartości stałej). Zwiększa to elastyczność, skalowalność i spójność systemu odcieni w aplikacji. Jest to szczególnie przydatne przy projektowaniu jasnych i ciemnych motywów oraz dynamicznych kolorów.
Poniższe fragmenty kodu pokazują przykłady jasnych i ciemnych motywów oraz odpowiadające im kolory w formacie XML po zastosowaniu tokenów kolorów dynamicznych.
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>
Kolory 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>
Więcej informacji:
Więcej informacji o kolorach dynamicznych, kolorach niestandardowych i generowaniu tokenów znajdziesz na stronie Kolor dynamiczny w Material 3.
Aby wygenerować podstawową paletę kolorów oraz kolory i motyw aplikacji, użyj narzędzia Material Theme Builder, które jest dostępne za pomocą wtyczki Figma lub w przeglądarce.
Więcej informacji o tym, jak korzystanie ze schematów kolorów może zwiększyć ułatwienia dostępu w aplikacji, znajdziesz na stronie Material 3 dotyczącej ułatwień dostępu w systemie kolorów.
Zachowaj kolory niestandardowe lub związane z marką
Jeśli Twoja aplikacja ma kolory niestandardowe lub związane z marką, których nie chcesz zmieniać zgodnie z preferencjami użytkownika, możesz dodać je pojedynczo podczas tworzenia schematu kolorów. Na 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ż skorzystać z narzędzia Material Theme Builder, aby zaimportować dodatkowe kolory, które rozszerzają schemat kolorów, i w ten sposób utworzyć ujednolicony system kolorów.
W przypadku tej opcji za pomocą HarmonizedColors
możesz zmienić ton kolorów niestandardowych. Pozwala to uzyskać równowagę wizualną i kontrast w połączeniu z kolorami tworzonymi przez użytkownika. Występuje w czasie działania funkcji applyToContextIfAvailable()
.
Zapoznaj się z wytycznymi Material 3 dotyczącymi harmonizacji kolorów niestandardowych.
Stosuj dynamiczne kolory do adaptacyjnych ikon i widżetów
Oprócz włączenia dynamicznego dopasowywania kolorów w aplikacji możesz też włączyć dynamiczne tworzenie motywów kolorystycznych dla widżetów (od Androida 12) i ikon adaptacyjnych (od Androida 13).