Projekt Material You

W Androidzie 12 interfejs Material You skupia się na wyrażaniu siebie i płynności w systemie operacyjnym Android, aby pomóc użytkownikom tworzyć i korzystać z jednego spójnego interfejsu dostosowanego do ich potrzeb. Jako partner Androida zachęcamy do uwzględnienia w swoich urządzeniach z Androidem projektu Material You w tych obszarach:

  • Kolory dynamiczne
  • Ruch
  • Widżety

Kolory dynamiczne

Dynamiczne kolory są podstawą systemu projektowania Material You i kluczowym elementem wieloletniej strategii Androida, która ma na celu zapewnienie użytkownikom prostszej i bardziej zaawansowanej personalizacji niż na innych urządzeniach. Material You oferuje:

  • Użytkownikom i programistom zapewniają spójną, bogatą personalizację na dowolnym urządzeniu z Androidem.

  • możliwości dla producentów urządzeń z Androidem, aby nadal ulepszać interfejs systemu i własne aplikacje w sposób zgodny z kolorami, marką i formą ich sprzętu i marki;

Aby korzystać z dynamicznych kolorów, wykorzystaj historię wyodrębniania kolorów w Material You w Androidzie 12 jako kluczowy element oferty oprogramowania dla użytkowników. Na urządzeniu używaj logiki wyodrębniania kolorów dostępnej w AOSP. Zwróć szczególną uwagę na to, aby pobierała ona jeden kolor źródłowy tapety lub motywu i wyświetlił go za pomocą 65 interfejsów API kolorów. Wymagania dotyczące kolorów dynamicznych znajdziesz w artykule Korzystanie z kolorów dynamicznych.

Pełny proces dynamicznego kolorowania składa się z 4 etapów:

Przepływ kolorów Material You

Rysunek 1. Dynamiczne przepływy kolorów Material You

  1. Użytkownik zmienia tapetę lub motyw za pomocą selektora OEM.

  2. Użytkownik wybiera jedną z tych opcji:

    • Motyw urządzenia. Gdy ta opcja jest włączona, Android automatycznie wybiera 1 kolor źródłowy, który spełnia wymagania.

    • Nowa tapeta i motyw. Gdy ta opcja jest zaznaczona, logika AOSP automatycznie wybiera jeden kolor źródłowy z wybranej tapety.

  3. AOSP rozszerza kolor z jednego źródła na 5 palet tonalnych z 13 wariantami kolorów tonalnych każdy, zgodnie z logiką AOSP, które następnie wypełniają 65 atrybutów kolorów.

  4. Interfejs aplikacji używa 65 atrybutów kolorów w sposób spójny w całym ekosystemie aplikacji na Androida. Zachęcamy do używania tej samej palety kolorów w interfejsie systemu urządzenia i aplikacjach OEM.

Poprawki do Androida 12

Aby uzyskać kompleksową logikę wyodrębniania kolorów tapety i umożliwić urządzeniu wypełnianie interfejsów API 65 kolorów w sposób zgodny z ekosystemem, dodaj do implementacji Androida 12 te poprawki:

Określanie kolorów niestandardowych w ThemePicker

Jeśli używasz aplikacji AOSP ThemePicker, aplikacja WallpaperPicker wyświetla sekcję kolorów, jeśli oba z tych warunków są spełnione:

  • flag_monetframeworks/base/packages/SystemUI/res/values/flags.xml: true.
  • Systemowy plik APK stub z nazwą pakietu jest zdefiniowany w pliku themes_stub_package w pliku packages/apps/ThemePicker/res/values/override.xml.

Format pliku APK stub

Przykładową wersję tego pliku APK znajdziesz w pliku packages/apps/ThemePicker/themes.

Plik APK powinien zawierać tylko zasoby, które opisują dostępne kolory podstawowe i ich nazwy.

Element stub powinien zawierać plik XML w sekcji res/xml w takim formacie:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <array name="color_bundles">
        <item>color1</item>
        <item>color2</item>
        <item>color3</item>
        <item>color4</item>
    </array>

    <string name="bundle_name_color1">Blue</string>
    <string name="bundle_name_color2">Red</string>
    <string name="bundle_name_color3">Yellow</string>
    <string name="bundle_name_color4">Green</string>

</resources>

W tym pliku każdy element item w elementach color_bundles ma inną nazwę, o ile tylko te ciągi znaków mają nazwę bundle_name_item.

Dla każdego koloru powinien być dostępny ciąg tekstowy bundle_name_item z opisową nazwą koloru. Można je przetłumaczyć, dodając odpowiednie przetłumaczone ciągi znaków do katalogów res/values-language code.

Rzeczywiste wartości kolorów mogą być w tym samym pliku XML lub w oddzielnym pliku XML zasobów w następującym formacie:

<resources>
    <color name="color_primary_color1">#0000FF</color>
    <color name="color_secondary_color1">#0000FF</color>

    <color name="color_primary_color2">#ff0000</color>
    <color name="color_secondary_color2">#ff0000</color>

    <color name="color_primary_color3">#ffff00</color>
    <color name="color_secondary_color3">#ffff00</color>

    <color name="color_primary_color4">#00ff00</color>
    <color name="color_secondary_color4">#00ff00</color>
</resources>

W przypadku każdego elementu w tablicy kolorów musi istnieć wpis color_primary_item i color_secondary_item (oba kolory powinny być takie same). Wartości tych wpisów color to rzeczywiste kody kolorów, które mają być wyświetlane w sekcji kolor podstawowy.

Krok 1. Utwórz motyw dla użytkowników

W selektorze motywów użytkownicy mogą korzystać z nowych funkcji personalizacji Material You i wybierać opcje kolorów lub gotowe zestawy kolorów. Jeśli pasuje on do Twojego produktu i grupy demograficznej użytkowników, możesz zaoferować im większą personalizację i dodatkowe opcje kolorystyczne, korzystając z selektora motywów lub selektora tapet.

  • Gdy używasz selektora tapet, wyodrębnianie koloru tapety jest domyślnie włączone. Możesz jednak dostosować selektor, aby zapewnić użytkownikowi więcej opcji.

Krok 2. Wyodrębnij kolor tapety jako kolor źródłowy

Aby umożliwić wyodrębnianie kolorów tapety, wybierz z wymienionych powyżej łatek do Androida 12 (ta funkcja zostanie domyślnie włączona w przyszłej wersji AOSP). Logika AOSP, która powoduje wyodrębnienie tapety, zaczyna się w frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java na ThemeOverlayController#mOnColorsChangedListener przez WallpaperManager#onWallpaperColorsChanged. Zalecamy używanie niezmodyfikowanej logiki AOSP, aby zapewnić spójność podczas tworzenia aplikacji.

Domyślnie algorytm wybiera kolor o najwyższej częstotliwości, który nadaje się do użycia. Aby korzystać z innych kolorów źródłowych zwracanych przez algorytm i prezentować je użytkownikom w selektorze motywów, użyj elementu ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Aby nadawał się do użycia, kolor źródłowy (czy wyodrębniony z tapety, czy wybrany przez użytkownika jako wstępny) musi mieć wartość chromatycznaCAM16co najmniej 5. Dzięki temu nie będzie on zależny od subtelnych odcieni ciemnych, gdy zostanie przekonwertowany z pojedynczego koloru na 65 odcieni. Pozostanie on reprezentatywny dla wyboru użytkownika. Aby odczytać i zmodyfikować kolory w CAM16, użyj Cam#fromInt lub Cam#getInt.

Używanie niedynamicznej palety kolorów Na urządzeniach, które nie obsługują wyodrębniania kolorów z tapety, możesz nadal zadbać o to, aby aplikacje Google i aplikacje innych firm obsługujące dynamiczne kolory dobrze wyglądały. Aby to zrobić:

  • Aby używać domyślnej palety Materiał, wyłącz flag_monet w frameworks/base/packages/SystemUI/res/values/flags.xml.
  • Upewnij się, że użytkownicy nadal mogą personalizować system operacyjny za pomocą gotowego selektora motywów.

Krok 3. Rozwiń kolor źródłowy do interfejsów API kolorów

Korzystając z jednego koloru źródłowego z poprzedniego kroku, Android generuje 5 niepowtarzalnych palet tonalnych (akcent 1–3, neutralne 1–2), każdą paletę obejmującą 13 kolorów oraz każdy kolor z różnymi wartościami luminancji (od 0 do 1000), co łącznie daje 65 kolorów. Logika zawarta w aktualizacjach Androida 12 implementuje tę funkcję rozszerzania kolorów prawidłowo. Szczegóły implementacji znajdziesz poniżej.

Ze względu na spójność dla deweloperów 5 palet tonalnych (accent1, accent2, accent3, neutral1, neutral2) i odpowiadających im 13 kolorów muszą być oparte na jednym kolorze źródłowym z odpowiednimi zmianami wartości chroma i hue w CAM16, jak pokazano poniżej:

  • system_accent1

    • Chroma: użyj wartości „40” dla wariantów kolorów kończących się na: 0, 10, 50, 100, w przeciwnym razie użyj wartości „48”.
    • Odcień: taki sam jak w źródle
  • system_accent2

    • Chroma: użyj „16”
    • Odcień: taki sam jak źródło
  • system_accent3

    • Chroma: użyj „32”
    • Barwa: obrót o 60 stopni w kierunku dodatnim
  • system_neutral1

    • Chroma: użyj wartości „4”.
    • Odcień: taki sam jak źródło
  • system_neutral2

    • Chroma: użyj „8”
    • Odcień: taki sam jak źródło

CTS obejmuje testy służące do weryfikacji wywołań interfejsu API luminancji i hue. Aby uruchomić, użyj atest SystemPalette.

Krok 4. Używaj dynamicznych kolorów w aplikacjach i interfejsie systemu

Po ustawieniu dynamicznych kolorów na urządzeniu aplikacje wykorzystują je zgodnie ze wskazówkami w Material Design. Wytyczne dotyczące materiałów zostaną opublikowane na stronie material.io do 26 października 2021 r., aby aplikacje innych firm mogły je zastosować. W przypadku interfejsu systemu i aplikacji własnych zdecydowanie zalecamy zintegrowanie dynamicznych kolorów w całym interfejsie w sposób odpowiedni dla Twojego sprzętu i marki, który pozwoli Ci wyróżnić swoje urządzenia.

Ogólne wskazówki dotyczące kolorów dynamicznych:

  • Używaj kolorów uzupełniających w przypadku elementów pierwszego planu w aplikacjach i interfejsie systemu:

    @android:color/system_accent1_0 … 1000 // most-used foreground color group
    @android:color/system_accent2_0 … 1000 // alternate accent, used for surfaces
    @android:color/system_accent3_0 … 1000 // playful, analogous color
    
  • Używaj neutralnych kolorów w przypadku elementów tła w aplikacjach i interfejsie systemu:

    @android:color/system_neutral1_0 … 1000 // most-used background color group
    @android:color/system_neutral2_0 … 1000 // used for higher-elevation surfaces
    

Więcej informacji o tym, jak Material You mapuje kolory i jak interfejsy API są używane w SysUI, znajdziesz w dodatkowych materiałach.

Krok 5. Dodaj opcje dynamicznych kolorów w implementacji AOSP WallpaperPicker

kompilować wersję na Androida 13 lub nowszego,

Od Androida 13 funkcja android.theme.customization.accent_color jest wycofana. Dodano nowy atrybut android.theme.customization.theme_style, aby obsługiwać różne wersje kolorystyczne. Obecnie w kodzie mamy 4 warianty:

TONAL_SPOT = Default Material You theme since Android S.
VIBRANT = Theme where accent 2 and 3 are analogous to accent 1.
EXPRESSIVE = Highly chromatic theme.
SPRITZ = Desaturated theme, almost grayscale.

Są one wysyłane na adres Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES, jak pokazano w pliku JSON poniżej:

{
    "android.theme.customization.system_palette":"B1611C",
    "android.theme.customization.theme_style":"EXPRESSIVE"
}

Wersja na Androida 12 lub starszego

Podczas korzystania z elementu dobierania niestandardowego motywu urządzenie musi wysłać prawidłowy kolor źródłowy do elementu Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES, podając plik JSON w takim formacie (gdzie 746BC1 to przykładowy prawidłowy kolor źródłowy):

{
      "android.theme.customization.system_palette":"746BC1",
      "android.theme.customization.accent_color":"746BC1"
}

Spowoduje to pominięcie ekstrakcji koloru tapety (krok 2) i bezpośrednie rozwinięcie podanego koloru źródłowego na 65 atrybutów koloru (krok 3).

Krok 6. Prześlij zgłoszenie

Poza integracją systemu musisz też przesłać zgłoszenie i podać nam nazwę swojej marki (Build.MANUFACTURER). Ponieważ większość aplikacji innych firm używa do wyświetlania dynamicznych komponentów Material Komponenty dla Androida, korzystamy z zakodowanej na stałe listy dozwolonych, aby określić, które urządzenia mają zintegrowaną funkcję dynamiczne palety kolorów.

Ruch

Płynne animacje sprawiają, że urządzenia wydają się nowoczesne i luksusowe. Aby budować i utrzymywać zaufanie deweloperów oraz ich zadowolenie, płynne przewijanie i efekt falowania są kluczowymi elementami płynnego ruchu, które muszą wyglądać i działać spójnie.

Używanie nadmiernych przewijania w systemie operacyjnym

Android 12 zawiera bardziej responsywne, dynamiczne przewijanie w formie rozciągania widoku, które pojawia się, gdy użytkownik próbuje przewinąć poza krawędź listy. Poniżej znajdziesz przykład:

Material You – przewijanie

Rysunek 2. Efekt przewijania do końca w Androidzie 12, jak pokazano w Ustawieniach

Aby zapewnić spójność dla programistów, zadbaj o to, aby ogólny efekt dalekiego przewijania na urządzeniach był podobny do tego:

  • Na urządzeniach, które zwracają wartość Prawda dla ActivityManager.isHighEndGfx(), efekt przewijania jest nieliniowym rozciąganiem ekranu (jak pokazano powyżej).

  • Na urządzeniach o niższej wydajności efekt rozciągania jest uproszczony do rozciągnięcia liniowego (aby zmniejszyć obciążenie systemu).

Przewijanie w aplikacji własnej

Gdy używasz widoków niestandardowych, być może trzeba będzie zmodyfikować niektóre aplikacje i interfejs systemu, które korzystają z efektu rozciągania.

  • Aby obsługiwać rozciąganie podczas przewijania, zaktualizuj biblioteki do najnowszych wersji:

    • androidx.recyclerview:recyclerview:1.3.0-alpha01 za RecyclerView
    • androidx.core:core:1.7.0-alpha01 co NestedScrollViewEdgeEffectCompat
    • androidx.viewpager:viewpager:1.1-alpha01 za ViewPager
  • W przypadku niestandardowych układów, które używają EdgeEffect, rozważ wprowadzenie tych zmian w interfejsie:

    • W przypadku rozciągania dalekiego przewijania użytkownicy nie powinni wchodzić w interakcję z treścią układu podczas jego rozciągania. Użytkownicy powinni manipulować tylko samym rozciąganiem, a nie np. mieć możliwość naciskania przycisku w treści.

    • Gdy użytkownicy dotykają treści podczas animacji EdgeEffect, powinni zatrzymać animację i mieć możliwość manipulowania rozciągnięciem. Bieżąca wartość pull jest dostępna w EdgeEffectCompat.getDistance().

    • Aby zmienić wartość funkcji pull i zwrócić zużytą ilość, użyj funkcji onPullDistance(). Dzięki temu deweloperzy mogą płynnie przechodzić od rozciągania do przewijania, gdy palec odciąga palca od pozycji początkowej.

    • Podczas pracy z zagnieżdżonym przewijaniem, jeśli treść jest rozciągnięta, rozciągnięcie musi pochłonąć ruch dotykowy przed zagnieżdżoną treścią. W przeciwnym razie zagnieżdżenie może przewijać się, gdy palec zmieni kierunek, zamiast zwalniać rozciąganie.

Informacje o nadmiernym przewijaniu znajdziesz w artykule Animowanie gestu przewijania.

Korzystanie z efektu falowania (dotykowego sygnału zwrotnego) w systemie operacyjnym

Android 12 zawiera delikatniejsze dźwięki dotykowe, które informują użytkowników o naciśnięciu.

Material You Ripple

Rysunek 3. Efekt falowania w Androidzie 12 z delikatniejszą animacją wypełnienia

Aby zapewnić deweloperom przewidywalność i wygodę użytkownikom, zadbaj o to, aby efekt falowania na Twoich urządzeniach był podobny do przykładu pokazanego powyżej. Chociaż nie musisz wykonywać żadnych konkretnych czynności integracyjnych, aby obsługiwać efekty falowania, warto przetestować efekt na urządzeniach, aby sprawdzić, czy w ramach implementacji nie wystąpiły niezamierzone regresje.

Widżety

Widgety to kluczowe elementy urządzenia z Androidem. Android 12 zawiera nowe interfejsy API i ich funkcje, które powinni obsługiwać wszyscy producenci OEM.

Dodatkowe materiały

Użycie kolorów w SysUI

(accent1 = A1, accent2 = A2, accent3 = A3, neutral1 = N1, neutral2 = N2)

Rodzaje kolorów

Rysunek 4. Używanie dynamicznych kolorów w interfejsie systemu

Aktualizacje atrybutów kolorów z biblioteki materiałów

W nadchodzącej wersji Material zaktualizuje atrybuty motywu, tworząc role kolorów, które służą do dostarczania kolorów do określonych widoków.

Rola koloru Atrybut motywu w Androidzie Jasny motyw
Kolory dynamiczne
Tryb ciemny
Dynamiczna kolorystyka
Główny colorPrimary system_accent1_600 system_accent1_200
Na poziomie podstawowym colorOnPrimary system_accent1_0 system_accent1_800
Secondary colorSecondary akcent_systemowy2_600 system_accent2_200
Na II stopniu colorOnSecondary system_accent2_0 system_accent2_800
Błąd colorError Nie dotyczy (red_600) Nie dotyczy (red_200)
W przypadku błędu colorOnError Nie dotyczy (biała) Nie dotyczy (red_900)
Tło android:colorBackground neutralne dla systemu1_10 system_neutral1_900
W tle colorOnBackground neutralne dla systemu1_900 system_neutral1_100
Powierzchnia colorSurface system_neutral1_10 system_neutral1_900
Na powierzchni colorOnSurface neutralne dla systemu1_900 system_neutral1_100

Materiał będzie aktualizował atrybuty stanów za pomocą tych wskaźników:

Rola koloru Atrybut motywu w Androidzie Jasny motyw
Kolory dynamiczne
Tryb ciemny
Dynamiczna kolorystyka
Treści w głównym stanie colorPrimaryStateContent akcent_systemowy1_700 system_accent1_200
Warstwa stanu głównego colorPrimaryStateLayer: system_accent1_600 system_accent1_300
Treść stanu wtórnego colorSecondaryStateContent system_accent2_700 akcent_systemowy2_200
Warstwa stanu dodatkowego colorAdditionalStateLayer akcent_systemowy2_600 akcent_systemowy2_300
W przypadku treści stanu głównego colorOnPrimaryStateContent akcent_systemowy1_0 system_accent1_800
Na warstwie stanu głównego colorOnPrimaryStateLayer system_accent1_900 system_accent1_800
W przypadku dodatkowych treści stanowych colorOnSecondaryStateContent system_accent2_0 system_accent2_800
Na warstwie stanu dodatkowego colorOnSecondaryStateLayer system_accent2_900 system_accent2_800
Treści dotyczące stanu głównego kontenera colorOnPrimaryContainerStateContent system_accent1_900 akcent_systemowy1_900
Na warstwie stanu głównego kontenera colorOnPrimaryContainerStateLayer akcent_systemowy1_900 system_accent1_900
Treści dotyczące stanu kontenera pomocniczego colorOnSecondaryContainerStateContent akcent_systemowy2_900 system_accent2_900
W dodatkowej warstwie stanu kontenera colorOnSecondaryContainerStateLayer system_accent2_900 system_accent2_900
Treści dotyczące stanu kontenera trzeciego poziomu colorOnTertiaryContainerStateContent system_accent3_900 system_accent3_900
W warstwie stanu kontenera trzeciorzędnego colorOnTertiaryContainerStateLayer akcent_systemowy3_900 akcent_systemowy3_900
Treści dotyczące stanu colorOnSurfaceStateContent system_neutral1_900 system_neutral1_100
Warstwa stanu powierzchni colorOnSurfaceStateLayer system_neutral1_900 system_neutral1_100
Informacje o treściach dotyczących stanu wersji colorOnSurfaceVariantStateContent system_neutral2_700 system_neutral2_200
Warstwy stanu wariantu na powierzchni colorOnSurfaceVariantStateLayer system_neutral2_700 system_neutral2_200
Treść stanu błędu colorErrorStateContent red800 red200

Najczęstsze pytania

Wyodrębnianie kolorów

Czy po zmianie tapety przez użytkownika wyodrębnianie kolorów odbywa się automatycznie, czy musi być wywołane z innego miejsca?

W przypadku łatek do Androida 12 funkcja identyfikowania koloru tapety jest domyślnie włączona.

ThemeOverlayController.java aktywuje logikę z kluczami ThemeOverlayController#mOnColorsChangedListener i WallpaperManager#onWallpaperColorsChanged.

W przypadku animowanych tapet lub tapet wideo, czy można określić, kiedy wyodrębnianie kolorów pobiera kolor z ekranu? Niektórzy użytkownicy mogą chcieć pokazać kolory z ostatniej klatki, bo zazwyczaj są one wyświetlane.

Wyodrębnianie kolorów jest wywoływane, gdy użytkownik ustawi tapetę lub po cyklu zasilania ekranu (w odpowiedzi na zdarzenie WallpaperEngine#notifyColorsChanged). Ostatnie zdarzenie WallpaperColors (z tapety na żywo) jest stosowane po wyłączeniu i ponownie włączeniu ekranu.

Selektor motywów/tapet

Jak włączyć selektor motywów, aby użytkownicy mogli wybrać więcej niż jeden kolor źródłowy? Czy istnieje sposób na uzyskanie tych kolorów z logiki wyodrębniania?

Tak. W selektorze motywów możesz użyć opcji ColorScheme#getSeedColors(wallpaperColors: WallpaperColors).

Nazwy Pixela są dostępne jako ikona z motywem. Czy jest on uwzględniony w 3 udostępnionych przez Ciebie poprawkach? Jak producenci OEM mogą to zastosować?

Nie. Ikony tematyczne są w wersji beta i nie są dostępne w Androidzie 12.

Czy można korzystać z aplikacji Tapeta Google z włączonymi funkcjami wyodrębniania i wybierania kolorów?

Tak. Funkcje te można zaimplementować w najnowszej wersji aplikacji Tapety Google, wykonując czynności integracyjne opisane wcześniej na tej stronie.

Aby dowiedzieć się więcej, skontaktuj się z menedżerem ds. konta.

Czy Google może udostępnić aplikację lub kod źródłowy, aby producenci urządzeń oryginalnych mogli wdrożyć własną wersję podglądu dynamicznych kolorów w menu ustawień, która wygląda podobnie do sekcji podglądu w aplikacji Google do wybierania tapet?

Główne klasy, które renderują podgląd, to WallpaperPicker2 i Launcher3.

Ekran podglądu tapety: WallpaperSectionController.

Jak zaimplementować podgląd po zmianie koloru, tak jak w aplikacji Tapeta Google?

Aplikacja do wybierania tapety oczekuje, że ContentProvider będzie dostępna w Menu z aplikacjami (aplikacja z użyciem Launcher3 ją ma). Podgląd jest udostępniany przez usługę GridCustomizationsProvider w Menu z aplikacjami, do której należy się odwoływać w głównych metadanych aktywności w Menu z aplikacjami, aby można było odczytać tapetę i styl aplikacji. Wszystko to jest wdrażane w ramach Launcher3 w AOSP i jest dostępne dla producentów OEM.