Materiał Ty projektujesz

Począwszy od Androida 12, Material You design koncentruje się na ekspresji i płynności w systemie operacyjnym Android, mając na celu pomóc użytkownikom w tworzeniu i posiadaniu jednego, spójnego doświadczenia odpowiadającego ich potrzebom. Jako partner Androida zachęcamy Cię do włączania zaprojektowanych przez Ciebie Materiałów do swoich urządzeń z Androidem w następujących obszarach:

  • Dynamiczny kolor
  • Ruch
  • Widżety

Dynamiczny kolor

Dynamiczne kolory to centralny element projektu Material You i kluczowy element wieloletniej strategii Androida mającej na celu zapewnienie użytkownikom prostszej i głębszej personalizacji w sposób, jakiego nie zapewniają żadne inne urządzenia. Materiał, który oferujesz:

  • Użytkownicy i programiści spójną, bogatą historię personalizacji dostępną na każdym urządzeniu z Androidem.

  • Producenci OEM systemu Android mogą w dalszym ciągu wprowadzać innowacje w interfejsie użytkownika systemu i aplikacjach własnych w sposób zgodny z kolorem, marką i formą sprzętu oraz marki.

Aby skorzystać z dynamicznych kolorów, wykorzystaj historię ekstrakcji kolorów w systemie Android 12 Material You jako kluczową część oprogramowania oferowanego użytkownikom. Na urządzeniu użyj logiki ekstrakcji kolorów dostępnej w AOSP, zwłaszcza logiki, która pobiera pojedynczy kolor źródłowy tapety lub motywu i wysyła go za pośrednictwem interfejsów API 65 kolorów. Aby zapoznać się z wymaganiami dotyczącymi kolorów dynamicznych, zobacz temat Korzystanie z kolorów dynamicznych .

Pełny dynamiczny przepływ kolorów obejmuje cztery etapy, jak pokazano poniżej:

Materiał, w którym przepływa kolor

Rysunek 1. Materiał You Dynamiczny przepływ kolorów

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

  2. Użytkownik wybiera jedną z poniższych opcji:

    • Temat urządzenia. Po wybraniu Android automatycznie wybiera jeden kolor źródłowy, który spełnia wymagania.

    • Nowa tapeta + motyw. Po wybraniu logika AOSP automatycznie wybiera pojedynczy kolor źródłowy z wybranej tapety.

  3. AOSP rozszerza pojedynczy kolor źródłowy na 5 palet tonalnych, z których każda zawiera 13 tonalnych wariantów kolorów, zgodnie z logiką AOSP, które następnie wypełniają 65 atrybutów kolorów.

  4. Interfejs aplikacji wykorzystuje 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 użytkownika systemu urządzenia i aplikacjach specyficznych dla OEM.

Łatki na Androida 12

Aby uzyskać kompleksową logikę ekstrakcji kolorów tapet i umożliwić urządzeniu wypełnianie 65-kolorowych interfejsów API w sposób spójny z ekosystemem, uwzględnij następujące poprawki w implementacji Androida 12:

Określanie niestandardowych kolorów w ThemePicker

Jeśli korzystasz z aplikacji AOSP ThemePicker, aplikacja WallpaperPicker wyświetla sekcję kolorów, jeśli spełnione są oba poniższe warunki:

  • flag_monet w frameworks/base/packages/SystemUI/res/values/flags.xml ma wartość true .
  • Systemowy plik APK z nazwą pakietu jest zdefiniowany w themes_stub_package w packages/apps/ThemePicker/res/values/override.xml .

Stubowy format APK

Przykładową wersję tego pakietu APK można znaleźć w packages/apps/ThemePicker/themes .

Ten plik APK powinien zawierać wyłącznie zasoby zawierające szczegółowe informacje na temat dostępnych podstawowych kolorów i ich nazw.

Kod pośredniczący powinien zawierać plik XML w katalogu res/xml w następującym 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 item w ramach color_bundles ma odrębną nazwę, o ile poniższe ciągi noszą nazwę bundle_name_ item .

Dla każdego koloru powinien istnieć ciąg bundle_name_ item z opisową nazwą dla każdego 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ą znajdować się 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>

Dla każdego elementu w tablicy pakietów kolorów powinien znajdować się color_primary_ item i color_secondary_ item (przy czym oba kolory powinny być tego samego koloru). Wartości tych wpisów color są rzeczywistymi kodami kolorów dla każdego koloru wyświetlanymi w sekcji kolorów podstawowych .

Krok 1: Zbuduj środowisko tematyczne dla użytkownika

Selektor motywów umożliwia użytkownikom korzystanie z nowych możliwości personalizacji Material You i potencjalnie wybiera pomiędzy opcjami kolorów lub ustawieniami wstępnymi. Dopasowując się do Twojego produktu i grupy demograficznej użytkowników, możesz zaoferować użytkownikom bogatszą personalizację i kolorystykę, korzystając z selektora motywów lub selektora tapet .

  • Podczas korzystania z selektora tapet ekstrakcja kolorów tapety jest domyślnie włączona. Możesz jednak dokonać pewnych dostosowań selektora, aby zapewnić użytkownikowi więcej opcji.

Krok 2: Wyodrębnij kolor tapety do koloru źródłowego

Aby włączyć wyodrębnianie kolorów tapety, wybierz wymienione powyżej łatki dla Androida 12 (ta funkcja będzie domyślnie włączona w przyszłej wersji AOSP). Logika AOSP, która wyzwala wyodrębnianie tapety, zaczyna się od frameworks/base/packages/SystemUI/src/com/android/systemui/theme/ThemeOverlayController.java , na ThemeOverlayController#mOnColorsChangedListener , poprzez WallpaperManager#onWallpaperColorsChanged . Zalecamy używanie niezmodyfikowanej logiki AOSP, aby zapewnić spójne środowisko programistyczne.

Domyślnie logika wybiera kolor o najwyższej częstotliwości, który jest odpowiedni do użycia. Aby skorzystać z innych kolorów źródłowych zwróconych przez algorytm i zaprezentować je użytkownikom w selektorze motywów, użyj ColorScheme#getSeedColors(wallpaperColors: WallpaperColors) .

Aby nadawał się do użycia, kolor źródłowy (pobrany z tapety lub z ustawienia wstępnego wybranego przez użytkownika) musi mieć minimalną wartość nasycenia CAM16 wynoszącą 5; gwarantuje to, że na kolor źródłowy nie będą miały wpływu subtelne ciemne tony podczas konwersji z jednego koloru na 65 kolorów tonalnych i pozostanie reprezentatywny dla wyboru użytkownika. Aby czytać i modyfikować kolory w CAM16, użyj Cam#fromInt lub Cam#getInt .

Korzystanie z niedynamicznej palety kolorów W przypadku urządzeń, które nie obsługują wyodrębniania kolorów tapet, możesz nadal mieć pewność, że aplikacje Google i aplikacje innych firm obsługujące dynamiczne kolory będą wyglądać świetnie, wykonując następujące czynności:

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

Krok 3: Rozszerz kolor źródłowy na interfejsy API kolorów

Wykorzystując pojedynczy kolor źródłowy uzyskany w poprzednim kroku, system Android generuje 5 unikalnych palet tonalnych (akcent 1-3, neutralny 1-2), przy czym każda paleta zawiera 13 kolorów, a każdy kolor zawiera różne wartości luminancji (0 do 1000), dla łącznie 65 kolorów. Logika zawarta w łatkach Androida 12 poprawnie implementuje to rozszerzenie kolorów; szczegóły podane poniżej opisują wdrożenie.

Aby zachować spójność dewelopera, 5 palet tonalnych (akcent1, akcent2, akcent3, neutral1, neutral2) i odpowiadających im 13 kolorów musi opierać się na pojedynczym kolorze źródłowym z odpowiednimi zmianami wartości nasycenia i odcienia CAM16 , jak opisano poniżej:

  • system_accent1

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

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

    • Chroma: użyj „32”
    • Odcień: obróć o 60 stopni w kierunku dodatnim
  • system_neutral1

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

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

CTS zawiera testy sprawdzające wywołania API luminancji i odcienia. Aby uruchomić, użyj atest SystemPalette .

Krok 4: Użyj dynamicznych kolorów w aplikacjach i interfejsie użytkownika systemu

Po ustawieniu na urządzeniu dynamicznych kolorów aplikacje postępują zgodnie ze wskazówkami dotyczącymi materiałów, aby wykorzystać kolory. Wytyczne dotyczące materiałów zostaną opublikowane na material.io do 26 października 2021 r., aby można było je zastosować w aplikacjach innych firm. W przypadku interfejsu użytkownika systemu i aplikacji własnych zdecydowanie zalecamy integrację dynamicznych kolorów w całym interfejsie użytkownika w sposób, który pasuje do Twojego sprzętu i marki oraz pomaga wyróżnić Twoje urządzenia.

Ogólne wskazówki dotyczące dynamicznych kolorów można znaleźć w poniższych sekcjach:

  • Użyj kolorów akcentujących dla elementów pierwszego planu w aplikacjach i interfejsie użytkownika 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 elementów tła w aplikacjach i interfejsie użytkownika systemu:

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

Aby uzyskać więcej informacji o tym, jak Material You odwzorowuje kolory i jak używane są interfejsy API w SysUI, zobacz Dodatkowe zasoby .

Krok 5: Dodaj dynamiczne opcje kolorów w implementacji AOSP WallpaperPicker

Kompiluj dla Androida 13 i nowszych wersji

Począwszy od Androida 13, android.theme.customization.accent_color jest przestarzały. Dodano nowy atrybut android.theme.customization.theme_style w celu obsługi różnych wariantów kolorów. Obecnie mamy cztery warianty w bazie kodu w następujący sposób:

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 do Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES , jak pokazano w formacie JSON poniżej:

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

Kompilacja dla Androida 12 i starszych

W przypadku korzystania z niestandardowego selektora motywów urządzenie musi wysłać prawidłowy kolor źródłowy do Settings.Secure.THEME_CUSTOMIZATION_OVERLAY_PACKAGES , dostarczając plik JSON w następującym formacie (gdzie 746BC1 to przykładowy prawidłowy kolor źródłowy):

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

W ten sposób pomija się wyodrębnianie kolorów tapety (krok 2) i bezpośrednio rozszerza dostarczony kolor źródłowy do 65 atrybutów kolorów (krok 3).

Krok 6: Złóż zgłoszenie

Oprócz integracji systemu musisz złożyć zgłoszenie i podać nazwę swojej marki ( Build.MANUFACTURER ). Ponieważ większość aplikacji innych firm korzysta z komponentów Material Components dla systemu Android do wyświetlania dynamicznych kolorów, używamy zakodowanej na stałe listy dozwolonych , aby określić, które urządzenia mają zintegrowaną funkcję dynamicznych palet tonalnych kolorów .

Ruch

Płynny ruch sprawia, że ​​urządzenia sprawiają wrażenie nowoczesnych i luksusowych. Aby zbudować i utrzymać zaufanie i satysfakcję programistów, przewijanie i tętnienie to dwa kluczowe elementy płynnego ruchu, które muszą wyglądać i czuć się spójnie.

Korzystanie z funkcji overscroll w systemie operacyjnym

Android 12 oferuje bardziej responsywny, dynamiczny ruch przewijania w formie rozciągania widoku, który jest wyświetlany, gdy użytkownik próbuje przewinąć poza krawędź listy. Przykład jest pokazany poniżej:

Materiał, który przewijasz

Rysunek 2. Efekt przewijania w Androidzie 12, jak pokazano w Ustawieniach

Aby zachować spójność programistów, upewnij się, że ogólny efekt przesunięcia na Twoich urządzeniach jest podobny do następującego:

  • Na urządzeniach, które zwracają wartość true dla ActivityManager.isHighEndGfx() , efektem przewijania jest nieliniowe rozciąganie ekranu (jak pokazano powyżej).

  • W urządzeniach o niższej wydajności efekt rozciągania jest uproszczony do rozciągania liniowego (w celu zmniejszenia obciążenia systemu).

Korzystanie z overscroll w aplikacjach własnych

Podczas korzystania z widoków niestandardowych może być konieczne dostosowanie niektórych aplikacji i interfejsu użytkownika systemu, które korzystają z efektu rozciągania.

  • Aby obsługiwać przewijanie rozciągające, zaktualizuj do najnowszych bibliotek:

    • androidx.recyclerview:recyclerview:1.3.0-alpha01 dla RecyclerView
    • androidx.core:core:1.7.0-alpha01 dla NestedScrollView i EdgeEffectCompat
    • androidx.viewpager:viewpager:1.1-alpha01 dla ViewPager
  • W przypadku niestandardowych układów korzystających z EdgeEffect należy wziąć pod uwagę następujące zmiany UX:

    • Dzięki funkcji rozciągania overscroll użytkownicy nie powinni wchodzić w interakcję z zawartością układu podczas jego rozciągania. Użytkownicy powinni manipulować jedynie samym odcinkiem, a nie mieć możliwości np. wciśnięcia przycisku w treści.

    • Gdy użytkownicy dotkną treści podczas trwania animacji EdgeEffect , powinni przechwycić animację i mieć możliwość manipulowania jej rozciąganiem. Bieżąca wartość ściągania jest dostępna z EdgeEffectCompat.getDistance() .

    • Aby manipulować wartością ściągania i zwracać zużytą ilość, użyj onPullDistance() . Umożliwia to programistom płynne przejście od rozciągania do przewijania, gdy palec przesuwa zawartość poza pozycję początkową.

    • Jeśli podczas pracy z przewijaniem zagnieżdżonym treść jest rozciągnięta, rozciągnięcie powinno zająć ruch dotykowy przed zagnieżdżoną treścią, w przeciwnym razie zagnieżdżenie może przewijać się, gdy palec zmieni kierunek, zamiast zwolnić rozciągnięcie.

Aby uzyskać szczegółowe informacje na temat przewijania, zobacz Animacja gestu przewijania .

Korzystanie z funkcji Ripple (opinia dotykowa) w systemie operacyjnym

W Androidzie 12 zastosowano bardziej miękkie, subtelne tętnienie dotyku, które zapewnia użytkownikom informację zwrotną po dotknięciu.

Materiał, który falujesz

Rysunek 3. Efekt tętnienia w Androidzie 12 z delikatniejszą animacją wypełnienia

Aby zapewnić programistom przewidywalność i zapewnić wygodę użytkownikom, upewnij się, że efekt tętnienia na Twoich urządzeniach jest podobny do pokazanego powyżej. Chociaż nie musisz wykonywać żadnych konkretnych kroków integracji, aby obsługiwać efekty tętnienia, powinieneś przetestować efekt na swoich urządzeniach, aby sprawdzić, czy w implementacji nie pojawiły się niezamierzone regresje.

Widżety

Widżety to kluczowe elementy urządzenia z systemem Android. Android 12 zawiera nowe interfejsy API i możliwości API, które powinni obsługiwać wszyscy producenci OEM.

Dodatkowe zasoby

Użycie kolorów SysUI

(akcent1 = A1, akcent2 = A2, akcent3 = A3, neutralny1 = N1, neutralny2 = N2)

Materiał, którego używasz do kolorowania

Rysunek 4. Dynamiczne użycie kolorów w interfejsie użytkownika systemu

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

W nadchodzącej wersji Material będzie aktualizował swoje atrybuty motywu, tworząc role kolorów używane do nadawania koloru określonym widokom.

Rola koloru Atrybut motywu Androida Lekki motyw
Dynamiczny kolor
Ciemny schemat
Dynamiczny kolor
Podstawowy kolorPodstawowy system_accent1_600 system_accent1_200
Na stronie głównej colorOnPrimary system_accent1_0 system_accent1_800
Wtórny kolor wtórny system_accent2_600 system_accent2_200
Na szkole średniej colorOnSecondary system_akcent2_0 system_accent2_800
Błąd błąd koloru Nie dotyczy (czerwony_600) Nie dotyczy (czerwony_200)
W przypadku błędu błąd koloru Nie dotyczy (biały) Nie dotyczy (czerwony_900)
Tło Android:kolorTła system_neutralny1_10 system_neutralny1_900
Na Tle kolor na tle system_neutralny1_900 system_neutralny1_100
Powierzchnia kolorPowierzchnia system_neutralny1_10 system_neutralny1_900
Na powierzchni kolorNa powierzchni system_neutralny1_900 system_neutralny1_100

Materiał będzie aktualizował swoje atrybuty stanów za pomocą następujących wskazówek:

Rola koloru Atrybut motywu Androida Lekki motyw
Dynamiczny kolor
Ciemny schemat
Dynamiczny kolor
Treść stanu pierwotnego colorPrimaryStateContent system_accent1_700 system_accent1_200
Podstawowa warstwa stanu colorPrimaryStateLayer system_accent1_600 system_accent1_300
Treść stanu wtórnego colorSecondaryStateContent system_accent2_700 system_accent2_200
Warstwa stanu wtórnego colorSecondaryStateLayer system_accent2_600 system_accent2_300
O treści stanu pierwotnego colorOnPrimaryStateContent system_accent1_0 system_accent1_800
Na podstawowej warstwie stanu colorOnPrimaryStateLayer system_accent1_900 system_accent1_800
O treści stanu wtórnego colorOnSecondaryStateContent system_akcent2_0 system_accent2_800
Na dodatkowej warstwie stanu colorOnSecondaryStateLayer system_accent2_900 system_accent2_800
Na podstawowej zawartości stanu kontenera colorOnPrimaryContainerStateContent system_accent1_900 system_accent1_900
Na podstawowej warstwie stanu kontenera colorOnPrimaryContainerStateLayer system_accent1_900 system_accent1_900
Na zawartości wtórnego stanu kontenera colorOnSecondaryContainerStateContent system_accent2_900 system_accent2_900
Na dodatkowej warstwie stanu kontenera colorOnSecondaryContainerStateLayer system_accent2_900 system_accent2_900
O zawartości trzeciorzędnego stanu kontenera colorOnTertiaryContainerStateContent system_accent3_900 system_accent3_900
Na trzeciorzędnej warstwie stanu kontenera colorOnTertiaryContainerStateLayer system_accent3_900 system_accent3_900
Treść stanu powierzchni colorOnSurfaceStateContent system_neutralny1_900 system_neutralny1_100
Na warstwie stanu powierzchni colorOnSurfaceStateLayer system_neutralny1_900 system_neutralny1_100
Zawartość stanu wariantu powierzchni colorOnSurfaceVariantStateContent system_neutralny2_700 system_neutralny2_200
Na warstwie stanu wariantu powierzchni colorOnSurfaceVariantStateLayer system_neutralny2_700 system_neutralny2_200
Treść stanu błędu colorErrorStateContent czerwony800 czerwony200

Często zadawane pytania

Ekstrakcja koloru

Czy po zmianie tapety przez użytkownika ekstrakcja kolorów odbywa się automatycznie, czy też trzeba ją skądś uruchomić?

W przypadku aktualizacji Androida 12 ekstrakcja kolorów tapet jest domyślnie włączona .

ThemeOverlayController.java wyzwala logikę za pomocą ThemeOverlayController#mOnColorsChangedListener i WallpaperManager#onWallpaperColorsChanged .

Czy w przypadku tapet na żywo lub tapet wideo możemy wiedzieć, kiedy ekstrakcja kolorów pobiera kolor z ekranu? Niektórzy użytkownicy mogą chcieć kolorów z ostatniej klatki, ponieważ jest ona wyświetlana najczęściej.

Ekstrakcja kolorów jest uruchamiana, gdy użytkownik ustawi tapetę lub po wyłączeniu i włączeniu zasilania ekranu (w odpowiedzi na WallpaperEngine#notifyColorsChanged ). Ostatnie zdarzenie WallpaperColors (z tapety na żywo) jest stosowane po wyłączeniu i ponownym włączeniu ekranu przez użytkownika.

Selektor motywów/tapet

Jak włączyć selektor motywów, aby wyświetlał użytkownikom wiele kolorów źródłowych niż kolor o najwyższej częstotliwości? Czy istnieje sposób na uzyskanie tych kolorów z logiki ekstrakcji?

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

Istnieje funkcja nazw pikseli jako ikona tematyczna . Czy jest on zawarty w trzech udostępnionych łatkach? Jak producenci OEM mogą to wdrożyć?

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

Czy istnieje sposób korzystania z aplikacji Google Wallpaper z włączonymi funkcjami wyodrębniania i zaznaczania kolorów?

Tak. Funkcje można wdrożyć w najnowszej wersji aplikacji Google Wallpaper, wykonując kroki integracji opisane wcześniej na tej stronie.

Aby uzyskać więcej informacji, skontaktuj się ze swoim TAM-em.

Czy Google może udostępnić aplikację lub kod źródłowy, aby producenci OEM mogli zaimplementować własną wersję dynamicznego podglądu kolorów w menu ustawień, która wygląda podobnie do sekcji podglądu wyświetlanej w aplikacji Google do wybierania tapet?

Główne klasy renderujące podgląd to WallpaperPicker2 i Launcher3 .

Ekran podglądu tapety to WallpaperSectionController .

Jak zaimplementować podgląd po zmianie koloru, jak pokazano w aplikacji Google Wallpaper?

Aplikacja selektora tapet oczekuje, że ContentProvider będzie dostępny w programie uruchamiającym (posiada go program uruchamiający oparty na programie Launcher3 ). Podgląd jest udostępniany przez GridCustomizationsProvider w programie Launcher, do którego należy się odwołać w metadanych głównego działania programu Launcher, aby aplikacja do tapet i stylu mogła go odczytać. Wszystko to jest zaimplementowane w Launcherze3 AOSP i jest dostępne dla producentów OEM.