Tworzenie ikon aplikacji

Ikony pomagają użytkownikom rozpoznawać aplikację i działania w niej. Możesz uzyskać dostęp do zestawu ikon Material Design i dodać je do aplikacji bezpośrednio za pomocą Compose. Aby tworzyć niestandardowe ikony lub ikony aplikacji z widokami, Android Studio oferuje Image Asset Studio.

Dodawanie ikon w aplikacji za pomocą funkcji Utwórz

W Compose możesz zaimportować bibliotekę Compose Material lub bibliotekę Compose Material 3, aby uzyskać dostęp do dowolnych ikon Material. Następnie użyj funkcji kompozycyjnej Icon, aby dodać ikony do aplikacji. Ikony Material Design najlepiej sprawdzają się w przypadku ikon na pasku działań i kart oraz ikon powiadomień. Więcej Więcej informacji zawiera Ikony Material Design.

Jeśli chcesz utworzyć niestandardowe ikony, np. ikonę uruchamiania aplikacji, użyj Studio zasobów obrazów. W przypadku ikon uruchamiania plik AndroidManifest.xml musi odwoływać się do lokalizacji mipmap/. Image Asset Studio dodaje ten kod automatycznie. Ten kod pliku manifestu odwołuje się do Ikona aplikacji ic_launcher w katalogu mipmap/:

  <application android:name="ApplicationTitle"
            android:label="@string/app_label"
            android:icon="@mipmap/ic_launcher" >
  

Informacje o Image Asset Studio

Android Studio zawiera narzędzie o nazwie Image Asset Studio, które pomaga generować własne ikony aplikacji na podstawie ikon Material Design, niestandardowych obrazów i ciągów tekstowych. Generuje zestaw ikon w odpowiedniej rozdzielczości za każdy piksel gęstość pikseli, którą obsługuje Twoja aplikacja. Image Asset Studio umieszcza nowo wygenerowane ikony w folderach o określonej gęstości w folderze res/ w projekcie. W czasie działania Android używa odpowiednich na podstawie gęstości ekranu urządzenia, na którym działa aplikacja.

Image Asset Studio pomaga generować te typy ikon:

• Ikony programu uruchamiającego
• Ikony paska czynności i kart
• Ikony powiadomień

W sekcjach poniżej opisujemy typy ikon, które możesz tworzyć, oraz sposoby wprowadzania obrazów i tekstu których możesz użyć.

Ikony adaptacyjnego i starszego programu uruchamiającego

Ikona programu uruchamiającego to grafika, która reprezentuje aplikację dla użytkowników. Możesz:

• są widoczne na liście aplikacji zainstalowanych na urządzeniu i na ekranie głównym,
• Przedstaw skróty do aplikacji (np. ikonę skrótu kontaktu, która otwiera szczegółowe informacje o kontakcie).
• być używane w aplikacjach uruchamiających;
• Pomóż użytkownikom znaleźć Twoją aplikację w Google Play.

Ikony w adaptacyjnych programach uruchamiających mogą mieć różne kształty na różnych modelach urządzeń i są dostępne w Androidzie 8.0 (interfejs API na poziomie 26) i nowszych. Android Studio 3.0 obsługuje tworzenie adaptacyjnych ikon za pomocą Image Asset Studio. Image Asset Studio generuje podglądy komponentów ikona adaptacyjna w okrągłym, okrągłym, okrągłym i kwadratowym kształcie z pełnym spadem kliknij podgląd ikony. Image Asset Studio generuje też starsze i okrągłe reklamy oraz Sklep Google Play zobaczyć podgląd ikony. Stara ikona programu uruchamiającego to grafika reprezentująca aplikację na ekranie głównym urządzenia i w oknie programu uruchamiającego. Starsze ikony w programie uruchamiającym są przeznaczone do użytku na urządzeniach z Androidem 7.1 (poziom interfejsu API 25) lub starszym, które nie obsługują ikon adaptacyjnych i nie wyświetlają się w zależności od modelu urządzenia.

Image Asset Studio umieszcza ikony we właściwych miejscach res/mipmap-density/ katalogu. Tworzy też obraz o wymiarach 512 x 512 pikseli która jest odpowiednia dla Sklepu Google Play.

W przypadku ikon programu uruchamiającego zalecamy styl Material Design, nawet w przypadku starszych wersji Androida.

Zobacz Ikony adaptacyjnego programu uruchamiającego Ikony produktów – Material Design, aby dowiedzieć się więcej.

Ikony paska czynności i kart

Ikony na pasku działań to elementy graficzne umieszczone na pasku działań, które reprezentują poszczególne Działania. Więcej informacji znajdziesz w artykułach Dodawanie i obsługa działań, Pasek aplikacji – Material Design oraz Projekt paska działań.

Ikony kart to elementy graficzne używane do reprezentowania poszczególnych kart w interfejsie z wieloma kartami. Każda ikona karty ma 2 stany: niezaznaczona i wybrana. Zobacz Tworzenie widoków przesuwanych z kartami oraz Karty – Material Design .

Image Asset Studio umieszcza ikony we właściwych miejscach res/drawable-density/ i katalogów.

Zalecamy używanie stylu Material Design na pasku działań. i ikon kart, nawet na starszych wersjach Androida. Aby udostępnić interfejs użytkownika w stylu Material Design na starszych wersjach platform, użyj biblioteki appcompat i innych bibliotek pomocniczych.

Zamiast tego możesz użyć narzędzia Image Asset Studio, Vector Asset Studio, by utworzyć pasek działań i ikon kart. Obiekty rysowalne wektorowo są odpowiednie do prostych ikon i mogą zmniejszyć rozmiar aplikacji.

Ikony powiadomień

Powiadomienie to wiadomość, którą możesz wyświetlić użytkownikowi poza normalnym interfejsem aplikacji. Image Asset Studio umieszcza ikony powiadomień we właściwych lokalizacjach w katalogach res/drawable-density/:

• Ikony dla Androida 2.2 (poziom interfejsu API 8) i niższy są umieszczane w katalogach res/drawable-density/.
• Ikony na Androida 2.3–2.3.7 (poziom interfejsu API 9–10) znajdują się w katalogach res/drawable-density-v9/.
• Ikony na Androida 3 (poziom interfejsu API 11) i nowszego są umieszczane w katalogach res/drawable-density-v11/.

Jeśli Twoja aplikacja obsługuje Androida w wersjach od 2.3 do 2.3.7 (poziom interfejsu API 9–10), Image Asset Studio wygeneruje szarą wersję ikony. Nowsze wersje Androida używają białej ikony wygenerowanej przez Image Asset Studio.

Więcej informacji znajdziesz w artykułach Powiadomienia, Powiadomienia w ramach Material Design, Zmiany w powiadomieniach w Androidzie 5.0, Powiadomienia w Androidzie 4.4 i starszych wersjach oraz Ikony na pasku stanu w Androidzie 3.0 i starszych wersjach.

Obiekty clip art

Image Asset Studio ułatwiające importowanie ikon Material Google w formatach VectorDrawable Formaty PNG: po prostu wybierz ikonę w oknie. Więcej informacji znajdziesz w artykule Ikony Material.

Obrazy

Możesz importować własne obrazy i dostosowywać je do typu ikony. Image Asset Studio obsługiwane następujące typy plików: PNG (preferowany), JPG (akceptowany) i GIF (odradzamy).

Teksty

Image Asset Studio to narzędzie, które umożliwia wpisywanie ciągu tekstowego przy użyciu różnych czcionek i umieszczanie go na ikonie. Konwertuje ikonę opartą na tekście na pliki PNG o różnej gęstości. Możesz użyć czcionek, które są zainstalowane na komputerze.

Uruchom Image Asset Studio

Aby uruchomić narzędzie Image Studio, wykonaj te czynności:

1. W oknie Projekt wybierz widok Androida.
2. Kliknij prawym przyciskiem folder res i wybierz Nowy > Plik graficzny.

   

3. Wykonaj te czynności, by:
   • Utwórz adaptacyjne i starsze ikony uruchamiające.
   • Utwórz ikonę paska lub karty akcji.
   • Utwórz ikonę powiadomienia.

Tworzenie adaptacyjnych i starszych ikon programu uruchamiającego

Po otwarciu Image Asset Studio możesz dodawać ikony adaptacyjne i starsze, wykonując te czynności:

1. W polu Typ ikony wybierz Ikony menu (adaptacyjne i stare).
2. Na karcie Warstwa pierwszego planu wybierz Typ zasobu. określ zasób w polu poniżej:
   • Aby określić ścieżkę do pliku obrazu, wybierz Obraz.
   • Wybierz Clip Art, aby wskazać obraz z Zestaw ikon Material Design.
   • Aby określić ciąg tekstowy i wybrać czcionkę, kliknij Tekst.
3. Na karcie Warstwa tła wybierz Typ zasobu, a następnie określ zasób w polu poniżej. Możesz wybrać kolor lub obraz, który ma być użyty jako warstwa tła.
4. Na karcie Opcje sprawdź ustawienia domyślne i potwierdź, że chcesz wygenerować ikony w starym, okrągłym i Google Play.
5. Opcjonalnie zmień nazwę i ustawienia wyświetlania dla każdej Karty Warstwa pierwszego planu i Warstwa tła:
   • Nazwa – jeśli nie chcesz używać domyślnej nazwy, wpisz nowy imię i nazwisko. Jeśli ta nazwa zasobu już istnieje w projekcie, zgodnie ze wskazaniem pojawi się błąd u dołu kreatora, zostanie zastąpione. Nazwa może może zawierać tylko małe litery, podkreślenia i cyfry.
   • Przytnij – aby dostosować margines między grafiką ikony a ramką. dla zasobu źródłowego kliknij Tak. Ta operacja usuwa przezroczysta przestrzeń przy zachowaniu współczynnika proporcji. Aby pozostawić zasób źródłowy bez zmian, wybierz Nie.
   • Kolor – aby zmienić kolor obiektu Clipart lub Kliknij ikonę Tekst. W oknie Wybierz kolor określ kolor i kliknij Wybierz. Nowa wartość pojawi się w polu.
   • Zmień rozmiar – użyj suwaka, aby określić współczynnik skalowania w procentach, który pozwoli zmienić rozmiar obrazu, grafiki wektorowej lub ikony tekstu. To ustawienie jest wyłączone dla warstwy tła, gdy określisz typ komponentu Kolor.
6. Kliknij Dalej.
7. Opcjonalnie zmień katalog zasobów: wybierz zbiór źródeł zasobów gdzie chcesz dodać zasób graficzny: src/main/res, src/debug/res, src/release/res lub niestandardowy zestaw źródeł. Główny zestaw źródłowy dotyczy wszystkich wariantów kompilacji, w tym wersji debugowej i wersji produkcyjnej. Zbiory źródeł do debugowania i do debugowania zastępują główny zbiór źródeł i mają zastosowanie do jednej wersji kompilacji. Zestaw źródeł debugowania służy tylko do debugowania. Aby zdefiniować nowy zbiór źródłowy, wybierz Plik > Struktura projektu > aplikacja > Typy kompilacji. Możesz na przykład zdefiniować zestaw źródeł wersji beta i utworzyć wersję ikony, która w prawym dolnym rogu zawiera tekst „BETA”. Więcej Więcej informacji zawiera Skonfiguruj Utwórz warianty.
8. Kliknij Zakończ. Image Asset Studio dodaje obrazy do folderów mipmap dla różnych wartości gęstości.

Wyświetl podgląd ikon aplikacji z motywem

Android Studio pozwala wyświetlić podgląd ikona aplikacji z motywem i sprawdzić, jak dostosowuje się do koloru tapety użytkownika. Aby wyświetlić podgląd ikony tematycznej aplikacji, otwórz plik launcher.xml, który definiuje ikonę, a następnie użyj selektora Tryb interfejsu systemu na pasku narzędzi, aby przełączać tapety i obserwować reakcję ikony.

Więcej informacji o tworzeniu ikon aplikacji z motywem: Adaptacyjne ikony.

Tworzenie paska działań lub ikony karty

Po otwarciu usługi Image Asset Studio możesz dodać do niej pasek działań lub ikonę karty. wykonując te czynności:

1. W polu Typ ikony wybierz Ikony paska działań i kart.
2. Wybierz Typ zasobu i określ zasób w polu poniżej:
• W polu Obiekty clipart kliknij przycisk.

W oknie Wybierz ikonę wybierz ikonę materiału i kliknij OK.

• W polu Ścieżka podaj ścieżkę i nazwę pliku obrazu. Kliknij ..., by otworzyć okno.
• W polu Tekst wpisz ciąg tekstowy i wybierz czcionkę.

Ikona pojawia się po prawej stronie w obszarze Komponent źródłowy oraz w obszarze podglądu na dole kreatora.

3. Opcjonalnie zmień nazwę i opcje wyświetlania:
   • Nazwa – jeśli nie chcesz używać nazwy domyślnej, wpisz nową nazwę. Jeśli ta nazwa zasobu już istnieje w projekcie, na co wskazuje błąd na stronie u dołu kreatora, zostanie zastąpione. Nazwa może zawierać tylko małe litery, podkreślenia i cyfry.
   • Przytnij – aby dostosować margines między ikonę i obramowanie w zasobie źródłowym, wybierz Tak. Ta operacja usuwa przezroczystą przestrzeń, zachowując współczynnik proporcji. Aby pozostawić zasób źródłowy bez zmian, wybierz Nie.
   • Dopełnienie – jeśli chcesz dostosować dopełnienie zasobu źródłowego ze wszystkich czterech stron, przesuń suwak. Wybierz wartość od -10% do 50%. Jeśli wybierzesz też Przytnij, najpierw nastąpi przycięcie.
   • Motyw – wybierz HOLO_LIGHT lub HOLO_DARK. Aby określić kolor w oknie Wybierz kolor, zaznacz NIESTANDARDOWY, a następnie kliknij pole Kolor niestandardowy.

   Studio komponentów z obrazem tworzy ikonę w przezroczystym kwadracie z pewnym dopełnieniem. i przy krawędziach. Dopełnienie zapewnia wystarczającą ilość miejsca na standardowy efekt ikony cienia.

4. Kliknij Dalej.
5. Opcjonalnie zmień katalog zasobów:
• Katalog Res – wybierz zbiór źródeł zasobów, do którego chcesz dodać zasób obrazkowy: src/main/res, src/debug/res, src/release/res lub zdefiniowany przez użytkownika zbiór źródeł. Główny zestaw źródeł dotyczy wszystkich wariantów kompilacji, w tym wersji debugowej i wersji produkcyjnej. Zestawy źródeł debugowania i wersji publikowanych zastępują główny zestaw źródeł i stosują się do jednej wersji kompilacji. Zbiór źródeł debugowania służy tylko do debugowania. Aby zdefiniować nowy zbiór źródeł, wybierz Plik > Struktura projektu > aplikacja > Typy kompilacji. Można na przykład zdefiniować zbiór źródłowy beta i utworzyć wersji ikony zawierającej tekst „BETA” w prawym dolnym rogu. Więcej informacji znajdziesz w artykule Konfigurowanie wariantów kompilacji.

W obszarze Katalogi wyjściowe wyświetlane są obrazy i foldery, w których będą one widoczne w widoku Pliki projektu okna Projekt.

6. Kliknij Zakończ.

Studio zasobów graficznych dodaje obrazy do folderów drawable dla różnych wartości gęstości.

Tworzenie ikony powiadomienia

Po otwarciu Image Asset Studio możesz dodać ikonę powiadomienia, wykonując te czynności:

1. W polu Typ ikony wybierz Ikony powiadomień.
2. Wybierz Typ zasobu, a następnie określ zasób w polu poniżej:
• W polu Clip Art kliknij przycisk.

W oknie Wybierz ikonę wybierz ikonę materiału i kliknij OK.

• W polu Ścieżka podaj ścieżkę i nazwę pliku obrazu. Aby użyć okna, kliknij ….
• W polu Tekst wpisz ciąg tekstowy i wybierz czcionkę.

Ikona pojawia się po prawej stronie w obszarze Komponent źródłowy oraz w obszarze podglądu na dole kreatora.

3. Opcjonalnie zmień nazwę i opcje wyświetlania:
   • Nazwa – jeśli nie chcesz używać nazwy domyślnej, wpisz nową nazwę. Jeśli ta nazwa zasobu już istnieje w projekcie, na co wskazuje błąd na stronie u dołu kreatora, zostanie zastąpione. Nazwa może zawierać tylko małe litery, podkreślenia i cyfry.
   • Przytnij – aby dostosować margines między ikoną a obramowaniem w komponencie źródłowym, wybierz Tak. Ta operacja usuwa przezroczystą przestrzeń, zachowując współczynnik proporcji. Aby opuścić zasób źródłowy bez zmian, wybierz Nie.
   • Dopełnienie – jeśli chcesz dostosować dopełnienie zasobu źródłowego ze wszystkich czterech stron, przesuń suwak. Wybierz wartość z zakresu od –10% do 50%. Jeśli wybierz Przytnij, najpierw nastąpi przycięcie.

   Studio zasobów graficznych tworzy ikonę w przezroczystym kwadracie, więc na krawędziach jest pewien margines. Dopełnienie zapewnia wystarczającą ilość miejsca na standardowy efekt ikony cienia.

4. Kliknij Dalej.
5. Opcjonalnie zmień katalog zasobów:
• Katalog Res – wybierz zbiór źródeł zasobów, do którego chcesz dodać zasób obrazkowy: src/main/res, src/debug/res, src/release/res lub zbiór źródeł zdefiniowany przez użytkownika. Główny zbiór źródłowy ma zastosowanie do wszystkich wariantów kompilacji, w tym na potrzeby debugowania i publikowania. Zbiory źródeł do debugowania i do debugowania zastępują i stosują główny zbiór źródeł do jednej wersji kompilacji. Zestaw źródeł debugowania służy tylko do debugowania. Aby zdefiniować nowy zbiór źródeł, wybierz Plik > Struktura projektu > aplikacja > Typy kompilacji. Możesz na przykład zdefiniować zestaw źródeł wersji beta i utworzyć wersję ikony, która w prawym dolnym rogu zawiera tekst „BETA”. Więcej informacji: Skonfiguruj warianty kompilacji.

W obszarze Katalogi wyjściowe wyświetlane są obrazy i foldery, w których będą one widoczne w widoku Pliki projektu okna Projekt.

6. Kliknij Zakończ.

Image Asset Studio dodaje obrazy z folderów możliwych do rysowania w przypadku: różne gęstości i wersje.

Odwoływanie się do zasobu obrazu w kodzie za pomocą widoków

Do zasobu obrazu zazwyczaj możesz posługiwać się w kodzie w ogólny sposób. Gdy gdy aplikacja działa, odpowiedni obraz wyświetla się automatycznie w zależności urządzenie:

• W większości przypadków zasoby obrazów możesz określać jako @drawable w kodzie XML, a także Drawable w kodzie Java.

Na przykład poniższy kod XML układu wyświetla obiekt rysowalny w elemencie ImageView:

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:src="@drawable/myimage" />

Poniższy kod w Javie pobiera obraz jako Drawable:

Kotlin

val drawable = resources.getDrawable(R.drawable.myimage, theme)

Java

Resources res = getResources();
Drawable drawable = res.getDrawable(R.drawable.myimage, getTheme());

getResources() znajduje się w Context , która ma zastosowanie do obiektów interfejsu, takich jak aktywności, fragmentów, układów, widoków itd.

• Jeśli Twoja aplikacja korzysta z Biblioteki pomocy, możesz odwołać się do zasobu graficznego w kodzie XML za pomocą atrybutu Instrukcja app:srcCompat. Na przykład:

<ImageView
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    app:srcCompat="@drawable/myimage" />

Do zasobów obrazów możesz uzyskać dostęp tylko z poziomu głównego wątku.

Gdy zasób obrazu będzie już w katalogu res/ Twojego projektu, możesz do niego odwołują się w kodzie Java lub w układzie XML za pomocą jego identyfikatora zasobu. Poniższy kod w Javie ustawia ImageView do użycia zasób drawable/myimage.png:

findViewById<ImageView>(R.id.myimageview).apply {
    setImageResource(R.drawable.myimage)
}

ImageView imageView = (ImageView) findViewById(R.id.myimageview);
imageView.setImageResource(R.drawable.myimage);

Więcej informacji znajdziesz w sekcji Dostęp do zasobów.

Usuwanie ikony z projektu

Aby usunąć ikonę z projektu:

1. W oknie Projekt wybierz widok Androida.
2. Rozwiń folder res/mipmap, aby wyświetlić ikonę w menu, lub folder res/drawable, aby wyświetlić inne typy ikon.
3. Znajdź podfolder o nazwie ikony, którą chcesz usunąć.

Ten folder zawiera ikonę w różnych gęstościach.

4. Wybierz folder i naciśnij klawisz Delete.

Możesz też wybrać Edytuj > Usuń. Możesz też kliknąć plik prawym przyciskiem myszy i wybrać Usuń.

Pojawi się okno Bezpieczne usuwanie.

5. Opcjonalnie wybierz opcje, aby sprawdzić, gdzie w projekcie jest używana ikona, i kliknij OK.

Android Studio usunie pliki z projektu i dysku. Jeśli jednak wybierzesz wyszukiwanie w przypadku miejsc w projekcie, w których pliki są używane i znaleziono niektóre przypadki ich użycia, możesz je wyświetlać czy je usunąć. Aby skompilować projekt, musisz usunąć te odwołania lub je zastąpić.

6. Wybierz Kompilacja > Wyczyść projekt.

Android Studio usunie wszystkie wygenerowane pliki graficzne odpowiadające usuniętemu zasobowi obrazu. Spowoduje to usunięcie ich z projektu i dysku.

7. W razie potrzeby popraw błędy spowodowane przez fragmenty kodu, które odwołują się do zasobu.

Android Studio zaznacza te błędy w kodzie. Gdy usuniesz wszystkie odwołania ze swojego kodu, możesz ponownie skompilować projekt.