Crea icone delle app

Le icone aiutano gli utenti a identificare la tua app e le azioni al suo interno. Puoi accedere alla suite di icone Material e aggiungerle alla tua app direttamente con Compose. Per creare icone o icone personalizzate per la tua app con Visualizzazioni, Android Studio offre Image Asset Studio.

Aggiungere icone all'interno dell'app con Scrivi

Con Compose, puoi importare la raccolta di Compose Material o la libreria di Compose Material 3 per accedere a qualsiasi icona di Material. Dopodiché utilizza il componibile Icon per aggiungere icone alla tua app. Le icone Material sono più utili per le icone della barra delle azioni, delle schede o delle notifiche. Per ulteriori informazioni, consulta la sezione Icone Material.

Se devi creare icone personalizzate, ad esempio l'icona di Avvio applicazioni, utilizza Image Asset Studio. Per le icone in Avvio applicazioni, il file AndroidManifest.xml deve fare riferimento alla posizione mipmap/. Image Asset Studio aggiunge questo codice automaticamente. Il seguente codice del file manifest fa riferimento all'icona ic_launcher nella directory mipmap/:

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

Informazioni su Image Asset Studio

Android Studio include uno strumento chiamato Image Asset Studio che ti aiuta a generare icone per le tue app a partire da icone materiali, immagini personalizzate e stringhe di testo. Genera un insieme di icone alla risoluzione appropriata per ogni densità di pixel supportata dalla tua app. Image Asset Studio posiziona le icone appena generate in cartelle specifiche della densità all'interno della directory res/ del tuo progetto. In fase di runtime, Android utilizza la risorsa appropriata in base alla densità dello schermo del dispositivo su cui è in esecuzione la tua app.

Image Asset Studio consente di generare i seguenti tipi di icone:

• Icone Avvio app
• Barra delle azioni e icone delle schede
• Icone di notifica

Le seguenti sezioni descrivono i tipi di icone che puoi creare e gli input di immagini e testo che puoi utilizzare.

Icone adattive e precedenti in Avvio applicazioni

Un'icona in Avvio applicazioni è una grafica che rappresenta la tua app per gli utenti. Può:

• Vengono visualizzate nell'elenco di app installate su un dispositivo e nella schermata Home.
• Rappresentare le scorciatoie nella tua app (ad esempio, l'icona di una scorciatoia di un contatto che apre informazioni dettagliate su un contatto).
• Essere utilizzata da app Avvio app.
• Aiuta gli utenti a trovare la tua app su Google Play.

Le icone di Avvio app possono essere visualizzate in diverse forme su diversi modelli di dispositivi e sono disponibili su Android 8.0 (livello API 26) e versioni successive. Android Studio 3.0 introduce il supporto per la creazione di icone adattive tramite Image Asset Studio. Image Asset Studio genera anteprime di un'icona adattiva in forme cerchio, scoiatto, quadrato arrotondato e quadrato, oltre a un'anteprima al vivo dell'icona. Image Asset Studio genera inoltre anteprime legacy, rotonde e di Google Play Store dell'icona. Un'icona in Avvio applicazioni precedente è una grafica che rappresenta l'app sulla schermata Home di un dispositivo e nella finestra di Avvio applicazioni. Le icone in Avvio applicazioni precedenti sono destinate all'uso sui dispositivi con Android 7.1 (livello API 25) o versioni precedenti, che non supportano le icone adattive e non vengono visualizzate in forme diverse a seconda dei modelli di dispositivi.

Image Asset Studio posiziona le icone nelle posizioni corrette delle directory res/mipmap-density/. Crea inoltre un'immagine da 512 x 512 pixel appropriata per il Google Play Store.

Ti consigliamo di utilizzare lo stile Material Design per le icone in Avvio applicazioni, anche se supporti versioni precedenti di Android.

Per ulteriori informazioni, vedi le sezioni Icone di Avvio app adattive e Icone dei prodotti - Material Design.

Barra delle azioni e icone delle schede

Le icone della barra delle azioni sono elementi grafici posizionati nella barra delle azioni e che rappresentano le singole attività. Per ulteriori informazioni, vedi le sezioni Aggiunta e gestione delle azioni, App Bar - Material Design e Action Bar Design.

Le icone delle schede sono elementi grafici utilizzati per rappresentare singole schede in un'interfaccia multi-tab. Ogni icona della scheda presenta due stati: non selezionata e selezionata. Per ulteriori informazioni, consulta la sezione Creazione di visualizzazioni a scorrimento con le schede e Schede - Material Design.

Image Asset Studio posiziona le icone nella posizione corretta delle res/drawable-density/ directory.

Ti consigliamo di utilizzare lo stile Material Design per le icone della barra delle azioni e delle schede, anche se supporti versioni precedenti di Android. Usa appcompat e altre librerie di supporto per fornire la tua UI di material design alle versioni precedenti della piattaforma.

In alternativa a Image Asset Studio, puoi utilizzare Vector Asset Studio per creare icone della barra delle azioni e delle schede. Gli elementi di disegno vettoriali sono adatti per icone semplici e possono ridurre le dimensioni dell'app.

Icone di notifica

Una notifica è un messaggio che puoi mostrare all'utente al di fuori della normale UI della tua app. Image Asset Studio posiziona le icone delle notifiche nelle posizioni appropriate delle directory res/drawable-density/:

• Le icone per Android 2.2 (livello API 8) e versioni precedenti vengono inserite nelle directory res/drawable-density/.
• Le icone per Android da 2.3 a 2.3.7 (livelli API da 9 a 10) vengono inserite nelle directory res/drawable-density-v9/.
• Le icone per Android 3 (livello API 11) e versioni successive vengono inserite nelle directory res/drawable-density-v11/.

Se la tua app supporta Android da 2.3 a 2.3.7 (livelli API da 9 a 10), Image Asset Studio genera una versione grigia dell'icona. Le versioni Android successive utilizzano l'icona bianca generata da Image Asset Studio.

Consulta le sezioni Notifiche; Notifiche Material Design; Notifiche, Modifiche ad Android 5.0; Notifiche, Android 4.4 e versioni precedenti; e Icone della barra di stato, Android 3.0 e versioni precedenti per ulteriori informazioni.

Clip art

Image Asset Studio semplifica l'importazione delle icone dei materiali Google nei formati VectorDrawable e PNG: seleziona semplicemente un'icona da una finestra di dialogo. Per ulteriori informazioni, consulta la sezione Icone Material.

Immagini

Puoi importare immagini personalizzate e modificarle in base al tipo di icona. Image Asset Studio supporta i seguenti tipi di file: PNG (opzione preferita), JPG (accettabile) e GIF (sconsigliata).

Stringhe di testo

Image Asset Studio ti consente di digitare una stringa di testo in diversi caratteri e di posizionarla su un'icona. Converte l'icona basata su testo in file PNG per densità diverse. Puoi usare i caratteri installati sul computer.

Esegui Image Asset Studio

Per avviare Image Asset Studio:

1. Nella finestra Progetto, seleziona la visualizzazione Android.
2. Fai clic con il tasto destro del mouse sulla cartella res e seleziona Nuovo > Asset immagine.

   

3. Continua seguendo i passaggi per:
   • Crea icone adattivo e legacy in Avvio applicazioni.
   • Crea una barra delle azioni o un'icona della scheda.
   • Crea un'icona di notifica.

Creare icone in Avvio applicazioni adattive e precedenti

Dopo aver aperto Image Asset Studio, puoi aggiungere le icone adattive e precedenti seguendo questa procedura:

1. Nel campo Tipo di icona, seleziona Icone di avvio (adattive e legacy).
2. Nella scheda Livello in primo piano, seleziona un Tipo di asset e specifica l'asset nel campo sottostante:
   • Seleziona Immagine per specificare il percorso di un file immagine.
   • Seleziona Clip Art per specificare un'immagine dal set di icone di Material Design.
   • Seleziona Testo per specificare una stringa di testo e selezionare un carattere.
3. Nella scheda Livello di sfondo, seleziona un tipo di asset e specifica l'asset nel campo sottostante. Puoi selezionare un colore o specificare un'immagine da utilizzare come livello di sfondo.
4. Nella scheda Legacy, rivedi le impostazioni predefinite e conferma di voler generare icone legacy, rotonde e del Google Play Store.
5. (Facoltativo) Modifica le impostazioni di nome e visualizzazione di ogni scheda Livello di primo piano e Livello di sfondo:
   • Nome: se non vuoi utilizzare il nome predefinito, digitane uno nuovo. Se il nome della risorsa esiste già nel progetto, come indicato da un errore nella parte inferiore della procedura guidata, verrà sovrascritto. Il nome può contenere solo caratteri minuscoli, trattini bassi e cifre.
   • Taglia: per regolare il margine tra la grafica dell'icona e il bordo nell'asset di origine, seleziona Sì. Questa operazione rimuove lo spazio trasparente, mantenendo le proporzioni. Per lasciare invariato l'asset di origine, seleziona No.
   • Colore: per modificare il colore di un'icona Clip art o di testo, fai clic sul campo. Nella finestra di dialogo Seleziona colore, specifica un colore e fai clic su Scegli. Il nuovo valore viene visualizzato nel campo.
   • Ridimensiona: utilizza il cursore per specificare un fattore di ridimensionamento in percentuale e ridimensionare un'icona Immagine, Clip art o Testo. Questo controllo è disabilitato per il livello di sfondo quando specifichi un tipo di asset Colore.
6. Fai clic su Avanti.
7. (Facoltativo) Modifica la directory delle risorse: seleziona il set di origine delle risorse a cui vuoi aggiungere l'asset immagine: src/main/res, src/debug/res, src/release/res, oppure un set di origine personalizzato. Il set di origine principale si applica a tutte le varianti della build, inclusi il debug e la release. I set di debug e origini di rilascio sostituiscono il set di origine principale e si applicano a una versione di una build. Il set di origine di debug è solo a scopo di debug. Per definire un nuovo set di origine, seleziona File > Struttura del progetto > app > Tipi di build. Ad esempio, puoi definire un set di origini beta e creare una versione di un'icona che includa il testo "BETA" nell'angolo in basso a destra. Per maggiori informazioni, consulta Configurare le varianti della build.
8. Fai clic su Fine. Image Asset Studio aggiunge le immagini alle cartelle mipmap per le diverse densità.

Visualizza l'anteprima delle icone delle app a tema

Android Studio ti consente di visualizzare in anteprima l'icona dell'app a tema e di testare come si adatta al colore dello sfondo dell'utente. Per visualizzare l'anteprima dell'icona dell'app a tema, apri il file launcher.xml che definisce l'icona, quindi utilizza il selettore Modalità UI di sistema sulla barra degli strumenti per cambiare sfondo e vedere come reagisce l'icona.

Per scoprire di più su come creare icone delle app a tema, consulta Icone adattive.

Selettore della

Crea una barra delle azioni o un'icona della scheda

Dopo aver aperto Image Asset Studio, puoi aggiungere una barra delle azioni o un'icona della scheda seguendo questi passaggi:

1. Nel campo Tipo di icona, seleziona Icone della barra delle azioni e della scheda.
2. Seleziona un Tipo di asset e specifica l'asset nel campo sottostante:
• Fai clic sul pulsante nel campo Clip Art.

Nella finestra di dialogo Seleziona icona, seleziona un'icona materiale e fai clic su OK.

• Nel campo Percorso, specifica il percorso e il nome file dell'immagine. Fai clic su ... per utilizzare una finestra di dialogo.
• Nel campo Testo, digita una stringa di testo e seleziona un carattere.

L'icona viene visualizzata nell'area Asset di origine a destra e nell'area di anteprima nella parte inferiore della procedura guidata.

3. Se vuoi, modifica le opzioni del nome e di visualizzazione:
   • Nome: se non vuoi utilizzare il nome predefinito, digitane uno nuovo. Se il nome della risorsa esiste già nel progetto, come indicato da un errore nella parte inferiore della procedura guidata, verrà sovrascritto. Il nome può contenere solo caratteri minuscoli, trattini bassi e cifre.
   • Taglia: per regolare il margine tra la grafica dell'icona e il bordo nell'asset di origine, seleziona Sì. Questa operazione rimuove lo spazio trasparente, mantenendo le proporzioni. Per lasciare invariato l'asset di origine, seleziona No.
   • Spaziatura interna: se vuoi regolare la spaziatura interna degli asset di origine su tutti e quattro i lati, sposta il cursore. Seleziona un valore compreso tra -10% e 50%. Se selezioni anche Taglia, il taglio avviene prima.
   • Tema: seleziona HOLO_LIGHT o HOLO_DARK. In alternativa, per specificare un colore nella finestra di dialogo Seleziona colore, seleziona PERSONALIZZATO e fai clic sul campo Colore personalizzato.

   Image Asset Studio crea l'icona all'interno di un quadrato trasparente che impedisce la spaziatura interna sui bordi. La spaziatura interna offre spazio sufficiente per l'effetto icona ombra standard.

4. Fai clic su Avanti.
5. Facoltativamente, modifica la directory della risorsa:
• Directory Res: seleziona il set di origine delle risorse in cui vuoi aggiungere l'asset immagine: src/main/res, src/debug/res, src/release/res, oppure un set di origine definito dall'utente. Il set di origine principale si applica a tutte le varianti della build, inclusi debug e release. I set di debug e origini di rilascio sostituiscono il set di origine principale e si applicano a una versione di una build. Il set di origine di debug è solo a scopo di debug. Per definire un nuovo set di origine, seleziona File > Struttura del progetto > app > Tipi di build. Ad esempio, puoi definire un set di origini beta e creare una versione di un'icona che includa il testo "BETA" nell'angolo in basso a destra. Per maggiori informazioni, consulta Configurare le varianti delle build.

Nell'area Directory di output vengono visualizzate le immagini e le cartelle in cui verranno visualizzate nella visualizzazione File di progetto della finestra Progetto.

6. Fai clic su Fine.

Image Asset Studio aggiunge le immagini nelle cartelle disegnabili per le diverse densità.

Crea un'icona di notifica

Dopo aver aperto Image Asset Studio, puoi aggiungere un'icona di notifica seguendo questi passaggi:

1. Nel campo Tipo di icona, seleziona Icone di notifica.
2. Seleziona un Tipo di asset e specifica l'asset nel campo sottostante:
• Fai clic sul pulsante nel campo Clip Art.

Nella finestra di dialogo Seleziona icona, seleziona un'icona materiale e fai clic su OK.

• Nel campo Percorso, specifica il percorso e il nome file dell'immagine. Fai clic su ... per utilizzare una finestra di dialogo.
• Nel campo Testo, digita una stringa di testo e seleziona un carattere.

L'icona viene visualizzata nell'area Asset di origine a destra e nell'area di anteprima nella parte inferiore della procedura guidata.

3. Se vuoi, modifica le opzioni del nome e di visualizzazione:
   • Nome: se non vuoi utilizzare il nome predefinito, digitane uno nuovo. Se il nome della risorsa esiste già nel progetto, come indicato da un errore nella parte inferiore della procedura guidata, verrà sovrascritto. Il nome può contenere solo caratteri minuscoli, trattini bassi e cifre.
   • Taglia: per regolare il margine tra la grafica dell'icona e il bordo nell'asset di origine, seleziona Sì. Questa operazione rimuove lo spazio trasparente, mantenendo le proporzioni. Per lasciare invariato l'asset di origine, seleziona No.
   • Spaziatura interna: se vuoi regolare la spaziatura interna degli asset di origine su tutti e quattro i lati, sposta il cursore. Seleziona un valore compreso tra -10% e 50%. Se selezioni anche Taglia, viene eseguito prima il taglio.

   Image Asset Studio crea l'icona all'interno di un quadrato trasparente che impedisce la spaziatura interna sui bordi. La spaziatura interna offre spazio sufficiente per l'effetto icona ombra standard.

4. Fai clic su Avanti.
5. Facoltativamente, modifica la directory della risorsa:
• Directory Res: seleziona il set di origine delle risorse in cui vuoi aggiungere l'asset immagine: src/main/res, src/debug/res, src/release/res, oppure un set di origine definito dall'utente. Il set di origine principale si applica a tutte le varianti della build, inclusi debug e release. I set di debug e origini di rilascio sostituiscono il set di origine principale e si applicano a una versione di una build. Il set di origine di debug è solo a scopo di debug. Per definire un nuovo set di origine, seleziona File > Struttura del progetto > app > Tipi di build. Ad esempio, puoi definire un set di origini beta e creare una versione di un'icona che includa il testo "BETA" nell'angolo in basso a destra. Per maggiori informazioni, consulta Configurare le varianti delle build.

Nell'area Directory di output vengono visualizzate le immagini e le cartelle in cui verranno visualizzate nella visualizzazione File di progetto della finestra Progetto.

6. Fai clic su Fine.

Image Asset Studio aggiunge le immagini nelle cartelle disegnabili per le diverse densità e versioni.

Fai riferimento a una risorsa immagine nel codice con View

Normalmente nel codice puoi fare riferimento a una risorsa immagine in modo generico e, quando la tua app viene eseguita, l'immagine corrispondente viene visualizzata automaticamente a seconda del dispositivo:

• Nella maggior parte dei casi, puoi fare riferimento alle risorse immagine come @drawable nel codice XML o Drawable nel codice Java.

Ad esempio, il seguente codice XML di layout mostra il disegno in ImageView:

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

Il seguente codice Java recupera l'immagine come Drawable:

Kotlin

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

Java

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

Il metodo getResources() si trova nella classe Context, che si applica agli oggetti UI come attività, frammenti, layout, viste e così via.

• Se la tua app utilizza la Support Library, puoi fare riferimento a una risorsa immagine in codice XML con un'istruzione app:srcCompat. Ecco alcuni esempi:

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

Puoi accedere alle risorse immagine solo dal thread principale.

Dopo aver trovato una risorsa immagine nella directory res/ del progetto, puoi farvi riferimento dal codice Java o dal layout XML utilizzando il relativo ID risorsa. Il seguente codice Java imposta un elemento ImageView per l'utilizzo della risorsa 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);

Per ulteriori informazioni, consulta l'articolo sull' accesso alle risorse.

Eliminare un'icona da un progetto

Per rimuovere un'icona da un progetto:

1. Nella finestra Progetto, seleziona la visualizzazione Android.
2. Espandi la cartella res/mipmap relativa a un'icona in Avvio applicazioni o la cartella res/drawable per altri tipi di icone.
3. Individua una sottocartella con il nome dell'icona che vuoi eliminare.

Questa cartella contiene l'icona con densità diverse.

4. Seleziona la cartella e premi il tasto Elimina.

In alternativa, seleziona Modifica > Elimina. In alternativa, fai clic con il pulsante destro del mouse sul file e seleziona Elimina.

Viene visualizzata la finestra di dialogo Eliminazione sicura.

5. Se vuoi, puoi selezionare le opzioni per trovare la posizione in cui viene utilizzata l'icona nel progetto e fare clic su OK.

Android Studio elimina i file dal progetto e dal Drive. Tuttavia, se hai scelto di cercare posizioni nel progetto in cui vengono utilizzati i file e sono stati rilevati alcuni utilizzi, puoi visualizzarli e decidere se eliminarli. Devi eliminare o sostituire questi riferimenti per poter compilare correttamente il progetto.

6. Seleziona Crea > Pulisci progetto.

Android Studio rimuove tutti i file immagine generati corrispondenti alla risorsa immagine eliminata. e li rimuove dal progetto e dal Drive.

7. Se necessario, correggi eventuali errori rimanenti dovuti a parti di codice che fanno riferimento alla risorsa.

Android Studio evidenzia questi errori nel codice. Dopo aver rimosso tutti i riferimenti dal codice, puoi creare di nuovo il progetto correttamente.