Adaptacyjne ikony

Ikona adaptacyjna (AdaptiveIconDrawable) może wyświetlać się różnie w zależności od możliwości urządzenia i motywu użytkownika. Ikony adaptacyjne są używane głównie w programie uruchamiającym na ekranie głównym, ale można ich też używać w skrótach, aplikacji Ustawienia, oknach udostępniania i ekranie przeglądu.

Ikona adaptacyjna może się dostosowywać do różnych zastosowań:

  • Różne kształty: ikona adaptacyjna może przybierać różne kształty na różnych modelach urządzeń. Na przykład na jednym urządzeniu OEM może wyświetlić się okrągły kształt, a na drugim – zaokrąglony kształt. Każdy producent oryginalnego urządzenia musi dostarczyć maskę, której system używa do renderowania wszystkich ikon adaptacyjnych o tym samym kształcie.

    GIF pokazujący powtarzającą się animację z tą samą przykładową ikoną Androida i różnymi kształtami w zależności od użytej maski – koło i 2 różne rodzaje zawijasów
    Rysunek 1. Ikony adaptacyjne obsługują różne maski, które różnią się w zależności od urządzenia.

  • Efekty wizualne: ikona adaptacyjna obsługuje różne ciekawe efekty wizualne, które pojawiają się, gdy użytkownik umieści lub przesuwa ikonę po ekranie głównym.

    GIF z 2 okrągłymi ikonami Androida, animowanymi, aby pokazać odpowiedź użytkownika. Pierwsza ikona przedstawia logo Androida wibrujące w lewo, a potem w prawo, a następnie w górę i w dół wewnątrz okręgu. Druga ikona rozwinie się, a potem znów się zmniejszy.
    Rysunek 2. Przykłady efektów wizualnych wyświetlanych przez ikonę adaptacji.

  • Tworzenie tematów użytkowników: od Androida 13 (poziom interfejsu API 33) użytkownicy mogą tworzyć motywy dostosowane do swoich ikon adaptacyjnych. Jeśli użytkownik włączy ikony aplikacji z motywem, włączając przełącznik Ikony z motywem w ustawieniach systemu, a program uruchamiający obsługuje tę funkcję, system określa kolor odcienia na podstawie kolorów wybranej przez niego tapety i motywu.

    Obraz przedstawiający 3 urządzenia z Androidem, z których każde ma inny motyw użytkownika w różnych odcieniach. Pierwszy z nich przedstawia tapetę w ciemnym odcieniu, drugi złoconą tapetę, a trzeci – tapetę w kolorze jasnoszarym z niebieskawą tapetą. W każdym przykładzie ikony mają zabarwienie tapety i idealnie dopasowują się do niej.
    Rysunek 3. Ikony adaptacyjne dziedziczone z tapety i motywów użytkownika.

W tych przypadkach na ekranie głównym nie pojawia się ikona aplikacji z motywem, tylko ikona aplikacji adaptacyjnej lub standardowej:

  • Jeśli użytkownik nie włączy tematycznych ikon aplikacji.
  • Jeśli aplikacja nie ma monochromatycznej ikony:
  • Jeśli launcher nie obsługuje tematycznych ikon aplikacji:

Projektowanie adaptacyjnych ikon

Aby ikona adaptacyjna obsługiwała różne kształty, efekty wizualne i motywy użytkowników, projekt musi spełniać te wymagania:

  • Musisz udostępnić dwie warstwy dla wersji kolorowej ikony: jedną dla pierwszego planu i jedną dla tła.

    Obraz przedstawiający przykładową warstwę na pierwszym planie (obraz po lewej stronie) i warstwę tła (obraz po prawej stronie). Na pierwszym planie znajduje się 16-boczna ikona przykładowego logo Androida wyśrodkowana w bezpiecznej strefie 66 x 66. Bezpieczna strefa znajduje się w kontenerze o wymiarach 108 × 108. Tło pokazuje te same zmierzone wymiary dla bezpiecznej strefy i kontenera, ale tylko niebieskie tło bez logo.
    Rysunek 4. Adaptacyjne ikony zdefiniowane za pomocą warstw na pierwszym planie i w tle. Pokazana bezpieczna strefa o wymiarach 66 x 66 to obszar, na którym nigdy nie jest przycinana maska w kształcie wyznaczona przez OEM.
    Obraz przedstawiający ikonę z poprzedniego obrazu nałożoną na okrągłą maskę.
    Rysunek 5. Przykład, jak warstwy pierwszego planu i tło wyglądają razem z zastosowaną okrągłą maską.

  • Jeśli chcesz obsługiwać personalizowanie ikon aplikacji przez użytkowników, udostępnij jedną warstwę dla wersji monochromatycznej ikony.

    Obraz przedstawiający przykład monochromatycznej warstwy ikony (obraz po lewej stronie) i podglądu kolorów (obraz po prawej stronie). Warstwa monochromatyczna przedstawia 16-boczną ikonę przykładowego logo Androida wyśrodkowaną w bezpiecznym obszarze 66 x 66. Strefa bezpieczna jest wyśrodkowana w kontenerze o wymiarach 108 x 108. Podglądy kolorów pokazują tę warstwę, gdy zastosowano do motywów użytkownika o różnych kolorach (pomarańczowy, różowy, żółty i zielony).
    Rysunek 6. Monochromatyczna warstwa ikon (po lewej) z przykładami podglądów kolorów (po prawej).

  • Rozmiar wszystkich warstw to 108 x 108 dp.

  • Używaj ikon z czystymi krawędziami. Wokół ikony nie mogą być maski ani cienie tła.

  • Użyj logo o rozmiarze co najmniej 48 x 48 dp. Nie może on przekraczać 66 x 66 dp, ponieważ wewnętrzny obszar 66 x 66 dp ikony pojawia się w zamaskowanym widocznym obszarze.

Zewnętrzne 18 dp po każdej z 4 stron warstw jest zarezerwowane na maskowanie i tworzenie efektów wizualnych, takich jak paralaksa lub pulsowanie.

Aby dowiedzieć się, jak tworzyć ikony adaptacyjne w Android Studio, zapoznaj się z szablonem ikony aplikacji na Androida Figma lub dokumentacją Android Studio dotyczącą tworzenia ikon programu uruchamiającego. Przeczytaj też post na blogu Projektowanie ikon adaptacyjnych.

Dodaj do aplikacji ikonę adaptacyjną

Aby dodać do aplikacji ikonę adaptacyjną, zaktualizuj atrybut android:icon w pliku manifestu aplikacji, aby określić rysowalny zasób. Możesz też zdefiniować zasób rysowalny ikony za pomocą atrybutu android:roundIcon, ale tylko wtedy, gdy potrzebujesz innego zasobu ikony w przypadku masek okrągłych (np. gdy promowanie marki opiera się na okrągłym kształcie).

Poniższy fragment kodu ilustruje oba te atrybuty, ale większość aplikacji określa tylko atrybut android:icon:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

Następnie w res/mipmap-anydpi-v26/ic_launcher.xml utwórz alternatywne, rysowalne zasoby w aplikacji, aby zapewnić zgodność wsteczną z Androidem 8.0 (poziom interfejsu API 26). Za pomocą elementu <adaptive-icon> możesz określać elementy rysowalne na potrzeby ikon na pierwszym planie, w tle i warstwy monochromatyczne. Elementy wewnętrzne <foreground>, <background> i <monochrome> obsługują atrybut android:drawable.

Poniższy przykład pokazuje, jak zdefiniować elementy <foreground>, <background> i <monochrome> w <adaptive-icon>:

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

Elementy rysowalne możesz też definiować jako elementy, umieszczając je w elementach <foreground>, <background> i <monochrome>. Poniższy fragment kodu pokazuje, jak można to zrobić przy użyciu elementu rysowalnego na pierwszym planie.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

Jeśli chcesz zastosować do skrótów tę samą maskę i efekt wizualny co zwykłe ikony adaptacyjne, użyj jednej z tych metod:

  • W przypadku skrótów statycznych użyj elementu <adaptive-icon>.
  • W przypadku skrótów dynamicznych wywołaj metodę createWithAdaptiveBitmap() podczas ich tworzenia.

Więcej informacji o wdrażaniu ikon adaptacyjnych znajdziesz w artykule o implementowaniu ikon adaptacyjnych. Więcej informacji o skrótach znajdziesz w omówieniu skrótów do aplikacji.

Dodatkowe materiały

Dodatkowe informacje o projektowaniu i implementowaniu ikon adaptacyjnych znajdziesz w materiałach poniżej.