Icone adattibili

Intestazione delle icone adattive

Un'icona adattiva, o AdaptiveIconDrawable, può essere visualizzata in modo diverso a seconda delle funzionalità del singolo dispositivo e dei temi dell'utente. Le icone adattive vengono utilizzate principalmente dal programma di avvio sulla 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 Android.

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

  • Forme diverse:un'icona adattiva può mostrare una varietà di forme su diversi modelli di dispositivi. Ad esempio, può mostrare una forma circolare su un dispositivo OEM e un supercerchio (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 ripetuta della stessa icona Android di esempio, con forme diverse a seconda della maschera utilizzata: un cerchio e poi due diversi tipi di supercerchi
    Figura 1. Le icone adattive supportano una serie di maschere, che variano da un dispositivo all'altro.

  • Effetti visivi:un'icona adattiva supporta una serie di effetti visivi accattivanti, che vengono visualizzati quando gli utenti posizionano o spostano l'icona nella schermata Home.

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

  • Temi utente:a partire da Android 13 (livello API 33), gli utenti possono applicare temi alle proprie icone adattive. Se un utente attiva le icone delle app a tema nelle impostazioni di sistema e l'Avvio app supporta questa funzionalità, il sistema utilizza i colori dello sfondo e del tema scelti dall'utente per determinare il colore della tinta delle icone delle app che hanno un livello monochrome nella loro icona adattiva. A partire da Android 16 QPR2, Android applica automaticamente un tema alle icone delle app che non ne forniscono uno proprio.

    Un esempio 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 mostra uno sfondo con tonalità dorate; il terzo mostra uno sfondo con tonalità grigio chiaro con sfumature bluastre. In ogni esempio, le icone hanno ereditato la tonalità dello sfondo e si fondono perfettamente.
    Figura 3. Icone adattive che ereditano lo sfondo e i temi dell'utente.

    Nei seguenti scenari, la schermata Home non mostra l'icona dell'app a tema, ma 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 dell'app monocromatica e il dispositivo dell'utente esegue una versione di Android precedente ad Android 16 QPR 2.
    • Se l'Avvio app non supporta le icone delle app a tema.

Progetta icone adattive

Per assicurarti 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, anche se i vettori sono preferiti.

    Esempio di un livello in primo piano (a sinistra) e di un livello di sfondo (a destra). In primo piano è visibile l'icona a 16 lati di un logo Android di esempio centrato all'interno di una zona di sicurezza di 66 x 66. La zona sicura è centrata all'interno di un container di 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 utilizzando livelli di primo piano e di sfondo. La zona sicura 66 x 66 raffigurata è l'area che non viene mai ritagliata da una maschera sagomata definita da un OEM.
    Un esempio che mostra l'icona della figura precedente sovrapposta a una maschera circolare.
    Figura 5. Esempio di come appaiono insieme i livelli in primo piano e sullo sfondo con una maschera circolare applicata.

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

    Esempio di un livello di icone monocromatiche (a sinistra) e di anteprime dei colori (a destra). Il livello monocromatico mostra l'icona a 16 lati di un logo Android di esempio centrato all'interno di una zona di sicurezza di 66 x 66. La zona di sicurezza è 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 di icone monocromatiche (a sinistra) con esempi di anteprime dei colori (a destra).

  • Dimensiona tutti i livelli a 108 x 108 dp.

  • Utilizza icone con bordi netti. I livelli non devono avere maschere o ombreggiature di sfondo attorno 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 vengono visualizzati all'interno dell'area visibile mascherata.

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

Per scoprire come creare icone adattive utilizzando Android Studio, consulta il modello Figma per le icone delle app per Android o la documentazione di Android Studio per la creazione di icone in Avvio applicazioni. Inoltre, leggi il blog post Designing Adaptive Icons.

Aggiungi l'icona adattiva alla tua app

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

Un attributo facoltativo, android:roundIcon, viene utilizzato dai programmi di avvio che rappresentano le app con icone circolari e può essere utile se l'icona della tua app include uno sfondo circolare come parte fondamentale del suo design. Questi avviatori devono generare icone delle app applicando una maschera circolare a android:roundIcon. Questa garanzia potrebbe consentirti di ottimizzare l'aspetto dell'icona dell'app, ad esempio ingrandendo leggermente il logo e assicurandoti che, quando viene ritagliato, lo sfondo circolare sia al vivo.

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

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

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

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" />
    <monochrome android:drawable="@drawable/ic_launcher_foreground" />
</adaptive-icon>
...

I livelli di primo piano e monocromatico utilizzano lo stesso drawable. Tuttavia, se necessario, puoi creare elementi drawable separati per ogni livello.

Puoi anche definire gli elementi drawable come elementi incorporandoli negli elementi <foreground>, <background> e <monochrome>. Il seguente snippet mostra un esempio di come eseguire questa operazione con l'elemento drawable 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 normali icone adattive, 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 saperne di più sull'implementazione delle icone adattive, consulta Implementazione delle icone adattive. Per saperne di più sulle scorciatoie, consulta Panoramica delle scorciatoie per le app.

Risorse aggiuntive

Per ulteriori informazioni sulla progettazione e sull'implementazione delle icone adattive, consulta le seguenti risorse.

Indietro
Implementare le best practice per le scorciatoie
Avanti
Bolle