1. Wprowadzenie
Ostatnia aktualizacja: 8.04.2022
Od Androida 13 użytkownicy mogą stosować motywy do ikon adaptacyjnego programu uruchamiającego. Dzięki tej funkcji ikony aplikacji w obsługiwanych programach uruchamiających na Androidzie są przyciemniane, aby przejmować kolorystykę wybranej przez użytkownika tapety i innych motywów.
Łatwo twórz wszystkie zasoby systemowe potrzebne w aplikacji na Androida, w tym nowe ikony o adaptacyjnych kolorach.
Czego się nauczysz
- Poznaj różne typy ikon aplikacji i wskazówki dotyczące ich projektowania.
- Jak korzystać z szablonu Figny do tworzenia launchera na Androida
- Jak korzystać z generatora komponentów w Android Studio
- Jak wyświetlić 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 wersja monochromatyczna)
Czego potrzebujesz
- konto Figma;
- Plik Figma DesignLab
- 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 z Figma Community
Otwórz plik szablonu programu uruchamiającego na Androida lub wyszukaj „Migrating to Variable fonts” w Figma Community. W prawym górnym rogu kliknij Uzyskaj kopię, aby skopiować plik do swoich plików.
Korzystanie z szablonu
Szablon ikony Androida składa się z 2 stron:
- Na stronie tytułowej znajdziesz krótkie omówienie odpowiednich pojęć i sposobu korzystania z szablonu.
- Na stronie szablonu znajdziesz wszystko, czego potrzebujesz do utworzenia wymaganych komponentów, podzielonych na 3 ramki (Kolor, Kształt, Sklep Play).
Uwaga: w panelu Warstwy po lewej stronie większość warstw i grup jest zablokowana. Nie należy ich odblokowywać. (Będziesz mieć możliwość umieszczenia dzieł sztuki w odblokowanych grupach dzieł sztuki).
Zanim jednak przejdziemy do tworzenia komponentów, zobaczmy, co będziemy tworzyć…
3. Ikony systemowe Androida
Ikony programu uruchamiającego
Ikony programu uruchamiającego, czyli ikony aplikacji, są ważnym elementem procesu uruchamiania aplikacji. Wyświetlają się na ekranie głównym jako punkt wejścia do aplikacji.
Kształt adaptacyjny
Ikona adaptacyjna, czyli AdaptiveIconDrawable, może być wyświetlana w różny sposób 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 mogą być też używane 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ć okrąg, a na innym – zaokrąglony kwadrat. Każdy producent OEM urządzenia musi udostępnić maskę, której system używa do renderowania wszystkich ikon adaptacyjnych w tym samym kształcie.
Możliwość dostosowania do kształtu pozwala też systemowi stosować różne efekty animacji w zależności od interakcji użytkownika.
Kolor adaptacyjny
Ikony adaptacyjne mogą teraz korzystać z dynamicznych kolorów, co umożliwia personalizację ikon aplikacji zgodnych z wybranym motywem.
Jeśli użytkownik włączył ikony aplikacji z motywem (czyli włączył przełącznik Ikony z motywem w ustawieniach systemu), a launcher obsługuje tę funkcję, system używa kolorów wybranej przez użytkownika tapety i motywu, aby określić kolor odcienia.
Podobnie jak ikony dostosowujące się do kształtu, ikony o adaptacyjnym kolorze składają się z pierwszego planu i tła. Wystarczy podać monochromatyczny element ikony pierwszego planu, a system zajmie się tłem i kolorem, korzystając z wyodrębnionego schematu kolorów.
Możesz też użyć tej samej monochromatycznej ikony jako ikony powiadomienia.
Starsza wersja
Starsze ikony powinny być uwzględnione, aby obsługiwać urządzenia z starszymi wersjami Androida lub urządzenia, które nie obsługują funkcji adaptacyjnych (wersje starsze niż 8.0).
Nie będą mieć zasobów pierwszego planu ani tła i mogą mieć dowolny kształt. Jeśli używasz podanego szablonu, gotowa grafika ikony adaptacyjnej zostanie wyeksportowana w rozmiarach wymaganych w przypadku starszej ikony.
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.
Przechowywanie elementów graficznych
Aby wyróżnić i wypromować aplikację w Google Play i innych kanałach marketingowych Google, możesz użyć grafiki, zrzutów ekranu, krótkiego opisu i filmów.
Nie zastępuje ona ikony aplikacji w programie uruchamiającym, 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 eksportowania za pomocą grafiki w formacie Adaptive Shape.
4. Sprawdzone metody projektowania
Ikony programu uruchamiającego służą do uruchamiania aplikacji. Muszą być rozpoznawalne i czytelne, aby użytkownicy mogli z nich korzystać. Oto kilka sprawdzonych metod, które pomogą Ci zadbać o te cechy ikony programu uruchamiającego.
Uprość grafikę. Unikaj wielu warstw, wielu efektów i tekstu. Przy małych rozmiarach te szczegóły będą niewidoczne lub trudne do zauważenia. 
Unikaj złożonych kształtów. Dotyczy to logo. Jeśli to możliwe, używaj uproszczonego logo lub symboli, które użytkownicy kojarzą z Twoją aplikacją. Czytelny i wyraźny kształt pomaga w tworzeniu spójności, dzięki czemu użytkownicy mogą łatwo rozpoznać Twoją aplikację w różnych kontekstach (kolor adaptacyjny i powiadomienia). 
Użyj siatki. Skorzystaj z siatki lub linii pomocniczych, aby mieć pewność, że grafika na pierwszym planie będzie działać po przycięciu, w tym ilustracje z pełnym spadkiem. 
Zwróć uwagę na kontrast. W przypadku ikon adaptacyjnych i starszych upewnij się, że pierwszy plan i tło ikony mają czytelny kontrast. Unikaj mocnych cieni, które mogą być mylone z cieniami systemowymi. 
Umieszczaj elementy graficzne w bezpiecznych strefach. Komponenty na pierwszym planie powinny mieć wymiary 72 x 72 piksele (chyba że chcesz użyć pełnego obszaru). 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ć Ci tworzenie grafiki ikony. Rozmiary komponentów zostaną zmienione, aby były zgodne ze specyfikacjami.
Format wektorowy Staraj się używać grafik w formacie wektorowym (np. plików SVG, AI, PDF i EPS) zamiast w formacie rastrowym (np. plików PNG, JPG i GIF). Dzięki temu Twoje dzieło będzie zgodne z nowszymi funkcjami i łatwiejsze do edytowania. 
5. Adaptacyjne kolory 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 lewym panelu warstw znajdź kolejno Kolor adaptacyjny > Komponenty > grafika > obszar grafiki ikony > Grafika ikony z motywem < dodaj ikonę. Jeśli masz już gotową monochromatyczną ikonę, skopiuj ją tutaj, aby zastąpić przykładową ikonę bugdroida, i przejdź do kroku 6.
- Jeśli nie masz ikony monochromatycznej, zacznij od logo lub ikony związanej z aplikacją. Zapoznaj się z wskazówkami dotyczącymi projektowania, aby zaktualizować ikonę. Najpierw uprość 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 zmianę rozmiaru na Skaluj i sprawdziliśmy, czy grafika mieści się w strefie bezpiecznej pierwszego planu. Szablon jest skonfigurowany z grafiką w rozmiarze 4x i automatycznie zmienia rozmiar podczas eksportowania, dzięki czemu możesz projektować ikony w większej skali.
- Plik jest skonfigurowany do współpracy z kreatorem motywów Material, aby ułatwić podgląd dynamicznego koloru. Połącz styl koloru ikony pierwszego planu z kolorem wariantu na powierzchni.
- Teraz, otwierając narzędzie Material Theme Builder w panelu wtyczek, możesz losowo zmieniać kolor źródłowy lub dodać obraz, aby zaktualizować kolory za pomocą wyodrębnionego koloru źródłowego.
- Jak 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 ikony monochromatycznej jako powiadomienia i wyświetla ją w podglądach.
6. Ikony adaptacyjne i starsze
Teraz utworzymy ikony adaptacyjne i starsze, aby zapewnić szeroką obsługę ikony.
- W pliku znajdź ramkę kształtu. 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ę bugdroida, i przejdź do kroku 5*. Jeśli nie masz ikony, zacznij od logo lub ikony związanej z aplikacją albo użyj ponownie ikony monochromatycznej.
- Zaktualizuj ikonę pierwszego planu, pamiętając o sprawdzonych metodach dotyczących ikon. Przywróciłem tu oryginalne kolory ilustracji, ale zachowałem minimalną liczbę szczegółów.
- Teraz zaktualizuj rozmiar za pomocą siatki linii pomocniczych. Ustawiliśmy tu opcję zmiany rozmiaru na Skaluj i upewniliśmy się, że grafika mieści się w strefie bezpiecznej pierwszego planu.
- Ikony aplikacji o adaptacyjnym kształcie mogą też mieć odrębne tło. Dzięki temu warstwy ikony można bezpiecznie przycinać i zapewniać subtelne efekty ruchu podczas interakcji. W Android Studio możesz też użyć jednolitego koloru tła i go zdefiniować.
- Podglądy są aktualizowane i pokazują, jak pierwszy plan i tło wyglądają razem na ekranie głównym, w różnych przyciętych kształtach i jako starsza ikona.
Kształt użyty do przycięcia można zaktualizować w podglądzie ekranu głównego, wybierając ikony i zmieniając opcję wariantu kształtu. 
7. Eksportuję
Świetnie, szablon został zaktualizowany o ikony aplikacji. Wyeksportujmy je do wdrożenia.
- Upewnij się, że na obszarze roboczym nic nie jest zaznaczone.
- Otwórz menu Figmy > File (Plik) > Export (Shift + Cmd + E).
- W menu eksportu potwierdź eksport. Spowoduje to pobranie komponentów z szablonu.
Co zawiera eksport?
Wyeksportowane komponenty zawierają wszystkie niezbędne pliki do wdrożenia ikony aplikacji, jak poniżej:
- Figma eksportuje monochromatyczną ikonę pierwszego planu dla koloru adaptacyjnego jako plik SVG, a także pierwszy plan i tło dla ikon o adaptacyjnym kształcie.
- Figma udostępnia też starsze ikony w różnych katalogach mipmap, które są uporządkowane według rozdzielczości.
To wszystko. Ikona jest gotowa do przesłania do zespołu programistów.
Jeśli chcesz wyświetlić podgląd ikon w Androidzie Studio i przekonwertować pliki SVG na ostateczny format zasobu, przejdź do następnego kroku.
8. Korzystanie z Image Asset Studio
Pierwsze kroki z Androidem Studio
- Pobierz i zainstaluj Android Studio.
- Uruchom Android Studio.
Android Studio wyświetli opcje rozpoczęcia nowego projektu lub wybrania istniejących projektów.
- Wybierz na razie nowy projekt. Na kolejnych ekranach zobaczysz, jak skonfigurować nowy projekt.
- Wybierz dowolny szablon z szablonów początkowych, ponieważ będziemy sprawdzać tylko ikony uruchamiania.
- Następnie nadaj nazwę nowemu projektowi i kliknij Zakończ. Utworzenie nowego projektu zajmie kilka minut.
Korzystanie z Image Asset Studio
Teraz możemy dodać ikony do projektu za pomocą przydatnego narzędzia Studio kreacji.
- Aby uzyskać dostęp do tego narzędzia, kliknij Menu Plik > Nowy > Komponent z obrazem.
- Gdy otworzy się Image Asset Studio, dodaj warstwę pierwszego planu, klikając ikonę folderu w sekcji Ścieżka. Wybierz wyeksportowany plik SVG jako drawable-anydpi/ic_launcher.svg
- Wybierz kartę Warstwa tła i w podobny sposób wybierz wyeksportowaną warstwę tła. Możesz też wybrać Typ komponentu: Kolor, aby tło launchera było jednolite.
- Wróć do warstwy pierwszego planu i sprawdź, czy obraz znajduje się w strefie bezpiecznej. Zmień rozmiar ikony na taki, który najlepiej wygląda.
- Gdy skończysz, kliknij Dalej. Pojawi się pytanie, gdzie w projekcie mają się znajdować ikony (pozostaw domyślne ustawienie lub przełącz na Główny). Następnie kliknij Zakończ. Zasoby programu uruchamiającego znajdziesz w folderze res > drawable. Kliknięcie dwukrotne spowoduje otwarcie podglądu końcowych obrazów wektorowych.
- 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 New > Vector Asset (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 atrybut android:monochrome="path/to/monochrome/asset, aby wskazywał prawidłowy komponent monochromatyczny.
9. Podgląd i materiały
Podgląd w emulatorze
Zrobiliśmy to, aby dodać je do projektu aplikacji, co pozwoli nam wyświetlić podgląd na prawdziwym urządzeniu lub emulatorze. Sprawdźmy, jak będą wyglądać nasze ikony.
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 skompilowanie projektu i otwarcie emulatora.
Ostateczne komponenty
Ś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. W ten sposób przekształcisz je w ostateczną wersję produkcyjną. Ale gdzie one są?
Komponenty są zasobami w aplikacji na Androida. Można je znaleźć, otwierając panel Zasoby (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 tworzenie i testowanie, konwertując i testując pozostałe komponenty aplikacji w podobny sposób. Jeśli pozostałe zasoby aplikacji zostały przekonwertowane, ten folder można udostępnić zespołowi programistów.
10. Gratulacje
Świetnie. Poznałeś(-aś) ikony systemowe Androida potrzebne do tworzenia aplikacji na Androida, nauczyłeś(-aś) się projektować własne ikony, zapoznałeś(-aś) się z zasobem szablonu ikony i być może nawet poszedłeś(-aś) o krok dalej, zaglądając do Androida Studio, aby wyświetlić podgląd zasobów i przekonwertować je na potrzeby produkcji.
Jeśli masz pytania, możesz je zadać w każdej chwili, używając @MaterialDesign na Twitterze.
Więcej treści i samouczków dotyczących projektowania znajdziesz na youtube.com/MaterialDesign