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 pochodzących 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ć ćwiczenie z programowania.

Jak Android tworzy schematy kolorów

Aby wygenerować motywy kolorów na podstawie tapety użytkownika, Android wykonuje te czynności:

  1. System wykrywa główne kolory na wybranym obrazie tapety i wyodrębnia kolor źródłowy.

  2. System wykorzystuje ten kolor źródłowy do dalszej ekstrapolacji pięciu kolorów kluczowych. znane jako Podstawowe, Dodatkowe, Tertiary, Neutralne i Neutralne wersji.

    Przykład wyodrębniania koloru źródłowego
    Rys. 2. Przykład wyodrębniania kolorów źródłowych z obrazu tapety i wyodrębniania 5 kluczowych kolorów
  3. System interpretuje każdy kolor klawiszy na paletę 13 tonów.

    Przykład generowania danej palety barw
    Rysunek 3. Przykład wygenerowania danej palety barw
  4. System używa tej jednej tapety do wygenerowania 5 różnych schematów kolorystycznych, które stanowią podstawę dla motywów ciemnych i jasnych.

Sposób wyświetlania wariantów kolorów na urządzeniu użytkownika

Od Androida 12 użytkownicy mogą wybierać warianty kolorów wyodrębnionych z tapety i różne motywy, a w Androidzie 13 dodano więcej wariantów. 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 wariantów kolorystycznych w ustawieniach tapety (na urządzeniu Pixel)

W Androidzie 12 dodano wariant Tonal Spot, a w Androidzie 13 – warianty Neutralny, Jasny tonalnyWyrazisty. Każda wersja ma unikalną recepturę, która przekształca kolory zastosowane w tapecie użytkownika za pomocą intensywności i obrotu odcienia. W tym przykładzie pokazano jedną paletę kolorów wyrażoną za pomocą 4 wariantów kolorystycznych.

Rysunek 5. Przykłady różnych wersji kolory na jednym urządzeniu

Twoja aplikacja nadal używa tych samych tokenów do uzyskiwania dostępu do tych kolorów. Więcej informacji informacje o tokenach znajdziesz w sekcji Tworzenie motywu za pomocą tokenów na tej stronie.

Pierwsze kroki z Compose

Jeśli tworzysz swój UI za pomocą funkcji Utwórz, 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 bardziej elastyczny, skalowalny i spójny. Jest to szczególnie przydatne podczas projektowania jasnych i ciemnych motywów oraz kolorów dynamicznych.

Poniższe fragmenty kodu po zastosowaniu dynamicznych tokenów kolorów przedstawiają przykłady motywów jasnego i ciemnego oraz odpowiadający kod XML 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>

Colors.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 dynamicznych kolorach, kolorach niestandardowych i generowaniu tokenów znajdziesz na stronie Dynamiczne kolory w 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ć kreatora motywów Material, aby zaimportować dodatkowe kolory, które rozszerzą Twój schemat kolorów, tworząc w ten sposób ujednolicony 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 wykonywania kodu: applyToContextIfAvailable().

Rysunek 6. Przykład harmonizacji kolorów niestandardowych

Zapoznaj się ze wskazówkami Material 3 dotyczącymi harmonizacji kolorów niestandardowych.

Stosowanie dynamicznych kolorów do ikon i widżetów adaptacyjnych

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.