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

Wypróbuj tworzenie 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 →

Dynamiczna kolorystyka, która została dodana w Androidzie 12, umożliwia użytkownikom personalizację urządzeń, aby dopasować je do kolorystyki tapety lub wybranego koloru w selektorze tapety.

Aby skorzystać z tej funkcji, dodaj interfejs API DynamicColors, który zastosuje te motywy w aplikacji lub aktywności, dzięki czemu aplikacja będzie bardziej spersonalizowana 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 kolorów, jak opisano dalej 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 wybranego obrazu tapety i wyodrębnia źródłowy kolor.

2. System używa tego koloru źródłowego do dalszego ekstrapolowania 5 kluczowych kolorów: podstawowego, dodatkowego, terciarnego, neutralnego i wariantu neutralnego.

   

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 wyprowadzenia 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

Użytkownicy mogą wybierać warianty kolorów wyodrębnionych z tapety i różnych motywów od Androida 12. W Androidzie 13 dodano 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 – warianty Neutralny, Jasny tonalny i Wyrazisty. Każda wersja ma unikalną recepturę, która zmienia kolory zastosowane w tapecie użytkownika za pomocą intensywności i obrotu barwy. 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 z widokami

Dynamiczną kolorystykę możesz 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 do różnych elementów interfejsu (zamiast wartości zestawu) na podstawie ich semantyki. Dzięki temu system tonalny aplikacji będzie bardziej elastyczny, skalowalny i spójny. Jest to szczególnie przydatne podczas projektowania motywów jasnych i ciemnych 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, skorzystaj z narzędzia Material Theme Builder, które jest dostępne w pluginie Figma lub w przeglądarce.

• Więcej informacji o tym, jak schematy kolorów mogą zwiększać dostępność aplikacji, znajdziesz na stronie Material 3 poświęconej ułatwieniom dostępu w systemie kolorów.

Zachowanie kolorów niestandardowych lub kolorów 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. Pozwala to uzyskać równowagę wizualną i dostępny kontrast w połączeniu z kolorami generowanymi przez użytkowników. Występuje w czasie wykonywania kodu: applyToContextIfAvailable().

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

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

Oprócz włączenia motywów w Dynamic Color w aplikacji możesz też obsługiwać motywy Dynamic Color w widżetach od Androida 12 oraz w adaptacyjnych ikonach od Androida 13.