Icone adattive

Un'icona adattiva oppure AdaptiveIconDrawable, possono essere visualizzati in modo diverso a seconda delle funzionalità del dispositivo e dell'utente a tema. Le icone adattive vengono usate principalmente in Avvio app nella schermata Home. ma possono essere utilizzati anche nelle scorciatoie, nell'app Impostazioni, nelle finestre di dialogo di condivisione e la schermata Panoramica. Le icone adattive vengono usate in tutti i fattori di forma di Android.

In contrasto con la bitmap immagini, le icone adattive possono si adattano ai diversi casi d'uso:

  • Forme diverse: un'icona adattiva può visualizzare svariate forme. su diversi modelli di dispositivi. Ad esempio, può mostrare una forma circolare su un dispositivo OEM e mostrare uno scoiattolo (una forma tra un quadrato e uno cerchio) su un altro dispositivo. Ogni OEM del dispositivo deve fornire una maschera, che per il rendering di tutte le icone adattive con la stessa forma.

    Una GIF che mostra un'animazione ricorrente della stessa icona Android di esempio, che mostrano forme diverse a seconda della maschera utilizzata: un cerchio e poi due diversi tipi di scoiattoli
    . Figura 1. Le icone adattive supportano che variano da un dispositivo all'altro.

  • Effetti visivi. L'icona adattiva supporta una serie di elementi visivi coinvolgenti. effetti, che vengono mostrati quando gli utenti posizionano o spostano l'icona nella casa schermo.

    Una GIF che mostra esempi di due icone Android di esempio a forma di cerchio. animato per mostrare la risposta dell'utente. La prima icona mostra il logo di Android. barcollando a sinistra e poi a destra, poi su e giù all'interno del cerchio. Il secondo si espande e poi si contrae di nuovo.
    . Figura 2. Esempi di effetti visivi visualizzati da un'icona adattiva.
    di Gemini Advanced.
    .

  • Temi relativi agli utenti: a partire da Android 13 (livello API 33), gli utenti possono creare temi le relative icone adattive. Se un utente attiva le icone delle app a tema, attivando Attiva l'opzione di attivazione/disattivazione delle icone a tema nelle impostazioni di sistema e l'Avvio app supporta questa funzionalità. funzione, il sistema utilizza la colorazione dello sfondo scelto dall'utente e tema per determinare il colore della tinta.

    Un'immagine che mostra esempi di tre dispositivi Android, ognuno dei quali mostra una tema utente diverso con tonalità diverse: il primo mostra uno sfondo con tintura scura; la seconda mostra uno sfondo dorato; la terza mostra sfondo con sfondo grigio chiaro con sfumature bluastre. In ogni esempio, il valore hanno ereditato la colorazione dello sfondo e si integrano perfettamente con lo sfondo.
    . Figura 3. Le icone adattive che ereditano sfondo e temi dell'utente.

    Nei seguenti scenari, nella schermata Home non viene visualizzato il tema sull'icona dell'app, che sostituisce 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 le icone delle app a tema.

Progettare icone adattive

Per assicurarti che l'icona adattiva supporti diverse forme, effetti visivi e a tema, il design deve soddisfare i seguenti requisiti:

  • Devi fornire due livelli per la versione a colori dell'icona: uno per in primo piano e una per lo sfondo. Gli strati possono essere vettori le bitmap, sebbene siano preferibili i vettori.

    Un'immagine che mostra un esempio di livello in primo piano (immagine a sinistra) e livello di sfondo (immagine a destra). Il primo piano mostra l'icona a 16 lati di una logo Android di esempio centrato in una zona sicura di 66 x 66. La zona sicura è al centro di un container di 108 x 108. Lo sfondo mostra lo stesso dimensioni misurate per la zona sicura e il contenitore, ma solo un indicatore blu senza logo.
    . Figura 4. Icone adattive definite in primo piano e livelli di sfondo. La zona sicura 66 x 66 raffigurata è l'area che non viene mai tagliato da una maschera sagomata definita da un OEM.
    di Gemini Advanced.
    .
    . Un'immagine che mostra l'icona dell'immagine precedente sovrapposta a un maschera circolare.
    Figura 5. Un esempio di come i contenuti in primo piano e i livelli di sfondo vengono visualizzati insieme con una maschera circolare applicata.

  • Se vuoi supportare la tematizzazione delle icone delle app da parte degli utenti, fornisci un singolo livello per la versione monocromatica dell'icona.

    Un'immagine che mostra un esempio di livello icona monocromatico (immagine a sinistra) e anteprime a colori (immagine a destra). Lo strato monocromatico mostra i 16 lati icona di un logo Android di esempio centrato in una zona sicura 66 x 66. La cassaforte è centrata all'interno di un container di 108 x 108. Le anteprime dei colori mostrano questo livello viene visualizzato quando applicato a temi utente di colore diverso (arancione, rosa, giallo e verde).
    . Figura 6. Un livello icona monocromatico (a sinistra) con esempi di anteprime di colori (a destra).

  • Ridimensiona tutti i livelli a 108 x 108 dp.

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

  • Utilizza un logo di almeno 48 x 48 dp. Non deve superare i 66 x 66 dp, perché la dimensione interna di 66 x 66 dp dell'icona viene visualizzata area visibile.

I 18 dp esterni su ciascuno dei quattro lati dei livelli sono riservati mascheramento e creare effetti visivi come parallasse o lampi.

Per informazioni su come creare icone adattive in Android Studio, visita la nostra App per Android Icona di Figma modello o la documentazione di Android Studio per la creazione di Avvio app icone. Inoltre, leggi il post del blog Designing Adaptive (Designing Adaptive)" Icone di Google.

Aggiungi l'icona adattiva all'app

Le icone adattive, così come le icone non adattive, vengono specificate utilizzando Attributo android:icon nell'app del file manifest.

Un attributo facoltativo, android:roundIcon, è utilizzato da Avvio app che rappresenta con icone circolari e può essere utile se l'icona dell'app include una uno sfondo circolare come parte fondamentale del suo design. Questi lanciatori sono tenuti a generare icone delle app applicando una maschera circolare a android:roundIcon; questo la garanzia può consentirti di ottimizzare l'aspetto dell'icona dell'app, ad esempio esempio, ingrandindo leggermente il logo e assicurando che, se ritagliato, il sfondo circolare. Al vivo.

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

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

Quindi, salva l'icona adattiva su res/mipmap-anydpi-v26/ic_launcher.xml. Utilizza le funzionalità di l'elemento <adaptive-icon> per definire il primo piano, lo sfondo e le risorse del livello monocromatico per le icone. <foreground>, Gli elementi interni <background> e <monochrome> supportano entrambi vettoriali e bitmap.

L'esempio seguente 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" />

    // 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 drawable come elementi incorporandoli nel Elementi <foreground>, <background> e <monochrome>. Le seguenti mostra un esempio di come si esegue questa operazione con il 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 scorciatoie la stessa maschera e lo stesso effetto visivo icone adattive normali, usa una delle seguenti tecniche:

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

Per ulteriori informazioni sull'implementazione delle icone adattive, consulta la sezione Implementazione Adattiva Icone. Per ulteriori informazioni sulle scorciatoie, vedi Scorciatoie applicazioni Panoramica.

Risorse aggiuntive

Consulta le risorse seguenti per ulteriori informazioni sulla progettazione che implementano le icone adattive.