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