Ta strona została przetłumaczona przez Cloud Translation API.

Pozwól użytkownikom spersonalizować korzystanie z kolorów w Twojej aplikacji

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.

**Rysunek 1.** Przykłady tonalnych schematów kolorów uzyskanych z różnych tapet

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.

**Rysunek 4.** Wybieranie wersji kolorystycznych w ustawieniach tapety (widocznych na urządzeniu Pixel)

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.

**Rysunek 5.** Przykład wyglądu różnych wersji kolorystycznych na jednym urządzeniu

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()

**Rysunek 6.** Przykład harmonizacji kolorów niestandardowych

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 możesz też Dynamiczne motywy kolorystyczne dla widżety zaczynające się od Android 12 oraz Ikony adaptacyjne zaczynają się za Android 13.