1. Wprowadzenie
Ostatnia aktualizacja: 4.08.2022 r.
Od Androida 13 użytkownicy mogą dostosowywać motywy adaptacyjnych ikon programu uruchamiającego. Dzięki tej funkcji ikony aplikacji w obsługiwanych programach uruchamiających na Androida są przyciemniane, aby przejmować kolorystykę wybranej przez użytkownika tapety i innych motywów.
Łatwo twórz wszystkie zasoby systemowe potrzebne do aplikacji na Androida, w tym nowe adaptacyjne ikony kolorowe.
Czego się nauczysz
- Poznasz różne typy ikon aplikacji i wskazówki dotyczące ich projektowania.
- Dowiesz się, jak używać szablonu programu uruchamiającego na Androida w Figmie.
- Dowiesz się, jak używać generatora zasobów w Android Studio.
- Dowiesz się, jak wyświetlać podgląd ikony programu uruchamiającego w emulatorze Android Studio.
Wymagania wstępne
- Podstawowa znajomość Figmy.
- Opcjonalnie: grafika ikony aplikacji (pierwszy plan, tło i monochromatyczna).
Czego potrzebujesz
- Konto Figma.
- Plik designlab Figma.
- Opcjonalnie: komputer z zainstalowanym Android Studio.
2. Rozpocznij
Konfiguracja
Aby rozpocząć, musisz uzyskać dostęp do pliku Figma z ikoną aplikacji na Androida.
Najpierw zaloguj się w Figmie lub utwórz konto.
Duplikowanie ze społeczności Figmy
Otwórz plik szablonu programu uruchamiającego na Androida lub wyszukaj czcionki ikon adaptacyjnych na Androida w społeczności Figmy. W prawym górnym rogu kliknij Pobierz kopię , aby skopiować plik do swoich plików.
Korzystanie z szablonu
Szablon ikony Androida składa się z 2 stron:
- Strona tytułowa zawiera krótkie omówienie odpowiednich pojęć i sposobu korzystania z szablonu.
- Strona szablonu zawiera wszystko, czego potrzebujesz do utworzenia wymaganych komponentów, podzielonych na 3 ramki (Kolor, Kształt, Sklep Play).
Uwaga: w panelu warstw po lewej stronie większość warstw i grup jest zablokowana. Powinny one pozostać zablokowane. (Grafikę możesz umieścić w odblokowanych grupach grafiki).
Zanim jednak zaczniemy tworzyć komponenty, przyjrzyjmy się, co będziemy tworzyć…
3. Ikony systemowe Androida
Ikony programu uruchamiającego
Ikony programu uruchamiającego, czyli ikony aplikacji, są ważną częścią procesu uruchamiania aplikacji. Ikony programu uruchamiającego pojawiają się na ekranie głównym jako punkt wejścia do aplikacji.
Kształt adaptacyjny
Ikona adaptacyjna, czyli AdaptiveIconDrawable, może wyświetlać się inaczej 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 można ich też używać w skrótach, aplikacji Ustawienia, oknach udostępniania i ekranie podglądu.
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ę w kształcie koła, a na innym – w kształcie kwadratu z zaokrąglonymi rogami. Każdy producent OEM musi udostępnić maskę, której system używa do renderowania wszystkich ikon adaptacyjnych w tym samym kształcie.
Możliwość dostosowania kształtu pozwala też systemowi stosować różne efekty animacji w interakcji z użytkownikiem.
Kolor adaptacyjny
Ikony adaptacyjne mogą teraz używać dynamicznego koloru, co pozwala na personalizację ikon aplikacji.
Jeśli użytkownik włączył ikony aplikacji z motywem (czyli włączył przełącznik Ikony z motywem w ustawieniach systemu) i program uruchamiający obsługuje tę funkcję, system używa kolorystyki wybranej przez użytkownika tapety i motywu do określenia koloru odcienia.
Podobnie jak ikony, które dostosowują się do kształtu, ikony z kolorem adaptacyjnym składają się z pierwszego planu i tła. Wystarczy podać monochromatyczny komponent ikony na pierwszym planie. System zajmie się tłem i kolorem, korzystając z wyodrębnionego schematu kolorów.
Tej samej monochromatycznej ikony możesz też używać jako ikony powiadomienia.
Starsza wersja
Ikony starszego typu należy uwzględnić, aby obsługiwać urządzenia z wcześniejszymi wersjami Androida lub urządzenia, które nie obsługują funkcji adaptacyjnych (wersje starsze niż 8.0).
Nie będą one mieć zasobów pierwszego planu i tła oraz mogą mieć dowolny kształt. Jeśli używasz podanego szablonu, gotowa grafika o kształcie adaptacyjnym zostanie wyeksportowana w rozmiarach niezbędnych dla ikony starszego typu.
Ikony powiadomień
Powiadomienie to wiadomość, którą Android wyświetla poza interfejsem aplikacji, aby przypominać użytkownikowi o czymś, informować go o komunikacji z innymi osobami lub przekazywać inne aktualne informacje z aplikacji. System wyświetla powiadomienia w różnych miejscach i formatach, np. jako ikonę na pasku stanu, bardziej szczegółowy wpis w panelu powiadomień, plakietkę na ikonie aplikacji oraz automatycznie na sparowanych urządzeniach do noszenia.
Grafika w Sklepie
Grafika, zrzuty ekranu, krótki opis i filmy pozwalają wyróżnić oraz wypromować aplikację w Google Play i innych kanałach marketingowych Google.
Ikona aplikacji nie zastępuje ikony programu uruchamiającego, ale powinna być jej wyraźniejszą wersją o wyższej rozdzielczości.
Podobnie jak w przypadku ikony programu uruchamiającego, grafika może wypełniać całą przestrzeń komponentu lub możesz zaprojektować i umieścić elementy graficzne, takie jak logo, na siatce linii pomocniczych.
Aby opublikować informacje o aplikacji, musisz dodać kwadratową ikonę aplikacji o wymiarach 512 x 512 pikseli. Jeśli używasz szablonu ikony aplikacji na Androida, jest on dostępny podczas eksportu za pomocą grafiki o kształcie adaptacyjnym.
4. Sprawdzone metody projektowania
Ikony programu uruchamiającego uruchamiają aplikację dla użytkownika. Jako punkt wejścia do aplikacji muszą być rozpoznawalne i czytelne. Oto kilka sprawdzonych metod, które pomogą Ci zapewnić te cechy w ikonie programu uruchamiającego.
Grafika powinna być prosta. Unikaj wielu warstw, efektów i tekstu. Te szczegóły będą niewidoczne lub trudne do zobaczenia w małych rozmiarach. 
Unikaj złożonych kształtów. Dotyczy to również logo. Jeśli to możliwe, użyj uproszczonego logo lub rozważ symbolikę, którą użytkownicy kojarzą z Twoją aplikacją. Czytelny i wyraźny kształt pomaga użytkownikom łatwo rozpoznawać aplikację w różnych kontekstach (kolor adaptacyjny i powiadomienia). 
Używaj siatki. Wykorzystaj siatkę lub linie pomocnicze, aby mieć pewność, że grafika na pierwszym planie będzie działać po przycięciu, w tym grafika z pełnym spadem. 
Zwróć uwagę na kontrast. W przypadku ikon o kształcie adaptacyjnym i ikon starszego typu upewnij się, że pierwszy plan i tło ikony mają czytelny kontrast. Unikaj stosowania mocnych cieni, które mogą być mylone z cieniami systemowymi. 
Grafika powinna znajdować się w bezpiecznych strefach. Komponenty na pierwszym planie powinny mieć wymiary 72 x 72 piksele (chyba że używasz pełnego spadu). Tła powinny mieć wymiary 108 x 108 pikseli. Uwaga: Ramka grafiki szablonu ikony jest większa niż 72 x 72 piksele, aby umożliwić tworzenie grafiki ikony. Rozmiar komponentów zostanie zmieniony, aby pasowały do specyfikacji.
Format wektorowy. Staraj się używać grafiki w formacie wektorowym (np. pliki SVG, AI, PDF i EPS) zamiast w formacie rastrowym (np. pliki PNG, JPG i GIF). Dzięki temu grafika będzie zgodna z nowszymi funkcjami i łatwiejsza do edycji. 
5. Ikony z kolorem adaptacyjnym i ikony powiadomień
Teraz możesz utworzyć własne ikony systemowe Androida.
- Znajdź plik Figma z ikonami aplikacji na Androida.
- W pliku znajdź ramkę Kolor adaptacyjny. W panelu warstw po lewej stronie znajdź Kolor adaptacyjny > Komponenty > grafika > Obszar grafiki ikony > Grafika ikony z motywem < dodaj ikonę. Jeśli masz gotową monochromatyczną ikonę, skopiuj ją tutaj, aby zastąpić przykładową ikonę Bugdroid, i przejdź do kroku 6.
- Jeśli nie masz monochromatycznej ikony, zacznij od logo lub ikony związanej z Twoją aplikacją. Postępuj zgodnie ze wskazówkami dotyczącymi projektowania, aby zaktualizować ikonę. Najpierw uprość ikonę i unikaj złożonych kształtów. Na przykład ilustracje używane w aplikacji są uproszczone i mają mniej złożone kształty liści. Cienie i szczegóły linii są symulowane za pomocą białych znaków.
- Teraz zaktualizuj rozmiar za pomocą siatki linii pomocniczych. Ustawiliśmy tutaj zmianę rozmiaru na Skala i upewniliśmy się, że grafika znajduje się w strefie bezpiecznej pierwszego planu. Szablon jest skonfigurowany tak, aby grafika była w skali 4x i automatycznie zmieniała rozmiar podczas eksportu, dzięki czemu możesz projektować ikony w większej skali.
- Plik jest skonfigurowany do współpracy z Material Theme Builder , aby ułatwić wyświetlanie podglądu dynamicznego koloru. Połącz styl koloru ikony na pierwszym planie z On-surface-variant.
- Teraz, otwierając Material Theme Builder z panelu wtyczek, możesz przetasować kolor źródłowy lub dodać obraz, aby zaktualizować kolory za pomocą wyodrębnionego koloru źródłowego.
- Jak to będzie wyglądać w różnych rozdzielczościach lub na ekranie głównym? Szablon jest skonfigurowany tak, aby grafika umieszczona w ramkach grafiki pojawiała się w różnych kontekstach podglądu.
- System używa monochromatycznej ikony jako powiadomienia i wyświetla ją w podglądach.
6. Ikony o kształcie adaptacyjnym i ikony starszego typu
Teraz utworzymy ikony o kształcie adaptacyjnym i ikony starszego typu, aby zapewnić szeroką obsługę ikony.
- W pliku znajdź ramkę Kształt. W panelu warstw po lewej stronie znajdź Tło ikony < dodaj ikonę*. Jeśli masz gotową ikonę, skopiuj ją tutaj, aby zastąpić przykładową ikonę Bugdroid, i przejdź do kroku 5.* Jeśli nie masz ikony, zacznij od logo lub ikony związanej z Twoją aplikacją albo użyj ponownie monochromatycznej ikony.
- Zaktualizuj ikonę na pierwszym planie, pamiętając o sprawdzonych metodach dotyczących ikon. Przywróciłem tutaj oryginalne kolory ilustracji, ale zachowałem minimalną liczbę szczegółów.
- Teraz zaktualizuj rozmiar za pomocą siatki linii pomocniczych. Ustawiliśmy tutaj zmianę rozmiaru na Skala i upewniliśmy się, że grafika znajduje się w strefie bezpiecznej pierwszego planu.
- Ikony aplikacji o kształcie adaptacyjnym mogą też mieć odrębne tło. Pozwala to bezpiecznie przycinać warstwy ikony i zapewniać subtelne efekty ruchu podczas interakcji. W Android Studio możesz też używać i definiować tło w jednolitym kolorze.
- Podglądy są aktualizowane, aby pokazywać, jak pierwszy plan i tło wyglądają razem na ekranie głównym, w różnych przyciętych kształtach i jako ikona starszego typu.
Kształt używany do przycinania można zaktualizować w podglądzie ekranu głównego, wybierając ikony i zmieniając opcję wariantu kształtu. 
7. Eksportowanie
Świetnie, szablon został zaktualizowany o ikony aplikacji. Wyeksportujmy je do implementacji.
- Upewnij się, że na obszarze roboczym nic nie jest zaznaczone.
- Otwórz menu Figmy > Plik > Eksportuj (Shift + Cmd + E).
- W menu eksportu potwierdź eksport. Spowoduje to pobranie komponentów z szablonu.
Co znajduje się w eksporcie?
Wyeksportowane komponenty zawierają wszystkie pliki niezbędne do wdrożenia ikony aplikacji:
- Figma eksportuje monochromatyczną ikonę na pierwszym planie dla koloru adaptacyjnego jako plik SVG, a także pierwszy plan i tło dla ikon o kształcie adaptacyjnym.
- Figma udostępnia też ikony starszego typu w różnych katalogach mipmap uporządkowanych według rozdzielczości.
To wszystko. Ikona jest gotowa do przesłania do zespołu deweloperów.
Jeśli chcesz wyświetlić podgląd ikon w Android Studio i przekonwertować pliki SVG na format komponentu końcowego, przejdź do następnego kroku.
8. Korzystanie z Image Asset Studio
Pierwsze kroki z Android Studio
- Pobierz i zainstaluj Android Studio.
- Uruchom Android Studio.
Android Studio wyświetli opcje rozpoczęcia nowego projektu lub wybrania istniejących projektów.
- Na razie wybierz nowy projekt. Na kolejnych ekranach przeprowadzimy Cię przez proces konfigurowania nowego projektu.
- Wybierz dowolny szablon z szablonów początkowych, ponieważ będziemy się zajmować tylko ikonami uruchamiania.
- Następnie nadaj nazwę nowemu projektowi i kliknij Zakończ. Utworzenie nowego projektu może potrwać kilka minut.
Korzystanie z Image Asset Studio
Teraz możemy dodać ikony do projektu za pomocą przydatnego narzędzia – Asset Studio.
- Aby uzyskać dostęp do tego narzędzia, wybierz Menu Plik > Nowy > Komponent z obrazem.
- Gdy otworzy się Image Asset Studio, dodaj warstwę pierwszego planu, klikając ikonę folderu w polu Ścieżka. Wybierz wyeksportowany plik SVG jako drawable-anydpi/ic_launcher.svg
- Wybierz kartę Warstwa tła i podobnie wybierz wyeksportowaną warstwę tła. Możesz też wybrać Typ komponentu: Kolor, aby zamiast tego mieć tło programu uruchamiającego w jednolitym kolorze.
- Wróć do warstwy pierwszego planu i sprawdź, czy obraz znajduje się w strefie bezpiecznej. Zmień rozmiar ikony tak, aby wyglądała jak najlepiej.
- Gdy skończysz, kliknij Dalej , aby określić, gdzie w projekcie mają się znajdować ikony (pozostaw domyślne ustawienie lub przełącz się na Główny). Następnie kliknij Zakończ. Komponenty programu uruchamiającego znajdziesz w folderze res > drawable. Kliknij dwukrotnie, aby otworzyć podgląd końcowych wektorowych elementów rysowalnych.
- Ręcznie skopiuj i wklej komponent warstwy monochromatycznej do folderu res/drawable lub res/drawable-v24 albo ręcznie zaimportuj warstwę monochromatyczną, klikając prawym przyciskiem myszy folder res i wybierając Nowy > Komponent wektorowy.
- W plikach res/mipmap-anydpi-v26/ic_launcher.xml i res/mipmap-anydpi-v26/ic_launcher_round.xml dodaj lub zmień istniejący element android:monochrome="path/to/monochrome/asset , aby wskazywał prawidłowy komponent monochromatyczny.
9. Podgląd i zasoby
Podgląd w emulatorze
Zrobiliśmy to, aby dodać je do projektu aplikacji, co pozwala nam wyświetlać podgląd na prawdziwym urządzeniu lub w emulatorze. Zobaczmy, jak nasze ikony będą wyglądać w rzeczywistości.
Emulator powinien być skonfigurowany domyślnie, ale jeśli tak nie jest, utwórz urządzenie wirtualne z Androidem. Kliknij zielony przycisk odtwarzania. Spowoduje to utworzenie projektu i otwarcie emulatora.
Komponenty końcowe
Świetnie, udało Ci się sprawdzić, jak ikona programu uruchamiającego będzie wyglądać na urządzeniu za pomocą emulatora, i dodać ją do projektu aplikacji. Dzięki temu zostały one przekonwertowane na format produkcyjny. Ale gdzie one są?
Komponenty są przechowywane jako zasoby w aplikacji na Androida i można je znaleźć, otwierając panel zasobów (zwykle po lewej stronie). Przejdź do aplikacji, a następnie znajdź folder Res. Kliknij prawym przyciskiem myszy, aby otworzyć menu, i wybierz Otwórz w Finderze (na Macu). Spowoduje to otwarcie okna Findera. Opcjonalnie możesz zaoszczędzić czas na programowanie i kontrolę jakości, konwertując i testując pozostałe zasoby aplikacji w podobny sposób. Jeśli przekonwertujesz pozostałe komponenty aplikacji, możesz udostępnić ten folder zespołowi deweloperów.
10. Gratulacje
Świetna robota. Poznałeś ikony systemowe Androida potrzebne do tworzenia aplikacji na Androida, nauczyłeś się projektować własne ikony, zapoznałeś się z szablonem ikony i być może poszedłeś o krok dalej, korzystając z Android Studio, aby wyświetlać podgląd komponentów i konwertować je na potrzeby produkcji.
Jeśli masz pytania, w każdej chwili możesz się z nami skontaktować na Twitterze, używając @MaterialDesign.
Więcej treści i samouczków dotyczących projektowania znajdziesz na youtube.com/MaterialDesign.