Tworzenie ikon aplikacji

Ikony pomagają użytkownikom rozpoznawać aplikację i działania w niej. Możesz uzyskać dostęp do Ikony Material Design, z których można dodawać je bezpośrednio w usłudze Compose. Aby utworzyć niestandardowe ikony lub ikony dla: aplikacji ze Zdjęciami, Android Studio oferuje Image Asset Studio.

Dodawanie ikon w aplikacji za pomocą funkcji Utwórz

Za pomocą tej funkcji możesz importować w bibliotece Material Design lub bibliotekę Compose Material 3, wszystkich 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ć ikony niestandardowe, np. ikonę menu z aplikacjami, użyj Image Asset Studio. W przypadku ikon programu uruchamiającego 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 pomoże Ci wygenerować własną aplikację. ikony z Material Design, obrazy niestandardowe i ciągi tekstowe. 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 Menu z aplikacjami
• Pasek działań i ikony 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że:

• 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 adaptacyjnego programu uruchamiającego mogą wyświetlać się w różnych kształtach na różnych modelach urządzeń i są są dostępne w Androidzie 8.0 (poziom interfejsu API 26) i nowszych. Android Studio 3.0 obsługuje aby utworzyć adaptacyjne ikony 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. Starsza ikona programu uruchamiającego to grafika, która reprezentuje aplikację na urządzeniu na ekranie głównym 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.

Pasek działań i ikony kart

Ikony na pasku działań to elementy graficzne umieszczone na pasku działań, które reprezentują poszczególne Działania. Patrz sekcja Dodawanie i obsługa czynności, Pasek aplikacji – Material Design Projekt paska działań .

Ikony kart to elementy graficzne przedstawiające poszczególne karty z kilkoma 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. Użyj usługi appcompat i innych biblioteki pomocy , aby udostępnić interfejs Material Design na starszych wersjach platform.

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

Ikony powiadomień

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

• Ikony dla Androida 2.2 (poziom interfejsu API 8) i niższy są umieszczane w katalogach res/drawable-density/.
• Ikony Androida 2.3–2.3.7 (poziom interfejsu API od 9 do 10) znajdują się w res/drawable-density-v9/ katalogu.
• Ikony Androida 3 (poziom interfejsu API 11) znajdują się 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. W nowszych wersjach Androida biała ikona widoczna w narzędziu Image Asset Studio co generuje.

Patrz sekcja Powiadomienia. Material Design powiadomień; Powiadomienia, zmiany w Androidzie 5.0; Powiadomienia, Android 4.4 i starsze wersje; oraz Ikony na pasku stanu, Android 3.0 i starsze wersje .

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: Ikony Material Design.

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).

Ciągi tekstowe

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 myszy folder res i wybierz Nowe > Komponent z obrazem.

   

3. Wykonaj te czynności, by:
   • Twórz adaptacyjne i starsze ikony w programie uruchamiającym.
   • Utwórz pasek działań lub ikonę karty.
   • Utwórz ikonę powiadomienia.

Tworzenie adaptacyjnych i starszych ikon programu uruchamiającego

Po otwarciu Image Asset Studio możesz dodać ikony adaptacyjne i starsze, korzystając z tych opcji: wykonaj te czynności:

1. W polu Typ ikony wybierz Ikony Menu z aplikacjami (adaptacyjne i (starsza wersja).
2. Na karcie Warstwa pierwszego planu wybierz Typ zasobu. określ zasób w polu poniżej:
   • Wybierz Obraz, by określić ścieżkę do pliku graficznego.
   • Wybierz Clip Art, aby wskazać obraz z Zestaw ikon Material Design.
   • Wybierz Tekst, aby określić ciąg tekstowy i wybrać czcionkę.
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 Określ obraz, który będzie używany jako warstwa tła.
4. Na karcie Starsza wersja sprawdź ustawienia domyślne i potwierdź, że chcesz aby generować starsze, okrągłe ikony Sklepu 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 opuścić zasób źródłowy nie uległ zmianie, kliknij 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 w odpowiednim polu.
   • Zmień rozmiar – za pomocą suwaka możesz określić współczynnik skalowania w procentach. aby zmienić rozmiar ikony Obraz, Clip Art lub Tekst. Ten jest wyłączona dla warstwy tła po określeniu 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 zbiór źródłowy ma zastosowanie do wszystkich wariantów kompilacji, w tym do debugowania wersji. Zbiory źródeł do debugowania i do debugowania zastępują główny zbiór źródeł i mają zastosowanie do jednej wersji kompilacji. Zbiór ź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żna na przykład zdefiniować zbiór źródłowy beta i utworzyć wersję ikona zawierająca tekst „BETA” w prawym dolnym rogu. Więcej Więcej informacji zawiera Skonfiguruj Utwórz warianty.
8. Kliknij Zakończ. Image Asset Studio doda obrazy do mipmap dla różnych 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 dopasowuje się do koloru tapety użytkownika. Aby wyświetlić podgląd aplikacji z motywem otwórz plik launcher.xml, który definiuje Twoją ikonę, a następnie użyj Selektor trybu interfejsu systemu na pasku narzędzi do przełączania tapet i sprawdzania reakcji 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 kliknij Pasek działań i ikony karty.
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ę.

Jest ona widoczna w obszarze Zasób źródłowy po prawej stronie oraz w sekcji obszaru podglądu u dołu kreatora.

3. Opcjonalnie zmień nazwę i opcje wyświetlania:
   • Nazwa – jeśli nie chcesz używać nazwy domyślnej, wpisz nową. 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ć małe litery tylko znaki, 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ń, z zachowaniem formatu obrazu. Aby pozostawić zasób źródłowy niezmieniony, 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 dialogowym Wybierz kolor, wybierz 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 graficzny: src/main/res, src/debug/res, src/release/res, lub zdefiniowany przez użytkownika zestaw źródeł. 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. Zbiór źródeł debugowania służy tylko do debugowania. Aby zdefiniować nowe źródło kliknij 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: Skonfiguruj warianty kompilacji.

W obszarze Katalogi wyjściowe są wyświetlane obrazy i foldery. w których Widok plików projektu Okno Projekt.

6. Kliknij Zakończ.

Image Asset Studio dodaje obrazy z folderów możliwych do rysowania w przypadku: różne 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 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ę.

Jest ona widoczna w obszarze Zasób źródłowy po prawej stronie oraz w sekcji obszaru podglądu u dołu kreatora.

3. Opcjonalnie zmień nazwę i opcje wyświetlania:
   • Nazwa – jeśli nie chcesz używać nazwy domyślnej, wpisz nową. 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ć małe litery tylko znaki, 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 format obrazu. 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 -10% i 50%. Jeśli wybierz Przytnij, najpierw nastąpi przycięcie.

   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 graficzny: src/main/res, src/debug/res, src/release/res, lub zdefiniowany przez użytkownika zestaw źródeł. 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. Zbiór źródeł debugowania służy tylko do debugowania. Aby zdefiniować nowe źródło kliknij 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: Skonfiguruj warianty kompilacji.

W obszarze Katalogi wyjściowe są wyświetlane obrazy i foldery. w których Widok plików projektu Okno 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łaj 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" />

Możesz uzyskać dostęp do zasobów obrazów tylko z wątku głównego.

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);

Zobacz 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 pobrać ikonę programu uruchamiającego. res/drawable.
3. Znajdź podfolder o nazwie ikony, którą chcesz usunąć.

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

4. Wybierz folder i naciśnij klawisz Delete.

Możesz też wybrać Edytuj > Usuń. Możesz też kliknąć prawym przyciskiem myszy i wybierz 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ąć. Musisz usunąć lub zastąpić te odwołania, aby móc skompilować projekt.

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 wszystkie błędy spowodowane częściami kodu, które odwołują się do .

Android Studio zaznacza te błędy w kodzie. Gdy usuniesz wszystkie pliki referencyjne z możesz znowu skompilować projekt.