Icone adattive

Un'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.

Un'icona adattiva può adattarsi a diversi casi d'uso:

  • Forme diverse. Un'icona adattiva può mostrare varie 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 della 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 tipi diversi di scarabocchi
    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 accattivanti, che vengono mostrati quando gli utenti posizionano o muovono l'icona nella schermata Home.

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

  • Temi utente: a partire da Android 13 (livello API 33), gli utenti possono creare temi per 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 della tinta.

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

Nei seguenti scenari, la schermata Home non mostra l'icona dell'app a tema, ma mostra invece 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 dell'app,
  • Se Avvio app non supporta icone delle app a tema.

Progetta icone adattive

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

  • Devi fornire due livelli per la versione a colori dell'icona: uno per la primo piano e uno per lo sfondo.

    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 si vede 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. Le icone adattive definite utilizzando i livelli in primo piano e in background. La zona sicura 66 x 66 rappresentata è l'area che non viene mai ritagliata 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 dell'aspetto dei livelli in primo piano e di sfondo con una maschera circolare.

  • Se vuoi supportare i temi utente 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 di anteprime a colori (immagine a destra). Il livello monocromatico mostra l'icona con 16 lati di un logo Android di esempio centrato in una zona sicura 66 x 66. La zona sicura è centrata all'interno di un container 108 x 108. Le anteprime dei colori mostrano questo livello 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 a 108 x 108 dp.

  • Utilizza icone con bordi puliti. I livelli non devono avere maschere o ombre di 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 scoprire come creare icone adattive con Android Studio, consulta il nostro modello Figma delle icone per le app Android o consulta la documentazione di Android Studio per la creazione di icone di Avvio app. Inoltre, consulta il post del blog Designing Adaptive Icons .

Aggiungere l'icona adattiva all'app

Per aggiungere un'icona adattiva all'app, aggiorna l'attributo android:icon nel file manifest dell'app per specificare una risorsa disegnabile. Puoi anche definire una risorsa icona disegnabile utilizzando l'attributo android:roundIcon, ma solo se richiedi un asset icona diverso per le maschere circolari, ad esempio se il tuo branding si basa su una forma circolare.

Il seguente snippet di codice illustra entrambi gli attributi, ma per la maggior parte delle app viene specificato solo android:icon:

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

Successivamente, in res/mipmap-anydpi-v26/ic_launcher.xml, crea nella tua app risorse disegnabili alternative per garantire la compatibilità con le versioni precedenti di Android 8.0 (livello API 26). Utilizza l'elemento <adaptive-icon> per definire i disegni in primo piano, lo sfondo e i livelli monocromatici delle icone. Gli elementi interni <foreground>, <background> e <monochrome> supportano l'attributo android:drawable.

L'esempio seguente mostra come definire gli elementi <foreground>, <background> e <monochrome> all'interno di <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 racchiudendoli negli elementi <foreground>, <background> e <monochrome>. Lo snippet seguente mostra un esempio di come eseguire questa operazione con il disegnabile 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 alle tue scorciatoie la stessa maschera e lo stesso effetto visivo 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, vedi Panoramica delle scorciatoie delle app.

Risorse aggiuntive

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