Ikony adaptacyjne

Nagłówek ikon adaptacyjnych

Ikona adaptacyjna, czyli AdaptiveIconDrawable, może być wyświetlana 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 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 przyjmować różne kształty na różnych modelach urządzeń. Na przykład na jednym urządzeniu OEM może mieć kształt koła, a na innym – kwadratu z zaokrąglonymi rogami (kształt pośredni między kwadratem a kołem). Każdy producent OEM musi udostępnić maskę, której system używa do renderowania wszystkich ikon adaptacyjnych w tym samym kształcie.

    Animowany GIF pokazujący 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 są wyświetlane, gdy użytkownicy umieszczają lub przenoszą ikonę na ekranie głównym.

    GIF pokazujący przykłady 2 okrągłych ikon próbnych na Androidzie, animowanych w odpowiedzi na działanie użytkownika. Pierwsza ikona przedstawia logo Androida kołyszące się w lewo, w prawo, w górę i w dół wewnątrz okręgu. Druga ikona powiększa się, a potem ponownie zmniejsza.
    Rysunek 2. Przykłady efektów wizualnych wyświetlanych przez ikonę adaptacyjną.

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

    Przykład 3 urządzeń z Androidem, z których każde wyświetla inny motyw użytkownika z różnymi odcieniami: pierwsze urządzenie wyświetla 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 przypadkach ekran główny nie wyświetla ikony aplikacji z motywem, ale ikonę adaptacyjną lub standardową:

    • Jeśli użytkownik nie włączy ikon aplikacji z motywem.
    • Jeśli Twoja aplikacja nie ma monochromatycznej ikony, a urządzenie użytkownika działa w starszej wersji Androida niż Android 16 QPR 2.
    • 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, jej projekt musi spełniać te wymagania:

  • Musisz podać 2 warstwy dla kolorowej wersji ikony: jedną na pierwszym planie i jedną w tle. Warstwy mogą być wektorowe lub bitmapowe, ale preferowane są wektorowe.

    Przykład warstwy pierwszego planu (z lewej) i warstwy tła (z prawej). Na pierwszym planie znajduje się 16-stronna ikona przykładowego logo Androida wyśrodkowana w strefie bezpiecznej o wymiarach 66 x 66. Strefa bezpieczna jest wyśrodkowana w kontenerze o wymiarach 108 x 108. W tle widać te same zmierzone wymiary strefy bezpiecznej 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 dp to obszar, który nigdy nie jest przycinany przez maskę w kształcie zdefiniowaną przez producenta OEM.
    Przykład pokazujący ikonę z poprzedniego rysunku nałożoną na okrągłą maskę.
    Rysunek 5. Przykład tego, jak warstwy pierwszego planu i tła wyglądają razem z zastosowaną maską w kształcie koła.

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

    Przykład monochromatycznej warstwy ikony (z lewej) i podglądu kolorów (z prawej). Warstwa monochromatyczna przedstawia 16-boką ikonę przykładowego logo Androida wyśrodkowaną w strefie bezpiecznej o wymiarach 66 x 66. Bezpieczny obszar jest wyśrodkowany w kontenerze o wymiarach 108 x 108. Podglądy kolorów pokazują wyświetlanie tej warstwy po zastosowaniu do motywów użytkownika o różnych kolorach (pomarańczowego, różowego, żółtego i zielonego).
    Rysunek 6. Monochromatyczna warstwa ikony (po lewej) z przykładami podglądu kolorów (po prawej).

  • Ustaw rozmiar wszystkich warstw na 108 x 108 dp.

  • Używaj ikon z wyraźnymi krawędziami. Warstwy nie mogą mieć masek ani cieni w tle wokół konturu ikony.

  • Używaj logo o wymiarach co najmniej 48 x 48 dp. Nie może ono przekraczać 66 x 66 dp, ponieważ wewnętrzny obszar ikony o wymiarach 66 x 66 dp jest widoczny w zamaskowanym 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.

Aby dowiedzieć się, jak tworzyć ikony adaptacyjne w 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.

Dodawanie ikony adaptacyjnej do aplikacji

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

Opcjonalny atrybut android:roundIcon jest używany przez programy uruchamiające, które reprezentują aplikacje za pomocą okrągłych ikon. Może być przydatny, jeśli ikona aplikacji zawiera okrągłe tło jako podstawowy element projektu. Takie programy uruchamiające muszą generować ikony aplikacji, stosując okrągłą maskę do android:roundIcon. Dzięki temu możesz zoptymalizować wygląd ikony aplikacji, np. nieznacznie powiększając logo i upewniając się, że po przycięciu okrągłe tło będzie zajmować cały obszar.

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

Ten przykład pokazuje, jak zdefiniować <foreground>, <background> i <monochrome> wewnątrz <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 do elementów <foreground>, <background> i <monochrome>. Poniższy fragment kodu pokazuje, jak to zrobić w przypadku obiektu rysowalnego pierwszego planu.

<?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 do 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 implementowaniu ikon adaptacyjnych znajdziesz w artykule Implementing Adaptive Icons. Więcej informacji o skrótach znajdziesz w artykule Omówienie skrótów aplikacji.

Dodatkowe materiały

Więcej informacji o projektowaniu i implementowaniu ikon adaptacyjnych znajdziesz w tych materiałach:

Wstecz
Wdrażanie sprawdzonych metod korzystania ze skrótów
Dalej
Bąbelki