Anche se la tua app può contenere solo testo e colori, potresti voler aggiungere altri elementi visivi, ad esempio un logo o un'illustrazione. Android prevede best practice specifiche per l'aggiunta di elementi grafici alla tua app, nonché varie librerie per creare effetti grafici o aggiungere movimento.
Un asset Android è definito drawable, un tipo di risorsa che viene disegnata sullo schermo. Sono inclusi, a titolo esemplificativo, bitmap, forme e vettori.
Quando crei immagini ed elementi grafici, tieni presente quanto segue:
- Evita di includere testo immutabile negli asset.
- Se possibile, utilizza per primi i formati vettoriali.
- Fornisci gli asset per i bucket di risoluzione.
- Crea una cornice sufficiente tra le immagini di sfondo e il testo.
- Sebbene Android sia in grado di ottenere diversi effetti per le immagini, come sfumature, colori e sfocature, alcuni hanno prestazioni più costose.
- I disegni vettoriali animati rappresentano un formato scalabile per le piccole animazioni dell'interfaccia utente.
Come esportare le risorse per Android
- Formatta i nomi degli asset in minuscolo.
- Imposta risorse semplici da esportare come SVG.
- Imposta immagini complesse, come le foto, da esportare come WebP, PNG, JPG.
- Imposta la scalabilità della risoluzione corretta come illustrato nella seguente tabella.
| Dimensioni schermo | Scala |
|---|---|
MDPI |
x1 |
hdpi |
x1,5 |
xhdpi |
x2 |
xxhdpi |
x3 |
xxxhdpi |
x4 |
Se vuoi, puoi convertire i file SVG in VD (Vector Drawables) utilizzando Android Studio. Organizza gli asset in directory corrispondenti alla risoluzione per il trasferimento, come mostrato nell'immagine seguente. Ad esempio, includi le dimensioni dello schermo nei nomi delle cartelle.
Tipi di risorse
Android supporta i seguenti tipi di asset.
Vector
Un grafico vettoriale è un formato senza perdita di dati, il che significa che non perde informazioni visive quando viene scalato. I vettori sono composti da punti matematici riempiti per creare un'immagine.
Formati vettoriali
Android supporta i seguenti formati di immagini vettoriali: SVG e Drawables vettoriali.
I file Vector Drawable sono simili agli SVG, ma sono basati su XML. Supportano anche vari attributi, come i gradienti. Per maggiori informazioni sugli elementi supportati,
consulta VectorDrawable. Puoi convertire i file SVG in disegni vettoriali tramite Vector Asset Studio.
Casi d'uso
A causa delle loro dimensioni ridotte, è meglio creare icone utilizzando un formato vettoriale. Un Drawable vettoriale animato può essere utilizzato per aggiungere il movimento a un'icona.
- Le illustrazioni sono elementi grafici che aiutano a indirizzare gli utenti, a spiegare concetti o a esprimere idee. In genere esprimono lo stile del brand.
- Le illustrazioni hero sono molto incentrate sugli altri contenuti e vengono utilizzate per definire l'aspetto generale e spiegare le informazioni principali.
- Le illustrazioni spot sono più piccole, in genere in linea, e supportano i contenuti circostanti.
Raster
Un elemento grafico con perdita di dati o che perde dettagli quando manipolato tramite compressione o ridimensionamento è composto da pixel che costituiscono l'immagine. Le immagini raster vengono utilizzate comunemente per immagini dettagliate, come foto o gradienti complessi. Poiché le immagini ridimensionate perdono i dettagli, esporta più risoluzioni per queste immagini.
Formati raster
Android supporta i seguenti formati di immagini raster: PNG, GIF, JPG, WebP.
Casi d'uso
I casi d'uso includono immagini con una gamma di texture che generano un'ampia tavolozza e gradazione dei colori o immagini che avrebbero un insieme troppo complesso di punti di Bézier. I casi d'uso possono includere anche asset fotografici molto dettagliati, come foto di prodotti, dettagli sulla località e altro.
Taglie
Quando crei gli asset, tieni presente quanto segue:
Bucket di risoluzione
L'app deve fornire grafici bitmap basati su intervalli o bucket di densità dello schermo. Il sistema operativo mostra automaticamente l'immagine corretta al dispositivo in questione utilizzando questi bucket. Assicurati che su ogni dispositivo vengano visualizzate grafiche ad alta precisione fornendo asset per ogni bucket.
Spaziatura interna
Le icone e gli asset di piccole dimensioni simili dovrebbero includere una spaziatura interna intrinseca (integrata) per dare all'asset abbastanza spazio per il touch target e garantire un dimensionamento coerente.
Nome dei file
Gli asset Android sono minuscoli e non includono un suffisso di risoluzione.
Mantieni una convenzione e una struttura di denominazione coerenti per mantenere i file e i progetti organizzati. Ad esempio, assegnare un nome alle icone con il prefisso "ic_..." può aiutarti a organizzare tutte le icone del progetto e a identificare rapidamente le icone durante lo sviluppo.
Altri asset per app
Icone delle app
Le icone di Avvio app si trovano nella schermata Home. Trova icone monocromatiche nell'UI di sistema, incluse notifiche monocromatiche, barra di stato e widget.
Formatta le icone delle app come elementi risorsa vettoriali per le icone adattive e PNG per le icone precedenti. Per scoprire di più su come creare e visualizzare l'anteprima dell'icona dell'app, consulta Creare e visualizzare l'anteprima delle icone delle app.
Schermate iniziali
A partire da Android 12, la tua app può mostrare una schermata iniziale animata con l'icona dell'app quando viene aperta.
Posizionamento
Nota come le immagini devono ridimensionarsi e posizionarsi sullo schermo. Adatta, Ritaglia, FillHeight, FillLarghezza, FillBounds, Inside e Nessuno sono disponibili per impostare il ridimensionamento di un'immagine.
Puoi anche ritagliare le immagini in una forma per creare effetti aggiuntivi.
Ritaglio adattabile
Per visualizzare le immagini in modo reattivo, definisci come un'immagine verrà ritagliata in base a intervalli di punti di interruzione diversi. In diversi intervalli di punti di interruzione, il ritaglio può:
- Mantieni un rapporto fisso.
- Adattati a proporzioni diverse.
- Mantieni altezze delle immagini fisse.
Mantieni un rapporto
Il ridimensionamento delle immagini può contenere un rapporto fisso tra gli intervalli di punti di interruzione.
Adattarsi a proporzioni diverse
Le proporzioni delle immagini possono cambiare adattandosi a intervalli di punti di interruzione diversi. Ad esempio, nella Figura 9, le proporzioni delle immagini cambiano da 1:1 a 16:9 tra i punti di interruzione.
Altezze delle immagini fisse
Il dimensionamento delle immagini può mantenere un'altezza e una larghezza fluide fisse in tutti gli intervalli di punti di interruzione. L'immagine mantiene un'altezza fissa, mentre la larghezza tra i punti di interruzione è fluida.
Effetti
Android include vari effetti immagine integrati. Ecco alcuni effetti comuni:
Gradienti
In Scrivi, utilizza un Pennello per disegnare qualcosa sullo schermo. Puoi usare pennelli diversi per disegnare forme con colori o sfumature diversi. Utilizza i pennelli sfumatura integrati per ottenere diversi effetti sfumatura. Questi pennelli consentono di specificare l'elenco di colori da cui creare una sfumatura.
I pennelli con gradiente sono in grado di utilizzare sfumature più avanzate grazie all'aggiunta di interruzioni di colore e di riquadri, purché tu fornisca l'elenco dei colori e delle percentuali in cui si verifica l'interruzione. Utilizza contenitori o forme per ritagliare gradienti, riempimenti con colori a tinta unita o immagini.
Sfocatura
Applica effetti di sfocatura alle immagini utilizzando il metodo Modifier.blur() e
specificando i rapporti di sfocatura. Usa le sfocature con cautela, perché possono influire
sulle prestazioni e sono disponibili solo su dispositivi con Android 12 e versioni successive. Per
ulteriori informazioni, vedi Sfocare un'immagine componibile.
Modalità di fusione
Android è in grado di modificare le immagini tramite operazioni booleane e modalità di combinazione simili che si trovano nei software di progettazione, come unione o moltiplicazione. Per ulteriori informazioni, vedi UnisciMode.
Tinta
Utilizzare le modalità di fusione e i riempimenti per colorare gli asset. In questo modo puoi avere un singolo asset a cui applicare colori diversi, il che può ridurre la quantità di asset prodotti.
Movimento
Le immagini possono essere animate in modo programmatico per creare animazioni, invece di caricare file di animazione. Ciò può consentire una maggiore flessibilità e risorse di asset ridotte.
Gli elementi disegnabili vettoriali animati ti consentono di creare piccole animazioni dell'interfaccia utente. In caso contrario, scopri di più sull'animazione con i fotogrammi chiave in Scrivi. Per ulteriori informazioni sugli effetti immagine, leggi l'articolo Personalizzare un'immagine.