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

Wypróbuj sposób tworzenia wiadomości

Jetpack Compose to zalecany zestaw narzędzi interfejsu na Androida. Dowiedz się, jak pracować z kolorem dynamicznym w edytorze.

Kolory dynamiczne – Material Design 3 →

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 te motywy w aplikacji lub aktywności, aby uczynić ją bardziej spersonalizowaną dla użytkownika.

Na tej stronie znajdziesz instrukcje implementowania dynamicznych kolorów w aplikacji. Ta funkcja jest też dostępna osobno w przypadku widżetów i ikon dostosowujących się do motywu, co opisano dalej na tej stronie. Możesz też wypróbować ćwiczenia 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 wybranego obrazu tapety i wyodrębnia źródłowy kolor.

2. System używa tego koloru źródłowego do dalszej ekstrapolacji 5 kolorów kluczowych: podstawowy, dodatkowy, poziomowy, neutralny i neutralny wariant.

   

3. System interpretuje każdy kluczowy kolor w palecie tonalnej złożonej z 13 tonów.

   

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.

Jak wersje kolorystyczne wyświetlają się 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 jeszcze więcej wariantów. Na przykład użytkownik telefonu Pixel z Androidem 13 może wybrać wariant w ustawieniach Tapeta i styl, jak pokazano na rysunku 4.

W Androidzie 12 dodano wariant Tonal Spot, a w Androidzie 13 pojawiły się wersje Neutralny, VibrantTonal i Ekspresyjny. Każda wersja ma unikalną recepturę, która zmienia kolory początkowe tapety 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.

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

Pierwsze kroki w Zdjęciach

Kolory dynamiczne można zastosować na poziomie aplikacji lub aktywności. Aby to zrobić, zadzwoń pod numer applyToActivitiesIfAvailable(), aby zarejestrować ActivityLifeCycleCallbacks w aplikacji.

class MyApplication: Application() {
    override fun onCreate() {
        DynamicColors.applyToActivitiesIfAvailable(this)
    }
}

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>

Tworzenie motywu za pomocą tokenów

Dynamiczna zmiana kolorów korzysta z tokenów projektu, aby ułatwić i ujednolicić przypisywanie kolorów do różnych elementów interfejsu. Token projektu umożliwia przypisywanie różnych ról kolorów (a nie wartości) do różnych elementów interfejsu. Zwiększa to elastyczność, skalowalność i spójność systemu tonowego aplikacji oraz jest szczególnie przydatna przy projektowaniu jasnych i ciemnych motywów oraz dynamicznych kolorów.

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>

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 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, skorzystaj z narzędzia Material Theme Builder, dostępnego w pluginie 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 Twoja aplikacja ma kolory niestandardowe lub kolory marki, których nie chcesz zmieniać zgodnie z ustawieniami użytkownika, możesz je dodawać 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ć 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 HarmonizedColors, aby zmienić ton niestandardowych kolorów. W połączeniu z kolorami tworzonymi przez użytkowników zachowuje to wizualną równowagę i przystępny kontrast. Występuje w czasie wykonywania kodu: applyToContextIfAvailable().

Zapoznaj się z wytycznymi Material 3 dotyczącymi harmonijnego doboru kolorów niestandardowych.

Zastosuj dynamiczne kolory do adaptacyjnych ikon i widżetów

Oprócz włączenia dynamicznego motywu kolorystycznego w aplikacji możesz też korzystać z kolorów Dynanmic Color w przypadku widżetów od Androida 12 oraz ikon adaptacyjnych od Androida 13.