Ikony adaptacyjne

Ikona adaptacyjna, czyli AdaptiveIconDrawable, może być wyświetlana w różny sposób w zależności od możliwości urządzenia i motywu użytkownika. Ikony adaptacyjne są używane głównie przez program uruchamiający na ekranie głównym, ale mogą być też używane w skrótach, aplikacji Ustawienia, oknach udostępniania i ekranie podglądu. Ikony adaptacyjne są używane na wszystkich urządzeniach z Androidem.

W przeciwieństwie do obrazów bitmapowych ikony adaptacyjne mogą dostosowywać się do różnych przypadków użycia:

  • Różne kształty: ikona adaptacyjna może wyświetlać różne kształty na różnych modelach urządzeń. Na przykład na jednym urządzeniu OEM może wyświetlać okrąg, a na innym – kwadrat zaokrąglony (kształt pośredni między kwadratem a okręgiem). Każdy producent OEM urządzenia musi udostępnić maskę, której system używa do renderowania wszystkich ikon adaptacyjnych w tym samym kształcie.

    Animacja GIF pokazująca powtarzającą się animację tej samej przykładowej ikony Androida, która ma różne kształty w zależności od użytej maski – najpierw okrąg, a potem 2 różne rodzaje zaokrąglonych kwadrató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 atrakcyjne efekty wizualne, które wyświetlają się, gdy użytkownicy umieszczają ikonę na ekranie głównym lub przesuwają ją po nim.

    Animowany GIF przedstawiający przykłady 2 okrągłych ikon próbnych na Androidzie, które reagują na działania użytkownika. Pierwsza ikona przedstawia logo Androida kołyszące się w kółku na boki, a potem w górę i w dół. Druga ikona powiększa się, a potem ponownie zmniejsza.
    Rysunek 2. Przykłady efektów wizualnych wyświetlanych przez ikonę adaptacyjną.

  • Motywy użytkownika: od Androida 13 (API na poziomie 33) użytkownicy mogą stosować motywy do 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 użyje kolorystyki wybranej tapety i motywu użytkownika, aby określić kolor odcienia.

    Obraz przedstawiający 3 przykłady urządzeń z Androidem, z których każde ma inny motyw użytkownika z różnymi odcieniami: pierwsze urządzenie ma tapetę z ciemnym odcieniem, drugie – tapetę w złotym odcieniu, a trzecie – tapetę w jasnoszarym odcieniu z niebieskawymi tonami. W każdym z tych przykładów ikony odziedziczyły odcień tapety i idealnie się z nią komponują.
    Rysunek 3. Ikony adaptacyjne dziedziczące tapetę i motywy użytkownika.

    W tych sytuacjach na ekranie głównym nie jest wyświetlana ikona aplikacji z motywem, tylko ikona adaptacyjna lub standardowa:

    • Jeśli użytkownik nie włączy ikon aplikacji z motywem.
    • Jeśli aplikacja nie ma monochromatycznej ikony.
    • Jeśli program uruchamiający nie obsługuje ikon aplikacji z motywem.

Projektowanie ikon adaptacyjnych

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

  • W przypadku kolorowej wersji ikony musisz podać 2 warstwy: jedną dla pierwszego planu i jedną dla tła. Warstwy mogą być wektorowe lub bitmapowe, ale preferowane są wektorowe.

    Ilustracja przedstawiająca przykład warstwy pierwszego planu (obraz po lewej) i warstwy tła (obraz po prawej). Na pierwszym planie znajduje się 16-kątna ikona przykładowego logo Androida wyśrodkowana w bezpiecznej strefie o wymiarach 66 x 66. Bezpieczny obszar jest wyśrodkowany w kontenerze o wymiarach 108 x 108. W tle widać te same zmierzone wymiary bezpiecznego obszaru i kontenera, ale tylko niebieskie tło bez logo.
    Rysunek 4. Ikony adaptacyjne zdefiniowane za pomocą warstw pierwszego planu i tła. Przedstawiona bezpieczna strefa o wymiarach 66 x 66 to obszar, który nigdy nie jest przycinany przez maskę o określonym kształcie zdefiniowaną przez producenta OEM.
    Obraz przedstawiający ikonę z poprzedniego obrazu nałożoną na okrągłą maskę.
    Rysunek 5. Przykład pokazujący, jak warstwy pierwszego planu i tła wyglądają razem po zastosowaniu okrągłej maski.

  • Jeśli chcesz, aby użytkownicy mogli stosować motywy do ikon aplikacji, udostępnij jedną warstwę dla monochromatycznej wersji ikony.

    Obraz przedstawiający przykład monochromatycznej warstwy ikony (po lewej) i podglądów kolorów (po prawej). Monochromatyczna warstwa przedstawia 16-boką ikonę przykładowego logo Androida wyśrodkowaną w bezpiecznej strefie o wymiarach 66 x 66 pikseli. Bezpieczny obszar jest wyśrodkowany w kontenerze o wymiarach 108 x 108. Podglądy kolorów pokazują, jak ta warstwa będzie wyglądać po zastosowaniu do motywów użytkownika w różnych kolorach (pomarańczowym, różowym, żółtym i zielonym).
    Rysunek 6. Monochromatyczna warstwa ikony (z lewej) z przykładami podglądu kolorów (z prawej).

  • Ustaw rozmiar wszystkich warstw na 108 x 108 dp.

  • Używaj ikon o wyraźnych krawędziach. Warstwy nie mogą mieć masek ani cieni tła wokół konturu ikony.

  • Używaj logo o wymiarach co najmniej 48 x 48 dp. Nie może przekraczać 66 × 66 dp, ponieważ wewnętrzna część ikony o wymiarach 66 × 66 dp jest widoczna w zamaskowanym obszarze.

Zewnętrzne 18 dp na każdym z 4 boków warstw jest zarezerwowane na maskowanie i tworzenie efektów wizualnych, takich jak paralaksa czy pulsowanie.

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

Dodawanie ikony adaptacyjnej do aplikacji

Ikony adaptacyjne, podobnie jak ikony nieadaptacyjne, są określane za pomocą atrybutu android:icon w pliku manifestu aplikacji.

Opcjonalny atrybut android:roundIcon jest używany przez programy uruchamiające, które reprezentują aplikacje z okrągłymi ikonami. Może być przydatny, jeśli ikona aplikacji zawiera okrągłe tło jako kluczowy element projektu. Takie programy uruchamiające muszą generować ikony aplikacji, stosując okrągłą maskę do android:roundIcon. Ta gwarancja może umożliwić Ci optymalizację wyglądu ikony aplikacji, np. poprzez nieznaczne powiększenie logo i upewnienie się, że po przycięciu okrągłe tło będzie wypełniać cały obszar.

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 zapisz ikonę adaptacyjną w folderze res/mipmap-anydpi-v26/ic_launcher.xml. Użyj elementu <adaptive-icon>, aby zdefiniować zasoby warstwy pierwszego planu, tła i monochromatycznej dla ikon. Elementy wewnętrzne <foreground>, <background> i <monochrome> obsługują obrazy wektorowe i bitmapowe.

Poniższy przykład pokazuje, jak zdefiniować elementy <foreground>, <background> i <monochrome> w elemencie <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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

Warstwy pierwszego planu i monochromatyczna używają tego samego elementu rysowalnego. W razie potrzeby możesz jednak utworzyć osobne elementy rysowalne dla każdej warstwy.

Możesz też zdefiniować elementy rysowalne jako elementy, wstawiając je w elementach <foreground>, <background> i <monochrome>. Poniższy fragment kodu pokazuje, jak to zrobić w przypadku rysunku 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ć tę samą maskę i efekt wizualny do skrótów co w przypadku zwykłych ikon adaptacyjnych, użyj jednej z tych metod:

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

Więcej informacji o wdrażaniu ikon adaptacyjnych znajdziesz w artykule Implementing Adaptive Icons (Implementowanie ikon adaptacyjnych). Więcej informacji o skrótach znajdziesz w tym artykule.

Dodatkowe materiały

Więcej informacji o projektowaniu i wdrażaniu ikon adaptacyjnych znajdziesz w tych materiałach.