Creare icone delle app (visualizzazioni)

Implementazione di Jetpack Compose

Questa pagina include informazioni sulla creazione e l'utilizzo di icone delle app specifiche per i layout basati su View. Per informazioni più complete sulla creazione di icone delle app, consulta Crea icone delle app, che illustra il nostro framework UI consigliato.

Creare un'icona della barra delle azioni o della scheda

Utilizza Image Asset Studio per creare icone della barra delle azioni e delle schede per i layout basati su View.

Le icone della barra delle azioni sono elementi grafici posizionati nella barra delle azioni e che rappresentano singoli elementi di azione. Per ulteriori informazioni, consulta Aggiunta e gestione delle azioni, Barra delle app - Material Design {:.external} e Progettazione della barra delle azioni.

Le icone delle schede sono elementi grafici utilizzati per rappresentare le singole schede in un'interfaccia con più schede. Ogni icona della scheda ha due stati: non selezionato e selezionato. Per saperne di più, consulta Creare viste di scorrimento con schede e Schede - Material Design.

Image Asset Studio posiziona le icone nelle posizioni corrette nelle directory res/drawable-<density>/.

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. Utilizza appcompat e altre librerie di supporto per distribuire la tua UI 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. Le risorse grafiche vettoriali sono adatte a icone semplici e possono ridurre le dimensioni dell'app.

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

  1. Nel campo Tipo di icona, seleziona Icone della barra delle azioni e delle schede.

  2. Seleziona un Tipo di asset, poi specifica l'asset nel campo sottostante:

    • Nel campo Clip Art, fai clic sul pulsante.

      Nella finestra di dialogo Seleziona icona, seleziona un'icona materiale e poi 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 in basso nella procedura guidata.

  3. (Facoltativo) Modifica il nome e le opzioni di visualizzazione:

    • Nome: se non vuoi utilizzare il nome predefinito, digita un nuovo nome. Se il nome della risorsa esiste già nel progetto, come indicato da un errore nella parte inferiore della procedura guidata, viene 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 invariata la risorsa di origine, seleziona No.

    • Spaziatura interna: se vuoi regolare la spaziatura interna dell'asset sorgente su tutti e quattro i lati, sposta il cursore. Seleziona un valore compreso tra -10% e 50%. Se selezioni anche Taglia, il taglio viene eseguito per primo.

    • Tema: seleziona HOLO_LIGHT o HOLO_DARK. In alternativa, per specificare un colore nella finestra di dialogo Seleziona colore, seleziona PERSONALIZZATO e poi fai clic sul campo Colore personalizzato.

    Image Asset Studio crea l'icona all'interno di un quadrato trasparente, quindi c'è un po' di spazio sui bordi. Il padding fornisce spazio sufficiente per l'effetto icona con ombra standard.

  4. Fai clic su Avanti.

  5. (Facoltativo) Modifica la directory delle risorse:

    • Res Directory: seleziona il set di risorse in cui vuoi aggiungere l'asset immagine: src/main/res, src/debug/res, src/release/res o un set di risorse definito dall'utente. Il set di risorse principale si applica a tutte le varianti di compilazione, incluse quelle di debug e di rilascio. I set di risorse di debug e di rilascio sostituiscono il set di risorse principale e si applicano a una versione di una build. Il set di risorse di debug è riservato al debug. Per definire un nuovo set di risorse, seleziona File > Struttura progetto > app > Tipi di compilazione. Ad esempio, potresti definire un insieme di risorse beta e creare una versione di un'icona che includa il testo "BETA" nell'angolo in basso a destra. Per saperne di più, consulta Configurare le varianti di build.

    L'area Directory di output mostra 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 drawable per le diverse densità.

Fare riferimento a una risorsa immagine nel codice

In genere puoi fare riferimento a una risorsa immagine in modo generico nel codice e quando l'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 la risorsa disegnabile in un 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 dell'interfaccia utente, come attività, frammenti, layout, visualizzazioni e così via.

  • Se la tua app utilizza la Support Library, puoi fare riferimento a una risorsa immagine nel codice XML con un'istruzione app:srcCompat. Ad esempio:

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

Puoi accedere alle risorse delle immagini solo dal thread principale.

Dopo aver aggiunto 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 ImageView per utilizzare la risorsa drawable/myimage.png:

Kotlin

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

Java

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

Per saperne di più, consulta la sezione Accedere alle risorse dell'app.