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.
Rysunek 2. Przykład wyodrębniania kolorów źródłowych z obrazu tapety i do 5 kluczowych kolorów System interpretuje każdy kolor klucza za pomocą palety 13 tonów.
Rysunek 3. Przykład generowania danej palety tonalnych 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).