Icone adattive

L'icona adattiva, o AdaptiveIconDrawable, può essere visualizzata in modo diverso a seconda delle funzionalità del singolo dispositivo e del tema dell'utente. Le icone adattive vengono utilizzate principalmente dall'Avvio app nella schermata Home, ma possono essere utilizzate anche nelle scorciatoie, nell'app Impostazioni, nelle finestre di dialogo di condivisione e nella schermata Panoramica. Le icone adattive vengono utilizzate in tutti i fattori di forma di Android.

A differenza delle immagini bitmap, le icone adattive possono adattarsi a diversi casi d'uso:

  • Forme diverse: un'icona adattiva può mostrare una serie di forme su diversi modelli di dispositivi. Ad esempio, può mostrare una forma circolare su un dispositivo OEM e uno scoiattolo (una forma tra un quadrato e un cerchio) su un altro dispositivo. Ogni OEM di dispositivi deve fornire una maschera, che il sistema utilizza per eseguire il rendering di tutte le icone adattive con la stessa forma.

    Una GIF che mostra un'animazione ricorrente della stessa icona Android di esempio, con forme diverse a seconda della maschera utilizzata: un cerchio e due diversi tipi di striature
    Figura 1. Le icone adattive supportano svariate maschere, che variano da un dispositivo all'altro.

  • Effetti visivi: un'icona adattiva supporta una varietà di effetti visivi coinvolgenti, che vengono mostrati quando gli utenti posizionano o spostano l'icona nella schermata Home.

    Una GIF che mostra esempi di due icone circolari di esempio Android, animate per mostrare la risposta dell'utente. La prima icona mostra il logo Android oscillante a sinistra e poi a destra, poi verso l'alto e il basso all'interno del cerchio. La seconda icona si espande e si contrae di nuovo.
    Figura 2. Esempi di effetti visivi mostrati da un'icona adattiva.

  • Temi utente: a partire da Android 13 (livello API 33), gli utenti possono tematizzare le proprie icone adattive. Se un utente abilita le icone delle app a tema, attivando l'opzione Icone a tema nelle impostazioni di sistema e Avvio app supporta questa funzionalità, il sistema utilizza la colorazione dello sfondo e del tema scelti dall'utente per determinare il colore di tinta.

    Un'immagine che mostra esempi di tre dispositivi Android, ognuno dei quali mostra un tema utente diverso con tonalità diverse: il primo mostra uno sfondo con tonalità scure, il secondo uno sfondo dorato e il terzo uno sfondo grigio chiaro con tonalità bluastre. In ogni esempio, le icone hanno ereditato la colorazione dello sfondo e si adattano perfettamente.
    Figura 3. Icone adattive ereditate dallo sfondo e dai temi dell'utente.

    Nei seguenti scenari, la schermata Home non mostra l'icona dell'app a tema, bensì l'icona dell'app adattiva o standard:

    • Se l'utente non attiva le icone delle app a tema.
    • Se la tua app non fornisce un'icona monocromatica.
    • Se Avvio app non supporta le icone delle app a tema.

Progettare icone adattive

Per fare in modo che l'icona adattiva supporti forme, effetti visivi e temi utente diversi, il design deve soddisfare i seguenti requisiti:

  • Devi fornire due livelli per la versione a colori dell'icona: uno per il primo piano e uno per lo sfondo. I livelli possono essere vettori o bitmap, sebbene siano preferibili i vettori.

    Un'immagine che mostra un esempio di un livello in primo piano (immagine a sinistra) e di un livello di sfondo (immagine a destra). In primo piano, l'icona su 16 lati di un logo Android di esempio è centrato in una zona sicura 66 x 66. La zona sicura è centrata in un container 108 x 108. Lo sfondo mostra le stesse dimensioni misurate per la zona sicura e il container, ma solo uno sfondo blu e nessun logo.
    Figura 4. Icone adattive definite usando livelli in primo piano e di sfondo. La zona sicura 66 x 66 rappresentata è l'area che non viene mai tagliata da una maschera sagomata definita da un OEM.
    Un'immagine che mostra l'icona dell'immagine precedente sovrapposta a una maschera circolare.
    Figura 5. Un esempio di come appaiono i livelli in primo piano e di sfondo con una maschera circolare.

  • Se vuoi supportare la tematizzazione delle icone delle app, fornisci un singolo livello per la versione monocromatica dell'icona.

    Un'immagine che mostra un esempio di livello icona monocromatico (immagine a sinistra) e anteprime di colori (immagine a destra). Il livello monocromatico mostra l'icona a 16 lati di un logo Android di esempio centrato in una zona sicura 66 x 66. La zona sicura è centrata in un container 108 x 108. Le anteprime dei colori mostrano questo livello visualizzato quando viene applicato a temi utente di colori diversi (arancione, rosa, giallo e verde).
    Figura 6. Un livello icona monocromatico (a sinistra) con esempi di anteprime a colori (a destra).

  • Ridimensiona tutti i livelli su 108 x 108 dp.

  • Utilizza icone con bordi puliti. I livelli non devono presentare maschere o ombre sullo sfondo intorno al contorno dell'icona.

  • Utilizza un logo di almeno 48 x 48 dp. Non deve superare i 66 x 66 dp, perché i 66 x 66 dp interni dell'icona compaiono all'interno dell'area visibile mascherata.

I 18 dp esterni su ciascuno dei quattro lati dei livelli sono riservati al mascheramento e alla creazione di effetti visivi come parallasse o pulsanti.

Per informazioni su come creare icone adattive con Android Studio, consulta il nostro modello Figma delle icone delle app per Android o la documentazione di Android Studio per la creazione di icone di Avvio app. Inoltre, leggi il post del blog Designing Adaptive Icons .

Aggiungere l'icona adattiva all'app

Le icone adattive, proprio come le icone non adattive, vengono specificate utilizzando l'attributo android:icon nel file manifest dell'app.

Un attributo facoltativo, android:roundIcon, viene utilizzato dagli strumenti di avvio app che rappresentano le app con icone circolari e può essere utile se l'icona dell'app include uno sfondo circolare come parte fondamentale del suo design. Questi strumenti di avvio sono necessari per generare icone delle app applicando una maschera circolare a android:roundIcon e questa garanzia potrebbe consentirti di ottimizzare l'aspetto dell'icona dell'app, ad esempio ingrandindo leggermente il logo e garantendo che, quando ritagliato, lo sfondo circolare sia al vivo.

Lo snippet di codice riportato di seguito illustra entrambi gli attributi, ma per la maggior parte delle app viene specificato soltanto android:icon:

<application
    ...
    android:icon="@mipmap/ic_launcher"
    android:roundIcon="@mipmap/ic_launcher_round"
    ...>
</application>

Dopodiché, salva l'icona adattiva su res/mipmap-anydpi-v26/ic_launcher.xml. Utilizza l'elemento <adaptive-icon> per definire le risorse del livello monocromatico, di sfondo e in primo piano per le icone. Gli elementi interni <foreground>, <background> e <monochrome> supportano immagini sia vettoriali che bitmap.

L'esempio seguente mostra come definire gli elementi <foreground>, <background> e <monochrome> in <adaptive-icon>:

<?xml version="1.0" encoding="utf-8"?>
...
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
    <background android:drawable="@drawable/ic_launcher_background" />
    <foreground android:drawable="@drawable/ic_launcher_foreground" />

    // Starting with Android 13 (API level 33), you can opt-in to providing a
    // <monochrome> drawable.
    <monochrome android:drawable="@drawable/ic_launcher_monochrome" />
</adaptive-icon>
...

Puoi anche definire gli elementi disegnabili come elementi incorporandoli negli elementi <foreground>, <background> e <monochrome>. Il seguente snippet mostra un esempio di come eseguire questa operazione con il disegno in primo piano.

<?xml version="1.0" encoding="utf-8"?>
...
<foreground>
   <inset
       android:insetBottom="18dp"
       android:insetLeft="18dp"
       android:insetRight="18dp"
       android:insetTop="18dp">
       <shape android:shape="oval">
           <solid android:color="#0000FF" />
       </shape>
   </inset>
</foreground>
...

Se vuoi applicare la stessa maschera e lo stesso effetto visivo alle scorciatoie delle icone adattive normali, utilizza una delle seguenti tecniche:

  • Per le scorciatoie statiche, utilizza l'elemento <adaptive-icon>.
  • Per le scorciatoie dinamiche, chiama il metodo createWithAdaptiveBitmap() quando le crei.

Per ulteriori informazioni sull'implementazione delle icone adattive, consulta Implementazione delle icone adattive. Per ulteriori informazioni sulle scorciatoie, consulta la panoramica delle scorciatoie app.

Risorse aggiuntive

Consulta le seguenti risorse per ulteriori informazioni sulla progettazione e sull'implementazione delle icone adattive.