Adaptacyjne ikony

ikonę adaptacyjną, AdaptiveIconDrawable mogą wyświetlać się różnie w zależności od możliwości urządzenia i użytkownika tematyczne. Ikony adaptacyjne są używane głównie przez program uruchamiający na ekranie głównym. Można ich też używać w skrótach, aplikacji Ustawienia, oknach udostępniania oraz na ekranie przeglądu. Adaptacyjne ikony są używane na wszystkich urządzeniach z Androidem.

W przeciwieństwie do bitmapy , ikony adaptacyjne do różnych zastosowań:

  • Różne kształty: ikona adaptacyjna może mieć różne kształty. na różnych modelach urządzeń. Na przykład może to być okrągły kształt. na jednym urządzeniu OEM i wyświetlać wir (kształt od kwadratu do okrąg) na innym urządzeniu. Każdy OEM musi dostarczyć maskę, która system wykorzystuje do renderowania wszystkich ikon adaptacyjnych o tym samym kształcie.

    GIF przedstawiający powtarzającą się animację tej samej przykładowej ikony Androida kształtów w zależności od użytej maski: koło, a następnie dwa różne rodzaje wiewiórek
    Rysunek 1. Ikony adaptacyjne obsługują różne masek, które różnią się zależnie od urządzenia.

  • Efekty wizualne: ikona adaptacyjna obsługuje różne angażujące elementy wizualne efekty, które wyświetlają się, gdy użytkownik umieści lub przesunie ikonę po domu; ekranu.

    GIF przedstawiający dwie przykładowe ikony Androida w kształcie koła jest animowany, aby pokazać odpowiedź użytkownika. Pierwsza ikona przedstawia logo Androida. kołysząc się w lewo, a potem w prawo, a potem w górę i w dół wewnątrz okręgu. Druga rozwija się i ponownie zwija.
    Rysunek 2. Przykłady efektów wizualnych wyświetlanych przez ikonę adaptacyjną.
    .
    .

  • Tematyki użytkowników: od Androida 13 (poziom interfejsu API 33) użytkownicy mogą korzystać z motywów ich adaptacyjnych ikon. Jeśli użytkownik włączy ikony aplikacji z motywem, aktywując Ikony z motywem są dostępne w ustawieniach systemowych (program uruchamiający obsługuje tę opcję) system wyświetla obraz w kolorze wybranej przez użytkownika tapety motyw, aby określić kolor odcienia.

    Obraz przedstawiający przykłady 3 urządzeń z Androidem, na każdym z nich różne motywy użytkownika z różnymi odcieniami. Na pierwszym pokazujemy tapetę ciemne odcienie; drugi – tapeta w złotym odcieniu; trzeci pokazuje Jasnoszara tapeta z niebieskawymi odcieniami. W każdym przykładzie parametr ikony odziedziczyły odcień tapety i idealnie się wtapiały.
    Rysunek 3. Ikony adaptacyjne dziedziczone z tagów tapety i motywy.

    W tych sytuacjach na ekranie głównym nie wyświetlają się i zamiast niej wyświetla adaptacyjną lub standardową ikonę aplikacji:

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

Projektowanie adaptacyjnych ikon

Aby mieć pewność, że ikona adaptacyjna będzie obsługiwać różne kształty, efekty wizualne dla użytkowników, projekt musi spełniać następujące wymagania:

  • W przypadku wersji kolorystycznej ikony musisz dodać 2 warstwy: jedną pierwszego planu, a drugiego w tle. Warstwy mogą być wektorami lub mapy bitowe, ale preferowane są wektory.

    Obraz przedstawiający przykładową warstwę na pierwszym planie (obraz po lewej stronie) warstwa tła (obraz po prawej stronie). Na pierwszym planie widać 16-stronną ikonę przykładowe logo Androida wyśrodkowane w bezpiecznej strefie 66 x 66. Bezpieczna strefa to wyśrodkowany w kontenerze 108 x 108. Tło jest takie samo dla bezpiecznego obszaru i kontenera, ale tylko dla bez logo.
    Rysunek 4. Ikony adaptacyjne zdefiniowane na pierwszym planie i warstwy tła. Przedstawiona jest bezpieczna strefa 66 x 66, który nigdy nie jest przycinany przez maską w kształcie zdefiniowaną przez OEM.
    .
    .
    Obraz pokazujący ikonę z poprzedniego obrazu nałożonego na okrągłą maskę.
    Rysunek 5. Na pierwszym planie warstwy tła wyglądają po założeniu okrągłej maski.

  • Jeśli chcesz, aby użytkownicy mogli dostosowywać motywy ikon aplikacji, utwórz 1 warstwę dla: w wersji monochromatycznej.

    Ilustracja pokazująca przykładową warstwę monochromatyczną ikony (obraz po lewej stronie) i podgląd kolorów (obraz po prawej stronie). Warstwa monochromatyczna pokazuje 16-stronny ikona przykładowego logo Androida wyśrodkowanego w bezpiecznej strefie 66 x 66. Sejf jest wyśrodkowana wewnątrz kontenera 108 x 108. Podglądy kolorów pokazują ta warstwa jest wyświetlana po zastosowaniu do motywów użytkownika o różnych kolorach (pomarańczowy, różowym, żółtym i zielonym).
    Rysunek 6. Monochromatyczna warstwa ikon (po lewej) z podglądów 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 tła cienie wokół obrysu ikony.

  • Użyj logo o wymiarach co najmniej 48 x 48 dp. Nie może przekraczać 66 x 66 dp, ponieważ wewnętrzny obszar 66 x 66 dp ikony jest widoczny w objętym maskowaniu widoczny obszar.

Zewnętrzne 18 dp po każdej z 4 stron warstwy jest zarezerwowane dla: i tworzyć efekty wizualne, takie jak paralaksa czy pulsowanie.

Więcej informacji o tworzeniu ikon adaptacyjnych w Android Studio znajdziesz w naszej aplikacji na Androida ikona Figma lub dokumentacja Android Studio dotycząca tworzenia programu uruchamiającego . Oprócz tego: przeczytaj post na blogu Designing Adaptive (Projektowanie adaptacyjne) Ikony ,

Dodaj ikonę adaptacyjną do aplikacji

Ikony adaptacyjne, tak jak ikony nieadaptacyjne, określa się przy użyciu Atrybut android:icon w aplikacji pliku manifestu.

Programy uruchamiające reprezentują opcjonalny atrybut android:roundIcon. z okrągłymi ikonami i mogą być przydatne, jeśli ikona aplikacji zawiera okrągłe tło jako główny element projektu. Programy uruchamiające są wymagane, do generowania ikon aplikacji przez zastosowanie okrągłej maski do android:roundIcon. w celu optymalizacji wyglądu ikony aplikacji na przykład lekko powiększyć logo i upewnić się, że po przycięciu okrągłe tło jest pełne spadu.

Ten fragment kodu ilustruje oba te atrybuty, ale większość aplikacji określ tylko android:icon:

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

Następnie zapisz ikonę adaptacyjną w usłudze res/mipmap-anydpi-v26/ic_launcher.xml. Używaj elementu <adaptive-icon> definiującego pierwszy plan, tło monochromatycznych zasobów warstw. <foreground>, Elementy wewnętrzne <background> i <monochrome> obsługują oba te elementy wektorowych i bitmapowych.

Poniższy przykład pokazuje, jak zdefiniować wartości <foreground>, <background> i Elementy (<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" />

    // 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ż zdefiniować jako elementy, wstawiając je w Elementy <foreground>, <background> i <monochrome>. Poniżej fragment kodu zawiera przykładowy element rysowalny 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 efekty wizualne do skrótów, standardowych 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 funkcję createWithAdaptiveBitmap() podczas ich tworzenia.

Więcej informacji o implementowaniu ikon adaptacyjnych znajdziesz w sekcji Implementowanie ikon adaptacyjnych Adaptacyjne Ikony. Więcej informacji o skrótach znajdziesz w sekcji Skróty do aplikacji .

Dodatkowe materiały

W poniższych zasobach znajdziesz dodatkowe informacje na temat projektowania i wdrożyć ikony adaptacyjne.