Android adaptive icons: warstwy, safe zone i instalacja

Launcher Androida może przyciąć tę samą ikonę aplikacji do różnych kształtów. Logo, które wygląda dobrze w kwadracie, może stracić narożniki w kole. Warto uwzględnić to w projekcie przed eksportem wszystkich gęstości.

Pierwszy plan, tło i bezpieczny obszar

Ikona adaptacyjna składa się z pierwszego planu i tła. Android definiuje warstwę 108 × 108 dp oraz centralny bezpieczny obszar o szerokości 66 dp. Umieść w nim najważniejszą część znaku, a tło rozciągnij do krawędzi. Nie zapisuj zaokrąglonego obrysu w grafice źródłowej. Te wymiary opisują warstwę adaptacyjną, a nie rozmiar ikony na ekranie głównym. Zobacz specyfikację ikon adaptacyjnych Androida.

Siatka do pobrania służy jako warstwa pomocnicza. Umieść ją nad grafiką w edytorze wektorowym, wyrównaj obszary robocze i ukryj siatkę przed eksportem. Przerywany kwadrat oznacza obszar 72 dp, a koło — zachowawczy obszar bezpieczny. Prostokąt obejmujący safe zone nie oznacza, że jego narożniki są dobrym miejscem na ważne detale.

Wygeneruj paczkę Android

1. Otwórz Generator Ikon od Fox'a i wybierz tekst, clipart lub własną grafikę z przezroczystością.
2. Dodaj format Android i wybierz jego podgląd.
3. Ustaw kolor tła. Zmniejsz grafikę, aż najważniejsze elementy będą widoczne w podglądach koła i squircle.
4. Obok przycisku Eksport wybierz Tylko ten projekt, pobierz ZIP dla Androida i rozpakuj go. Opcja Wszystkie projekty eksportuje wszystkie dodane formaty; jeśli jest ich kilka, znajdziesz pliki Androida w katalogu android/ zbiorczego ZIP-a.

Generator tworzy starsze warianty PNG i osobne zasoby pierwszego planu ikony adaptacyjnej. Przy domyślnej nazwie pliku archiwum zawiera:

res/
  mipmap-mdpi/ … mipmap-xxxhdpi/
  mipmap-anydpi-v26/ic_launcher.xml
  mipmap-anydpi-v26/ic_launcher_round.xml
  values/ic_launcher_background.xml
README.txt

Dodaj ikony bez usuwania istniejących zasobów

Scal zawartość res/ z src/main/res/ modułu aplikacji. Sprawdź konflikty zamiast zastępować cały katalog: znajdują się w nim również layouty, teksty i inne zasoby. W istniejącym elemencie application ustaw:

android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"

Nazwy odpowiadają domyślnym ustawieniom eksportu. Jeśli wybierzesz inną nazwę, użyj odwołań z wygenerowanego README. Kopiuj pliki XML i PNG razem, zachowując zgodność nazw.

Sprawdź zainstalowaną aplikację

Sprawdź aplikację z więcej niż jednym kształtem ikony launchera. Jeśli znak jest przycięty, zmień skalę zamiast dodawać zaokrągloną ramkę. Jeśli nadal widzisz starą ikonę, sprawdź manifest i wariant kompilacji. Osobny flavor może dostarczać własne zasoby.

Kolory dopasowane do tapety opisuje poradnik ikon tematycznych. Symbol w pasku stanu wymaga innego eksportu: zobacz ikony powiadomień.

Koło bezpiecznego obszaru w podglądzie

W panelu Kompozycja włącz Koło bezpiecznego obszaru. Suwakiem Średnica koła ustaw wartość od 20% do 100% krótszego boku ikony; domyślnie jest to 80%. Dopasuj skalę i położenie grafiki, obserwując jej odstęp od koła.

Nakładka służy wyłącznie do podglądu — nie trafia do PNG ani ZIP-a. Jej ustawienia są zapamiętywane w tej przeglądarce, ale nie są częścią udostępnianego projektu. Koło pomaga ocenić odstępy w podglądzie; jego procentowa średnica nie jest wymiarem warstwy adaptacyjnej w dp. Porównuj także maski launchera i siatkę opisaną wyżej.