Funkcja Dynamic Color (wprowadzona w Androidzie 12) umożliwia użytkownikom personalizację aby dopasować tonację do schematu kolorów osobistej tapety. lub wybrać kolor z selektora tapet.
Aby skorzystać z tej funkcji, dodaj interfejs API DynamicColors
, który
stosuje ten motyw do Twojej aplikacji lub aktywności, aby lepiej spersonalizować aplikację
po stronie użytkownika.
![](https://developer.android.com/static/develop/ui/views/theming/images/wallpaper-differing.png?authuser=4&hl=pl)
Na tej stronie znajdziesz instrukcje implementowania kolorów dynamicznych w aplikacji. Ta funkcja jest również dostępna oddzielnie dla widżetów i ikon adaptacyjnych, jak opisano później na tej stronie. Możesz też wypróbować ćwiczenia z programowania.
Jak Android tworzy schematy kolorów
Android wykonuje te czynności, aby wygenerować schematy kolorów na podstawie tapeta.
System wykrywa główne kolory na wybranym obrazie tapety i wyodrębnia kolor źródłowy.
System wykorzystuje ten kolor źródłowy do dalszej ekstrapolacji pięciu kolorów kluczowych. znane jako Podstawowe, Dodatkowe, Tertiary, Neutralne i Neutralne wersji.
Rys. 2. Przykład wyodrębniania koloru źródłowego z obrazu tapety i wyodrębnienia go do 5 kolorów kluczowych System interpretuje każdy kolor klawiszy na paletę 13 tonów.
Rysunek 3. Przykład generowania określonych palet tonalnych System używa tej pojedynczej tapety do określenia 5 różnych kolorów schematy, które stanowią podstawę do tworzenia jasnych i ciemnych motywów.
Jak wersje kolorystyczne wyświetlają się na urządzeniu użytkownika
Użytkownicy mogą wybierać wersje kolorystyczne spośród kolorów wyodrębnionych z tapety i różnych motywów od Androida 12, a w Androidzie 13 jest ich więcej. Dla: Na przykład użytkownik z telefonem Pixel z Androidem 13 wybierze wariant z menu Tapety i stylem, jak widać na rysunku 4.
![](https://developer.android.com/static/develop/ui/views/theming/images/wallpaper-color.png?authuser=4&hl=pl)
W Androidzie 12 dodano wariant Tonal Spot oraz wariant Neutralny i Vibrant Tonal i Ekspresyjny na Androidzie 13. Każdy wariant ma unikalny identyfikator przepis, który zmienia barwy ziarna tapety użytkownika za pomocą energii i obracam barwę. Przykład poniżej pokazuje schemat z jednym kolorem w tych 4 wersjach kolorystycznych.
![](https://developer.android.com/static/develop/ui/views/theming/images/color-variants-example.png?authuser=4&hl=pl)
Aby uzyskać dostęp do tych kolorów, aplikacja nadal używa tych samych tokenów. Więcej informacji informacje o tokenach znajdziesz w sekcji Tworzenie motywu za pomocą tokenów na tej stronie.
Pierwsze kroki z funkcją Compose
Jeśli tworzysz swój UI za pomocą funkcji tworzenia wiadomości, zapoznaj się z Wybór motywu Material Design – zawiera szczegółowe informacje na temat stosowania dynamicznych kolorów w .
Pierwsze kroki w Zdjęciach
Kolory dynamiczne można zastosować na poziomie aplikacji lub aktywności. Aby to zrobić, zadzwoń:
applyToActivitiesIfAvailable()
, aby zarejestrować
ActivityLifeCycleCallbacks
do 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
Kolory dynamiczne korzystają z tokenów projektowania, aby przypisywać kolory uproszczenie i spójność poszczególnych elementów interfejsu. Token projektu pozwala do semantycznego przypisywania ról kolorów zamiast ustalonej wartości, do różnych elementów interfejsu. Dzięki temu system tonalny aplikacji będzie miał więcej i elastyczności, skalowalności i spójności. z myślą o jasnych i ciemnych motywach oraz dynamicznych kolorach.
Poniżej znajdziesz przykłady jasnych i ciemnych motywów. odpowiedniego koloru XML 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>
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:
Aby dowiedzieć się więcej o kolorach dynamicznych, kolorach niestandardowych i generowaniu tokenów, sprawdź stronę Dynamiczny kolor Material 3.
Aby wygenerować podstawową paletę kolorów oraz kolory i motyw aplikacji, zaznacz znajdziesz w narzędziu Material Theme Builder, wtyczka Figma lub w przeglądarce).
Aby dowiedzieć się więcej o tym, jak korzystanie ze schematów kolorów może zwiększyć dostępność zapoznaj się ze stroną Material 3 na temat Ułatwienia dostępu w systemie kolorów.
Zachowaj kolory niestandardowe lub marki
Jeśli aplikacja ma kolory niestandardowe lub marki, których nie chcesz zmieniać za pomocą atrybutu użytkownika, możesz dodawać je pojedynczo podczas tworzenia koloru oszustw. 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ż użyć Material Theme Builder, aby zaimportować dodatkowe
które rozszerzają schemat kolorów, tworząc jednolity system kolorów.
W przypadku tej opcji użyj opcji HarmonizedColors
, aby zmienić ton reklamy niestandardowej
kolorów. Pozwala to uzyskać wizualną równowagę i przystępny kontrast.
dzięki kolorom wygenerowanym przez użytkowników. Występuje w czasie działania z
applyToContextIfAvailable()
![](https://developer.android.com/static/develop/ui/views/theming/images/harmonize.png?authuser=4&hl=pl)
Zapoznaj się ze wskazówkami Material 3 dotyczącymi harmonizacji kolorów niestandardowych.
Zastosuj dynamiczne kolory do adaptacyjnych ikon i widżetów
![](https://developer.android.com/static/develop/ui/views/theming/images/dynamic-color-icons-widgets.png?authuser=4&hl=pl)
Oprócz włączenia dynamicznych motywów w aplikacji możesz też Dynamiczne motywy kolorystyczne dla widżety zaczynające się od Android 12 oraz Ikony adaptacyjne zaczynają się za Android 13.