Funkcja Dynamic Color (wprowadzona w Androidzie 12) umożliwia użytkownikom personalizację urządzeń, aby były zgodne ze schematem kolorów osobistej tapety lub za pomocą wybranego koloru w selektorze tapet.
Możesz skorzystać z tej funkcji, dodając interfejs API DynamicColors, który zastosuje ten motyw do aplikacji lub aktywności, aby lepiej spersonalizować aplikację pod kątem użytkownika.
Ta strona zawiera instrukcje wdrażania kolorów dynamicznych w aplikacji. Ta funkcja jest też dostępna oddzielnie w przypadku widżetów i ikon adaptacyjnych, co opisaliśmy poniżej. 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 te czynności.
System wykrywa kolory główne 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: podstawowy, dodatkowy, poziomowy, neutralny i neutralny wariant.
Rysunek 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 wyliczania 5 różnych schematów kolorów, które stanowią podstawę do tworzenia motywów jasnych i ciemnych.
Jak wersje kolorystyczne wyświetlają się na urządzeniu użytkownika
Od Androida 12 użytkownicy mogą wybierać wersje kolorystyczne z kolorów wyodrębnionych z tapet i różnych motywów, a w Androidzie 13 jest ich więcej. Na przykład użytkownik telefonu Pixel z Androidem 13 może wybrać wariant w ustawieniach Tapeta i styl, jak widać na ilustracji 4.
W Androidzie 12 dodano wariant Tonal Spot, a w Androidzie 13 pojawiły się wersje Neutral, VibrantTonal i Expressive. Każdy wariant ma unikalny przepis, który zmienia barwy wyjściowe tapety użytkownika za pomocą energii i obrotu barwy. Poniższy przykład pokazuje jeden schemat kolorów wybrany przez te 4 wersje kolorystyczne.
Aby uzyskać dostęp do tych kolorów, aplikacja nadal używa tych samych tokenów. Szczegółowe 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 interfejs przy użyciu funkcji Compose, zapoznaj się z sekcją Motywowanie materiału w funkcji Compose, w której znajdziesz szczegółowe informacje na temat stosowania kolorów dynamicznych w aplikacji.
Pierwsze kroki w Zdjęciach
Kolory dynamiczne można zastosować na poziomie aplikacji lub aktywności. Aby to zrobić, wywołaj applyToActivitiesIfAvailable(), by zarejestrować ActivityLifeCycleCallbacks w Twojej 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 Dynamic Color korzysta z tokenów projektowych, aby ułatwić przypisywanie kolorów do różnych elementów interfejsu. Token projektu pozwala semantycznie przypisywać role kolorów zamiast ustalonej wartości do różnych elementów interfejsu. Zwiększa to elastyczność, skalowalność i spójność systemu tonowego aplikacji, a także sprawia, że jest szczególnie skuteczny w przypadku jasnych i ciemnych motywów oraz dynamicznych kolorów.
Poniższe fragmenty kodu pokazują przykłady jasnych i ciemnych motywów oraz odpowiedni kolor XML po zastosowaniu tokenów dynamicznych 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:
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, skorzystaj z narzędzia Material Theme Builder dostępnego we wtyczce Figma lub w przeglądarce.
Aby dowiedzieć się więcej o tym, jak korzystanie ze schematów kolorów może poprawić dostępność w aplikacji, zapoznaj się z informacjami o ułatwieniach dostępu w systemie kolorów artykułu Material 3.
Zachowaj kolory niestandardowe lub marki
Jeśli aplikacja ma kolory niestandardowe lub marki, 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ż użyć narzędzia Material Theme Builder, aby zaimportować dodatkowe kolory, które rozszerzają schemat kolorów, i w ten sposób tworzysz ujednolicony system kolorów.
W przypadku tej opcji użyj HarmonizedColors, aby zmienić ton kolorów niestandardowych. W połączeniu z kolorami tworzonymi przez użytkowników zachowuje to wizualną równowagę i przystępny kontrast. Występuje w czasie działania z parametrem applyToContextIfAvailable().
Zapoznaj się ze wskazówkami Material 3 dotyczącymi harmonizacji kolorów niestandardowych.
Zastosuj dynamiczne kolory do adaptacyjnych ikon i widżetów
Oprócz włączenia dynamicznych motywów w aplikacji w aplikacji dostępne są też motywy Dynamiczne kolory w przypadku widżetów od Androida 12 oraz ikon adaptacyjnych od Androida 13.