Un layout definisce la struttura visiva affinché un utente si interfaccia con la tua app, ad esempio in un'attività. Android offre una serie di librerie, punti di partenza canonici e tecniche per visualizzare e posizionare i contenuti.
Possessi guadagnati
Rispetta le aree di sicurezza dei dispositivi, che includono parti dell'interfaccia utente come ritagli del display, riquadri edge-to-edge, display perimetrali, tastiere software e barre di sistema.
Azione: fornisci un layout flessibile per consentire agli utenti di interagire con la tastiera.
Video 1: fornire 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 floating (FAB) offrono un punto di interazione ben visibile e raggiungibile Utilizza il contenimento per raggruppare contenuti correlati e guidare l'utente attraverso contenuti e azioni.
Figura 2: schede che utilizzano il contenimento esplicito per raggruppare i contenuti con azioni correlate Fornisci un allineamento coerente tra contenuti simili ed elementi dell'interfaccia utente.
No: interrompere la leggibilità utilizzando spazi incoerenti come elementi, per far sì che i design appaiano indistinti.
Sì: stabilisci una spaziatura coerente tra elementi simili.
Figura 3: non interrompere la leggibilità Non attenerti alla modalità verticale o a un layout idealizzato: prendi in considerazione le diverse proporzioni, classi di dimensioni e risoluzioni che gli utenti potrebbero incontrare.
Non sovraccaricare l'utente con troppe azioni per visualizzazione.
Quando crei layout personalizzati, annota la posizione dei contenuti all'interno del layout, utilizzando i termini di allineamento, vincoli o gravità. Includi in che modo le immagini devono rispondere al contenitore per essere visualizzate correttamente.
Parti della tipica schermata di un'app Android
La maggior parte delle app per Android è composta da regioni chiamate barre di sistema, area di navigazione e corpo.
Barre di sistema
La barra di stato e la barra di navigazione, note collettivamente come barre di sistema, mostrano informazioni importanti come il livello della batteria, l'ora e gli avvisi di notifica e forniscono un'interazione diretta con il dispositivo da qualsiasi luogo. 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 presumere che l'intento sia quello di nasconderli, perdere l'opportunità di applicare stili e la spaziatura.
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 autorizzazioni che consentono a un utente di navigare all'interno della tua app, accedere ad azioni importanti o sulla piattaforma Android.
Regione del corpo
La regione 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
insiemi edge-to-edge.
Per determinare i pattern di composizione e navigazione appropriati per il layout, cerca di capire in che modo gli utenti interagiscono con i tuoi contenuti e in che modo esplorano l'architettura delle informazioni dell'app. Questa comprensione può aiutarti a creare una UI più focalizzata sugli utenti, su cui gli utenti possono intervenire.
Composizione e struttura dei contenuti
Crea un flusso e un ritmo flessibili con una struttura e metodi di contenimento per i tuoi contenuti.
Struttura della base: utilizza margini e colonne per i guardrail visivi
Per iniziare a creare una struttura solida con sistemi di protezione coerenti, aggiungi margini e colonne ai layout.
I margini forniscono spazio sui bordi sinistro e destro dello schermo e dei contenuti. Il valore standard di margine per il dimensionamento compatto è di 16 dp, ma i margini dovrebbero adattarsi per adattarsi a schermi più grandi. I contenuti e le azioni del corpo dell'app devono rispettare e allinearsi a questi margini.
In questo passaggio puoi anche assicurarti di inserire zone o inserti sicuri. I riquadri delle barre di sistema impediscono che le azioni fondamentali ricadano sotto le barre del sistema. Per maggiori dettagli, consulta Disegnare i contenuti dietro le barre di sistema.
Utilizza le colonne per creare una struttura a griglia flessibile in modo da garantire un allineamento coerente e per fornire una definizione verticale a un layout dividendo i contenuti all'interno dell'area del corpo. I contenuti vengono inseriti nelle aree dello schermo contenenti le colonne. Queste colonne conferiscono struttura al layout e offrono una comoda struttura per organizzare gli elementi.
Utilizza una griglia a colonne per allineare i contenuti a una griglia sottostante, mantenendo al contempo il dimensionamento flessibile. La griglia delle colonne può adattarsi a diversi fattori di forma modificando le dimensioni e il numero di colonne in base alle dimensioni dello schermo in determinati punti, consentendo al contempo la scalabilità dei contenuti. Evita di essere troppo granulare con la griglia delle colonne, perché è questo lo scopo della griglia di riferimento: fornire unità di spaziatura coerenti.
Fai attenzione a stabilire una griglia di righe di accompagnamento, in quanto può limitare il ridimensionamento orizzontale dei contenuti in base a orientamenti e fattori di forma. In genere, stabilire regole di spaziatura interna fornirà la coerenza visiva necessaria.
Usa il contenimento per raggruppare visivamente gli elementi
Per contenimento si intende l'utilizzo combinato di spazio bianco e di elementi visibili per creare un raggruppamento visivo. Un container è una forma che rappresenta un'area chiusa. In un unico layout, puoi raggruppare gli elementi che condividono funzionalità o contenuti simili e separarli dagli 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 utilizza gli spazi vuoti per raggruppare visivamente i contenuti al fine di creare confini del contenitore, mentre il contenimento esplicito utilizza 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 in modo esplicito all'interno delle schede. L'uso dell'iconografia e della gerarchia dei tipi per una maggiore separazione visiva.
Posizionamento dei contenuti
Android offre diversi modi per gestire gli elementi dei contenuti nei rispettivi contenitori, tra cui gravità, spaziatura e scalabilità, per poterli posizionare in modo appropriato.
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 all'inizio e al centro (1), in alto e al centro in orizzontale (2), in basso a sinistra (3) e in estremità e a destra (1).
Scalabilità
Il ridimensionamento è 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 container con scalabilità e posizione è importante per garantire che l'immagine appaia come si vuole 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 non annotati 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 gli elementi secondari.
No: interrompere la leggibilità utilizzando spaziatura non coerente, come gli elementi, che possono far apparire i design indesiderati.
Sì: stabilisci una spaziatura coerente tra 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 layout pratici 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ù sui componenti e sul layout di Material.
Layout e schemi di navigazione
Se la tua app contiene più destinazioni che gli utenti possono attraversare, ti consigliamo di utilizzare combinazioni di layout e navigazione comunemente utilizzate da altre app. Poiché molti utenti possiedono già i modelli mentali per questi abbinamenti, la tua app sarà più intuitiva per loro.
Abbinamento di layout e navigazione
La barra di navigazione e il riquadro a scomparsa di navigazione modale vengono utilizzati come schemi di navigazione principali per le viste del layout padre 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, il pattern non è l'ideale come la barra di navigazione a causa della necessità di raggiungere la barra superiore nelle dimensioni compatte.
Le schede di Material 3 e la barra in basso dell'app sono pattern di navigazione secondari che puoi utilizzare per integrare la navigazione principale o apparire nelle viste secondarie.
Azioni del layout
Fornire controlli per consentire agli utenti di compiere azioni. I pattern più comuni includono le azioni nella barra superiore, il pulsante di azione mobile (FAB) e i 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ò essere visualizzato in più dimensioni e in una forma espansa, che include un'etichetta. Utilizza Scaffold per fissare un FAB, assicurandoti che sia sempre
visibile anche se scorri.
Puoi inserire le azioni secondarie nella barra superiore o, se sono raggruppate accanto a contenuti correlati, all'interno della pagina.
Aggiungi in un menu extra le eventuali azioni che non sono necessarie in modo rapido o frequente.
Layout canonici
Utilizza i 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 elenco-dettagli
Un layout elenco-dettaglio consente agli utenti di esplorare elenchi di elementi con informazioni descrittive, esplicative o altre informazioni supplementari: i dettagli dell'elemento. Per gli schermi compatti, sono visibili solo la visualizzazione elenco o dettagliata. Gli elenchi, che mostrano una raccolta di contenuti in un layout a righe, costituiscono la forma più comune di layout per le app. L'opzione List-detail è ideale per app di messaggistica, gestori di contatti, browser di file o qualsiasi app in cui i contenuti possono essere organizzati come un elenco di elementi che rivela informazioni aggiuntive.
I contenuti possono essere statici o dinamici.
- I contenuti dinamici sono contenuti che la tua app pubblica al volo e sono ideali per mostrare contenuti generati dagli utenti o per riflettere le preferenze o le azioni dell'utente. Ad esempio, immagina un'app di foto con un elenco scorrevole di foto generate dagli utenti, che è univoco per ogni utente e cambia man mano che l'utente carica più immagini. Queste immagini sono contenuti dinamici.
- I contenuti statici rappresentano contenuti hardcoded che possono essere modificati solo apportando modifiche direttamente al codice dell'app. Esempi di contenuti statici sono immagini e testo che ogni utente potrebbe vedere.
Il file Figma Ora in Android fornisce diversi esempi di layout. L'esempio seguente mostra una raccolta unidimensionale di contenuti.
Esplora gli elenchi di Material 3 per ulteriori indicazioni sulla progettazione di componenti e specifiche.
Layout del feed
Un layout del feed dispone gli elementi di contenuti equivalenti in una griglia configurabile per visualizzare in modo rapido e pratico 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 in base a elenchi o griglie su display compatti, solitamente in schede o riquadri. I contenuti possono essere dinamici, ovvero "inseriti" da una sorgente esterna dinamica, come un'API.
Un layout a griglia è composto da righe e colonne composte 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 scaglionato per variare le righe e le colonne. Entrambe devono avere un'applicazione coerente 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 Scrivi con Elenchi o griglie lente oppure in Visualizzazioni con RecyclerView o CardView.
Layout del riquadro di supporto
Una visualizzazione mobile potrebbe richiedere contenuti o controlli di supporto. Solitamente sotto forma di fogli o finestre di dialogo, possono aiutare la visualizzazione principale a rimanere attiva e ordinata. Consulta le linee guida M3 per l'utilizzo del layout canonico nel riquadro di supporto.
Scopri di più sulle linee guida M3 per la pagina inferiore.
Layout relativi
Input, contenuti o altre azioni possono apparire l'uno rispetto all'altro o vincolati a un contenitore principale. I layout possono essere più personalizzati, ma assicurati di seguire raggruppamento, colonne e spaziatura coerenti.
I layout possono anche utilizzare una combinazione di tipi di layout. Ad esempio, puoi associare un carosello o uno scorrimento orizzontale alle schede verticali. In alternativa, puoi presentare un grafico personalizzato con i dati dell'elenco verticale.
Puoi presentare i contenuti in righe o colonne a scorrimento con righe e colonne lazy.
Scopri di più sulle nozioni di base del layout di Scrivi e su ciò che costituisce una 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 viste in base alle relazioni tra le viste di pari livello e il layout principale, consentendo layout complessi e di grandi dimensioni.
ConstraintLayout consente di creare interamente tramite trascinamento anziché
modificare il file XML con l'editor di layout. Scopri di più sulla creazione di un'interfaccia utente con l'editor di layout.
Adatta i layout
Il design adattivo è la pratica di 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 sulla progettazione su come adattare i layout alle dimensioni dello schermo espanse, leggi la guida per gli sviluppatori Generare layout adattivi in Scrivi e nella pagina Applicazione del layout di M3. Puoi anche dare un'occhiata alla galleria canonica per schermi grandi di Android per trovare ispirazione e implementare layout per schermi di grandi dimensioni.
Sebbene non sia necessario che tutte le app siano disponibili su schermi di ogni dimensione, gli utenti consentono una maggiore libertà in termini di ergonomia, usabilità e qualità delle app.
- Puoi progettare schermate chiave (comunicare i concetti essenziali o la tua app) utilizzando le dimensioni dei corsi come punti di interruzione che fungono da linee guida.
- Oppure progetta i contenuti in modo che agiscano in modo reattivo, indicando in che modo debbano essere vincolati, espansi o adattati il flusso.
Per ulteriori informazioni sui layout, consulta la pagina Informazioni sul layout di Material Design 3 (M3).
WebView
Una 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 fornire contenuti all'utente. Per scoprire di più sui browser web, leggi la guida per chiamare un browser con un intent.