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.
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.
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.
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.
Se vuoi supportare la tematizzazione delle icone delle app, fornisci un singolo livello per la versione monocromatica dell'icona.
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.
- Modello di pagina della community Figma
- Informazioni sulle icone adattive Android
- Progettare icone adattive
- Implementazione delle icone adattive
- Creare icone delle app in Android Studio
- Specifiche relative alla struttura delle icone Google Play