Un layout definisce la struttura visiva che un utente deve usare per interfacciarsi con la tua app, ad esempio in un'attività. Android offre una vasta gamma di librerie, punti di partenza canonici e tecniche per visualizzare e posizionare i contenuti.
Possessi guadagnati
Rispetta le aree sicure dei dispositivi, che includono parti dell'UI come ritagli del display, riquadri edge-to-edge, display edge, tastiere software e barre di sistema.
Azione: fornisci un layout flessibile per consentire agli utenti di interagire con la tastiera.
Video 1: offrire un layout flessibile per consentire agli utenti di interagire
Mantieni le interazioni essenziali, come la navigazione principale, in un'area dello schermo raggiungibile.
Figura 1: i pulsanti di azione mobili (FAB) forniscono un punto di interazione raggiungibile e ben visibile Utilizza il contenimento per raggruppare contenuti correlati in modo da guidare l'utente attraverso contenuti e azioni.
Figura 2: schede che utilizzano il contenimento esplicito per raggruppare i contenuti con azioni correlate Fornisci allineamento coerente tra contenuti simili ed elementi dell'interfaccia utente.
Cosa non fare: interrompere la leggibilità a causa di spazi incoerenti come gli elementi, il che può far apparire i design indistinti.
Azione: stabilisci una spaziatura coerente tra gli elementi simili.
Figura 3: non interrompere la leggibilità Non scegliere un layout verticale o idealizzato: considera le diverse proporzioni, classi di dimensioni e risoluzioni che gli utenti potrebbero incontrare.
Non sovraccaricare gli utenti con troppe azioni per visualizzazione.
Quando crei layout personalizzati, indica in che modo i contenuti devono trovarsi all'interno del layout utilizzando termini di allineamento, vincoli o gravità. Indica in che modo le immagini devono rispondere al container per essere visualizzate correttamente.
Parti della schermata tipica di un'app Android
La maggior parte delle app per Android comprende regioni chiamate barre di sistema, l'area di navigazione e il corpo.
Barre di sistema
La barra di stato e la barra di navigazione, collettivamente chiamate barre di sistema, mostrano informazioni importanti quali il livello della batteria, l'ora e gli avvisi di notifica e offrono un'interazione diretta con il dispositivo ovunque ti trovi. Scopri di più sulle barre di sistema.
Le barre di sistema sono parte integrante dell'interfaccia del dispositivo. Aggiungili come livello superiore dei tuoi progetti per assicurarti che vengano presi in considerazione nel layout dello schermo. In caso contrario, gli utenti potrebbero erroneamente supporre che l'intento sia quello di nasconderli, perdendo l'opportunità di applicare stili al testo e che la spaziatura potrebbe risultare disattivata.
Aggiungi le barre come livello superiore. Utilizza android:navigationBarColor e android:statusBarColor per applicare i colori alle barre di sistema nel tema della tua app.
Regione di navigazione
La navigazione rappresenta le diverse caratteristiche che consentono a un utente di navigare all'interno dell'app, accedere ad azioni importanti o sulla piattaforma Android.
Regione del corpo
L'area del corpo contiene i contenuti dello schermo. Il corpo del contenuto è composto da raggruppamenti e parametri di layout aggiuntivi. Deve continuare nelle regioni della barra di navigazione e di sistema.
Dichiara WindowCompat.setDecorFitsSystemWindows(window, false) per
gli inserti edge-to-edge.
Per determinare la composizione e i pattern di navigazione appropriati per il tuo layout, cerca di capire in che modo gli utenti interagiscono con i tuoi contenuti e come navigano nell'architettura delle informazioni dell'app. Queste informazioni possono aiutarti a concentrarti maggiormente sugli utenti mediante la creazione di un'interfaccia utente su cui gli utenti possono agire.
Composizione e struttura dei contenuti
Crea un flusso e un ritmo flessibili con una struttura e metodi di contenimento per i tuoi contenuti.
Struttura di base: usa margini e colonne per i guardrail visivi
Per iniziare a creare una struttura solida con sistemi di protezione coerenti, aggiungi margini e colonne ai tuoi layout.
I margini forniscono spaziatura sui bordi sinistro e destro dello schermo e dei contenuti. Un valore di margine standard per il dimensionamento compatto è 16 dp, ma i margini dovrebbero adattarsi per supportare schermi più grandi. Le azioni e i contenuti del corpo dell'app devono rientrare entro questi margini.
In questo passaggio puoi anche garantire zone o inserti sicuri inseriti. Gli inserti della barra di sistema impediscono che le azioni cruciali cadano sotto le barre di sistema. Per maggiori dettagli, consulta Disegna i contenuti dietro le barre di sistema.
Usa le colonne per creare una struttura a griglia flessibile per un allineamento coerente e per fornire una definizione verticale a un layout dividendo il contenuto all'interno dell'area del corpo. I contenuti vanno nelle aree dello schermo che includono colonne. Queste colonne conferiscono struttura al layout, offrendo una struttura comoda per organizzare gli elementi.
Utilizza una griglia a colonne per allineare i contenuti a una griglia sottostante, mantenendo però un dimensionamento flessibile. La griglia delle colonne può contenere diversi fattori di forma, modificando le dimensioni delle colonne e il numero di colonne in base alle dimensioni dello schermo in determinati punti, permettendo al contempo la scalabilità dei contenuti. Evita di usare una griglia a colonne troppo granulare, perché è proprio a questo scopo la griglia di base: fornisce unità di spaziatura coerenti.
Fai attenzione a creare una griglia di righe di accompagnamento, in quanto può limitare la scalabilità orizzontale dei contenuti in base a orientamenti e fattori di forma. In genere, stabilire regole di spaziatura interna fornirà la coerenza visiva necessaria.
Utilizza il contenimento per raggruppare visivamente gli elementi
Per contenimento si intende l'utilizzo insieme di spazi bianchi ed elementi visibili per creare un raggruppamento visivo. Un container è una forma che rappresenta un'area racchiusa. In un singolo layout, puoi raggruppare elementi che condividono funzionalità o contenuti simili e separarli da altri elementi utilizzando spazi aperti, caratteri tipografici e divisori.
Puoi raggruppare elementi simili con uno spazio vuoto o una divisione visibile per guidare l'utente attraverso i contenuti.
Il contenimento implicito usa gli spazi vuoti per raggruppare visivamente i contenuti in modo da creare confini dei container, mentre il contenimento esplicito usa oggetti come linee di divisione e schede per raggruppare i contenuti.
La figura seguente mostra un esempio di utilizzo del contenimento implicito per contenere l'intestazione e il testo principale. La griglia delle colonne viene utilizzata per allineare e creare i raggruppamenti. Le evidenziazioni sono contenute esplicitamente all'interno delle schede. Usare icone e gerarchia dei tipi per una maggiore separazione visiva.
Posizionamento dei contenuti
Android offre diversi modi per gestire gli elementi dei contenuti nei rispettivi container, inclusi gravità, spazio e scalabilità.
Gravity è uno standard per posizionare un oggetto all'interno di un container potenzialmente più grande per casi d'uso specifici. La figura seguente mostra esempi di posizionamento degli oggetti iniziale e centrale (1), orizzontale superiore e centrale (2), in basso a sinistra (3) e fine e destra (1).
Scalabilità
La scalabilità è fondamentale per adattarsi a contenuti dinamici, orientamento del dispositivo e dimensioni dello schermo. Gli elementi possono rimanere fissi o essere scalati.
È importante notare come le immagini vengono visualizzate all'interno dei rispettivi container con scalabilità e posizione è importante per assicurarsi che abbiano l'aspetto desiderato dell'immagine nonostante il contesto del dispositivo, altrimenti l'elemento principale dell'immagine potrebbe apparire tagliato, le immagini potrebbero essere troppo piccole o grandi per il layout o altri effetti indesiderati.
I contenuti senza annotazioni possono avere un aspetto diverso da quello che ti aspettavi o che vorresti.
Contenuti in primo piano
Molti elementi hanno interazioni, scorrimento e posizionamento integrati con slot o scaffold. Alcuni elementi possono essere modificati in modo che rimangano fissi anziché reagire allo scorrimento, ad esempio i pulsanti di azione mobili (FAB) che ospitano azioni critiche.
Allineamento
Utilizza AlignmentLine per creare linee di allineamento personalizzate, che possono essere utilizzate dai layout principali per allineare e posizionare i componenti secondari.
Cosa non fare: interrompere la leggibilità inserendo una spaziatura incoerente come gli elementi, il che potrebbe far apparire i design indistinti.
Azione: stabilisci una spaziatura coerente tra gli elementi simili.
Layout dei componenti
I componenti di Material 3 forniscono le proprie configurazioni e i propri stati per l'interazione e i contenuti.
Compose offre comodi layout per combinare i componenti di Material Material in schemi di schermo comuni. I componibili come Scaffold forniscono slot per vari componenti e altri elementi dello schermo. Scopri di più su Material components e layout.
Layout e pattern di navigazione
Se la tua app contiene più destinazioni che gli utenti possono attraversare, ti consigliamo di utilizzare abbinamenti di layout e navigazione comunemente utilizzati da altre app. Poiché molti utenti possiedono già i modelli mentali per questi abbinamenti, la tua app sarà più intuitiva per loro.
Abbinamenti di layout e navigazione
La barra di navigazione e il riquadro a scomparsa di navigazione modale vengono utilizzati come pattern di navigazione principali per le viste del layout principale e le destinazioni di navigazione principali.
La barra di navigazione può contenere da tre a cinque destinazioni nello stesso livello gerarchico. Questo componente si traduce nella barra di navigazione per gli schermi di grandi dimensioni.
Sebbene il riquadro di navigazione a scomparsa possa contenere più di cinque destinazioni di navigazione, il pattern non è ideale quanto la barra di navigazione perché è necessario raggiungere la barra superiore nelle dimensioni compatte.
Le schede di Material 3 e la barra dell'app in basso sono pattern di navigazione secondari che puoi utilizzare per integrare la navigazione principale o apparire nelle visualizzazioni secondarie.
Azioni del layout
Fornire controlli per consentire agli utenti di compiere azioni. I pattern comuni includono azioni nella barra superiore, pulsante di azione mobile (FAB) e menu.
Per le azioni di massima importanza, un FAB fornisce all'utente un pulsante grande
e in evidenza. Fornisci una sola azione alla volta a questo livello. Un FAB può apparire in diverse dimensioni e in un formato espanso, che include un'etichetta. Usa Scaffold per fissare un FAB, assicurandoti che sia sempre visibile anche quando scorri.
Puoi inserire le azioni secondarie all'interno della barra superiore o, se sono raggruppate accanto a contenuti correlati, all'interno della pagina.
Aggiungi eventuali altre azioni che non sono necessarie tempestivamente o spesso, aggiungile in un menu extra.
Layout canonici
Utilizza layout canonici come punto di partenza, composizioni pronte all'uso che aiutano i layout ad adattarsi ai casi d'uso e alle dimensioni dello schermo più comuni. Questi layout sono estetici e funzionali e derivano dalle linee guida di Material 3.
Il framework Android include componenti specializzati che rendono l'implementazione dei layout semplice e affidabile utilizzando le API Jetpack Compose o Views.
Layout dei dettagli dell'elenco
Un layout dei dettagli dell'elenco consente agli utenti di esplorare elenchi di elementi con informazioni descrittive, esplicative o di altro tipo (i dettagli dell'elemento). Per le dimensioni dello schermo compatto, è visibile solo la visualizzazione elenco o dettagliata. Mostrando una raccolta di contenuti in un layout basato su righe, gli elenchi costituiscono la forma più comune di layout per le app. Il dettaglio elenco è ideale per app di messaggistica, gestori di contatti, browser di file o qualsiasi app in cui i contenuti possono essere organizzati come elenco di elementi che rivelano informazioni aggiuntive.
I contenuti possono essere statici o dinamici.
- I contenuti dinamici sono contenuti che la tua app pubblica all'istante e sono ideali per mostrare contenuti generati dagli utenti o rispecchiare le preferenze o le azioni dell'utente. Ad esempio, immagina un'app di foto con un elenco scorrevole di foto generate dagli utenti, univoco per ogni utente, che cambia man mano che l'utente carica altre immagini. Queste immagini sono contenuti dinamici.
- I contenuti statici rappresentano contenuti hardcoded e modificabili solo apportando modifiche direttamente al codice dell'app. Esempi di contenuti statici sono immagini e testo visibili a tutti gli utenti.
Il file Figma Now in Android fornisce diversi esempi di layout. L'esempio seguente mostra una raccolta unidimensionale di contenuti.
Esplora gli elenchi di Material 3 per ulteriori linee guida sulla progettazione su componenti e specifiche degli elenchi.
Layout del feed
Un layout del feed organizza elementi di contenuti equivalenti in una griglia configurabile per visualizzare rapidamente e comodamente una grande quantità di contenuti. Consulta le linee guida di Material 3 per l'utilizzo delle schede in una raccolta. I feed possono essere configurati basati su elenchi o griglia su display compatti, in genere in schede o riquadri. I contenuti possono essere dinamici, ovvero "inviati" da una sorgente esterna dinamica, come un'API.
Un layout a griglia è composto da righe e colonne costituite da principi di contenimento impliciti o espliciti. Per ulteriori informazioni, consulta la sezione relativa al contenimento in questa pagina. Un layout a griglia può essere applicato più rigidamente o sfalsato per variare le righe e le colonne. Entrambe dovrebbero applicare coerenza in termini di spaziatura e logica per evitare di confondere gli utenti. Consulta le linee guida di Material 3 sulla progettazione dei feed.
Puoi implementare un layout del feed in Compose con elenchi e griglie lente o in Visualizzazioni con RecyclerView o CardView.
Layout del riquadro di supporto
Una visualizzazione mobile potrebbe richiedere contenuti o controlli di supporto. In genere sotto forma di fogli o finestre di dialogo, possono aiutare la visualizzazione principale a rimanere attiva e in ordine. Consulta le linee guida M3 sull'utilizzo del layout canonico del riquadro di supporto.
Scopri di più sulle linee guida M3 per i fogli inferiori.
Layout relativi
Input, contenuti o altre azioni possono apparire l'uno accanto all'altro o vincolati a un container principale. I layout possono essere più personalizzati, ma assicurati di seguire la coerenza tra raggruppamento, colonne e spaziatura.
I layout possono anche utilizzare una combinazione di tipi di layout. Ad esempio, puoi associare un carosello o uno scorrimento orizzontale a schede verticali. In alternativa, potresti presentare un grafico personalizzato con dati di elenchi verticali.
Puoi presentare contenuti in righe o colonne a scorrimento con righe e colonne lazy.
Scopri di più sulle nozioni di base del layout di Compose e sui componenti di un componibile.
L'autenticazione è un layout relativo comune, come mostrato nella figura che segue.
Il layout a schermo intero è un altro layout comune, usato nella modalità immersiva.
Se utilizzi Visualizzazioni anziché Scrivi, puoi utilizzare
ConstraintLayout per disporre le visualizzazioni in base alle relazioni tra
le viste di pari livello e il layout principale, in modo da creare layout complessi e di grandi dimensioni.
ConstraintLayout ti consente di creare interamente la tua creatività trascinandola anziché
modificare il file XML con l'editor di layout. Scopri di più sulla creazione di una UI con l'editor di layout.
Adattare i layout
Il design adattivo consiste nel progettare layout che si adattano a punti di interruzione e dispositivi specifici. Di solito consideriamo la larghezza del dispositivo per determinare dove modificare o adattare il layout. Sia il web che Android utilizzano concetti di progettazione reattiva, come immagini e griglie flessibili, per creare layout che si adattino meglio al contesto.
Per linee guida di progettazione su come adattare i layout alle dimensioni dello schermo espanso, leggi la guida per gli sviluppatori Supporto di diverse dimensioni dello schermo in Compose e la pagina Applicazione del layout M3. Puoi anche dare un'occhiata alla galleria canonica per gli schermi grandi di Android per trovare ispirazione e implementare i layout per schermi grandi.
Anche se non tutte le app devono essere disponibili su schermi di tutte le dimensioni, consentono agli utenti di avere una maggiore libertà in termini di ergonomia, usabilità e qualità dell'app.
- Puoi progettare schermate chiave (comunicare i concetti essenziali o la tua app) utilizzando le dimensioni dei corsi come punti di interruzione che fungano da linee guida.
- Oppure progetta i contenuti in modo che agiscano in modo reattivo indicando in che modo i contenuti devono essere limitati, espansi o adattati al flusso.
Per ulteriori informazioni sui layout, consulta la pagina Informazioni sul layout di Material Design 3 (M3).
WebView
Un componente WebView è una visualizzazione che mostra le pagine web in-app. Nella maggior parte dei casi, consigliamo di utilizzare un browser web standard, come Chrome, per mostrare contenuti all'utente. Per scoprire di più sui browser web, leggi la guida per chiamare un browser con un intent.