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 launcher nella schermata Home, ma possono essere utilizzate anche nelle scorciatoie, nell'app Impostazioni, nelle finestre di dialogo di condivisione e nella schermata di 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 una forma a squircle (una forma tra un quadrato e un cerchio) su un altro dispositivo. Ogni OEM del dispositivo 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 di esempio di Android, che mostra forme diverse a seconda della maschera utilizzata: un cerchio e poi due tipi diversi di squircle
    Figura 1. Le icone adattive supportano una varietà di maschere, che variano da un dispositivo all'altro.

  • Effetti visivi: un'icona adattiva supporta una varietà di effetti visivi coinvolgenti, 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 a forma di cerchio, 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 il launcher supporta questa funzionalità, il sistema utilizza la colorazione 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 QPR 2, Android applica automaticamente i temi alle icone delle app che non forniscono le proprie.

    Un esempio di tre dispositivi Android, ognuno dei quali mostra un tema utente diverso con tonalità diverse: il primo mostra uno sfondo con tonalità scura; il secondo mostra uno sfondo con tonalità dorata; il terzo mostra uno sfondo con tonalità grigio chiaro con sfumature bluastre. In ogni esempio, le icone hanno ereditato la colorazione dello sfondo e si integrano 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 mostra 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 il launcher non supporta le icone delle app a tema.

Progettare icone adattive

Per assicurarti che la tua 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 vettoriali o bitmap, anche se sono preferibili i vettori.

    Esempio di un livello in primo piano (a sinistra) e di un livello di sfondo (a destra). In primo piano viene mostrata l'icona a 16 lati di un logo Android di esempio centrato all'interno di un'area di sicurezza di 66 x 66. L'area di sicurezza è centrata all'interno di un contenitore 108x108. Lo sfondo mostra le stesse dimensioni misurate per l'area di sicurezza e il contenitore, ma solo uno sfondo blu e nessun logo.
    Figura 4. Icone adattive definite utilizzando i livelli di primo piano e sfondo. La area di sicurezza 66x66 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. Un esempio di come appaiono insieme i livelli di primo piano e 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 anteprime a colori (a destra). Il livello monocromatico mostra l'icona a 16 lati di un logo Android di esempio centrato all'interno di un'area di sicurezza di 66 x 66. La zona sicura è centrata all'interno di un contenitore 108x108. Le anteprime dei colori mostrano la visualizzazione di questo livello quando viene applicato a temi utente di colori diversi (arancione, rosa, giallo e verde).
    Figura 6. Un livello di icona monocromatico (a sinistra) con esempi di anteprime a colori (a destra).

  • Imposta le dimensioni di tutti i livelli su 108x108 dp.

  • Utilizza icone con bordi puliti. I livelli non devono avere maschere o ombreggiature di sfondo attorno al contorno dell'icona.

  • Utilizza un logo di almeno 48x48 dp. Non deve superare i 66x66 dp, perché i 66x66 dp interni dell'icona vengono visualizzati all'interno della finestra di visualizzazione mascherata.

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

Per scoprire come creare icone adattive utilizzando Android Studio, consulta il modello Figma per le icone delle app Android o la documentazione di Android Studio per la creazione di icone del launcher. Leggi anche 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' android:icon attributo nel manifest dell'app.

Un attributo facoltativo, android:roundIcon, viene utilizzato dai launcher 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 launcher sono tenuti a generare le 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 ingrandendo leggermente il logo e assicurandoti che, una volta ritagliato, lo sfondo circolare sia a pagina intera.

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

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

Salva quindi 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, sfondo e monocromatico per le tue icone. Gli elementi interni <foreground>, <background> e <monochrome> supportano sia le immagini vettoriali sia quelle bitmap.

Il seguente esempio mostra come definire <foreground>, <background> e <monochrome> elementi 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 la stessa risorsa disegnabile. Tuttavia, se necessario, puoi creare risorse disegnabili separate per ogni livello.

Puoi anche definire le risorse disegnabili come elementi inlining all'interno degli elementi <foreground>, <background>, e <monochrome>. Il seguente snippet mostra un esempio di come farlo con la risorsa disegnabile di 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 ed effetto visivo alle scorciatoie come alle normali icone adattive, utilizza una delle seguenti tecniche:

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

Per saperne di più sull'implementazione delle icone adattive, consulta Implementare icone adattive. Per saperne di più sulle scorciatoie, consulta Panoramica delle scorciatoie delle app.

Risorse aggiuntive

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

Indietro
Implementare le best practice per le scorciatoie
Avanti
Bolle