Ikony adaptacyjne

Ikona adaptacyjna, czyli AdaptiveIconDrawable, może wyświetlać się inaczej w zależności od możliwości urządzenia i motywu wybranego przez użytkownika. Ikony adaptacyjne są używane głównie przez program uruchamiający na ekranie głównym, ale można ich też używać w skrótach, aplikacji Ustawienia, oknach udostępniania i na ekranie przeglądu. Ikony adaptacyjne są używane na wszystkich urządzeniach z Androidem.

W przeciwieństwie do obrazów bitmapowych ikony adaptacyjne można dostosowywać do różnych zastosowań:

• 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ć się okrąg, a na innym – kwadrat z zaokrąglonymi rogami. Każdy producent OEM urządzenia musi udostępnić maskę, której system używa do renderowania wszystkich ikon adaptacyjnych o tym samym kształcie.

  

  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ą lub przenoszą ikonę na ekranie głównym.

  

  Rysunek 2. Przykłady efektów wizualnych wyświetlanych przez ikonę adaptacyjną.

  Uwaga: animowane efekty wizualne są generowane przez obsługiwane programy uruchamiające. Efekty wizualne mogą się różnić w zależności od programu uruchamiającego.

• Motywy użytkownika: od Androida 13 (API na poziomie 33) użytkownicy mogą dostosowywać motywy ikon adaptacyjnych. Jeśli użytkownik włączy w ustawieniach systemowych ikony aplikacji z motywem, a program uruchamiający obsługuje tę funkcję, system użyje kolorystyki wybranej przez użytkownika tapety i motywu, aby określić kolor ikon aplikacji, które mają warstwę monochrome w swojej ikonie adaptacyjnej. Począwszy od Androida 16 QPR 2, Android automatycznie dostosowuje motyw ikon aplikacji, które nie mają własnych.

  

  Rysunek 3. Ikony adaptacyjne dziedziczące styl tapety i motywów użytkownika.

  W tych sytuacjach na ekranie głównym nie wyświetla się 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, a urządzenie użytkownika działa na Androidzie w wersji starszej niż Android 16 QPR2.
  • 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ć wektorami lub bitmapami, ale preferowane są wektory.

  

  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ę kształtu zdefiniowaną przez producenta OEM.

  

  Rysunek 5. Przykład wyglądu warstw pierwszego planu i tła z zastosowaną okrągłą maską.

• Jeśli chcesz obsługiwać motywy użytkownika w ikonach aplikacji, podaj pojedynczą warstwę monochromatycznej wersji ikony.

  

  Rysunek 6. Warstwa ikony monochromatycznej (po lewej) z przykładowymi podglądami kolorów (po 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żyj logo o wymiarach co najmniej 48 x 48 dp. Nie może przekraczać 66 × 66 dp, ponieważ wewnętrzny obszar ikony o wymiarach 66 × 66 dp jest wyświetlany w zamaskowanym widocznym obszarze.

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

Uwaga: jeśli nie zaktualizujesz ikony programu uruchamiającego, dodając do niej niezbędne warstwy, nie będzie ona wyglądać spójnie z innymi ikonami wyświetlanymi przez system ani nie będzie obsługiwać efektów wizualnych.

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

Dodawanie ikony adaptacyjnej do aplikacji

Ikony adaptacyjne, podobnie jak nieadaptacyjne, są określane za pomocą atrybutu android:icon w manifeście 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 główny 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 zoptymalizowanie wyglądu ikony aplikacji, na przykład przez nieznaczne powiększenie logo i upewnienie się, że po przycięciu okrągłe tło jest w pełni widoczne.

Poniższy fragment kodu ilustruje oba te atrybuty, ale większość aplikacji określa tylko 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 warstwy monochromatycznej dla ikon. Elementy wewnętrzne <foreground>, <background> i <monochrome> obsługują zarówno obrazy wektorowe, jak 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 obiekty rysowalne dla każdej warstwy.

Możesz też zdefiniować elementy rysowalne jako elementy, umieszczając je w elementach <foreground>, <background> i <monochrome>. Poniższy fragment kodu pokazuje, jak to zrobić za pomocą 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 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 wywołaj metodę createWithAdaptiveBitmap() podczas ich tworzenia.

Więcej informacji o wdrażaniu ikon adaptacyjnych znajdziesz w artykule Wdrażanie ikon adaptacyjnych. Więcej informacji o skrótach znajdziesz w artykule Omówienie skrótów do aplikacji.

Dodatkowe materiały

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

• Szablon strony społeczności Figma
• Informacje o ikonach adaptacyjnych na Androidzie
• Projektowanie ikon adaptacyjnych
• Implementowanie ikon adaptacyjnych
• Tworzenie ikon aplikacji w Android Studio
• Specyfikacja ikon używanych w Google Play