Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Le visualizzazioni non scorrevoli si concentrano su informazioni rapide e offrono valore agli utenti con
poca o nessuna interazione. Per questo motivo, può essere difficile integrare
il comportamento reattivo in questi layout.
Componenti di layout non scorrevoli preimpostati
Finestra di dialogo
Una finestra di dialogo è una sovrapposizione temporanea che occupa l'intero schermo. Consente agli utenti
di eseguire una singola azione.
Considera i seguenti punti:
Le finestre di dialogo ti aiutano a verificare che i contenuti siano stati presi in considerazione.
Le finestre di dialogo devono comunicare le informazioni in modo diretto e devono essere dedicate al
completamento di un'attività.
Le finestre di dialogo devono essere visualizzate in risposta a un'attività o un'azione dell'utente, con informazioni pertinenti
o contestuali.
Overlay di conferma
La sovrapposizione di conferma mostra un messaggio di conferma all'utente per un breve periodo. Utilizza questo componente per attirare l'attenzione dell'utente dopo l'esecuzione di un'azione.
Apri su smartphone
L'overlay Apri sullo smartphone viene attivato quando l'utente sceglie di continuare il suo
percorso su uno smartphone. L'overlay ha un indicatore di avanzamento e comunica all'utente quando
controllare lo smartphone.
Stepper
Gli stepper offrono un'esperienza di controllo a schermo intero che consente agli utenti di effettuare una selezione da un intervallo di valori. Possono controllare l'interazione utilizzando i pulsanti o la corona e il livello specifico viene mostrato utilizzando un indicatore di livello curvo.
Selettore data/ora
I selettori consentono agli utenti di scegliere tra un numero finito di elementi in sezioni scorrevoli.
Il selettore dell'ora ha fino a tre colonne, a seconda che i secondi siano
disponibili o che l'orologio sia a 12 o 24 ore. Gli utenti interagiscono con
ogni colonna alla volta, effettuando la selezione lasciando il numero in primo piano
prima di continuare.
Selettore della data
I selettori consentono agli utenti di scegliere tra un numero finito di elementi in sezioni scorrevoli.
Il selettore della data ha fino a tre colonne, con un ordine intercambiabile
tra data, ora e anno, a seconda del caso d'uso.
I selettori di date richiedono stringhe di contenuti più lunghe, quindi viene visualizzata una sola colonna alla volta, dando un'idea di cosa si trova a sinistra o a destra. Gli utenti interagiscono
con ogni colonna alla volta, effettuando la selezione lasciando il numero in
evidenza prima di continuare.
Esempi di layout personalizzati non scorrevoli
Le schermate delle app non scorrevoli non sono limitate ai componenti impostati. Puoi combinare
una serie di elementi per creare il layout che preferisci.
Devi tenere presente lo spazio limitato su una schermata non scorrevole e l'utilizzo
di margini e spaziatura interna reattivi (percentuali) per utilizzare lo spazio
disponibile sullo schermo. Puoi anche prendere in considerazione l'applicazione di un punto di interruzione a 225 dp per introdurre
contenuti aggiuntivi o rendere più visibili i contenuti esistenti su schermi
più grandi.
Maps
Overlay di emergenza
Avviso di emergenza
Comportamento reattivo e adattivo
Tutti i componenti della libreria Compose si adattano automaticamente alle dimensioni dello schermo più ampie
e aumentano in larghezza e altezza. Per queste visualizzazioni in particolare, l'utilizzo
dei breakpoint può offrire un'esperienza particolarmente ricca e preziosa per tutti
gli utenti.
Per molti pulsanti, schede e margini della UI, allunga e riempi lo spazio
per le diverse dimensioni dello schermo per sfruttare lo spazio disponibile nella UI
e creare un layout ben bilanciato.
Utilizza il seguente elenco di controllo per verificare che i parametri adattabili siano definiti correttamente:
Crea layout flessibili che abbiano un aspetto ragionevole su tutte le dimensioni dello schermo.
Applica i margini superiore, inferiore e laterali consigliati.
Definisci i margini in valori percentuali nei punti in cui i contenuti potrebbero
altrimenti essere tagliati.
Utilizza i vincoli di layout in modo che gli elementi sfruttino al meglio lo spazio all'interno dello schermo e mantengano l'equilibrio tra le diverse dimensioni dei dispositivi.
Se utilizzato, adatta il testo con indicazione oraria, ma non sovrapporre la sezione superiore della pagina.
Valuta la possibilità di utilizzare pulsanti che occupano tutto lo spazio disponibile per sfruttare al meglio lo spazio limitato.
Valuta la possibilità di applicare un punto di interruzione a 225 dp per introdurre contenuti aggiuntivi o
rendere più visibili i contenuti esistenti su schermi più grandi.
Più percorsi di pagine senza scorrimento che utilizzano la paginazione
Negli scenari in cui un'esperienza richiede più contenuti, ma vuole mantenere un layout senza scorrimento, valuta un layout multipagina con paginazione verticale o orizzontale.
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2025-08-25 UTC.
[null,null,["Ultimo aggiornamento 2025-08-25 UTC."],[],[],null,["# Non-scrolling app layouts\n\nNon-scrolling views focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts.\n\nPreset non-scrolling layout components\n--------------------------------------\n\n### Dialog\n\nA dialog is a transient overlay that occupies the whole screen. It lets users\nperform a single action. \n\n\u003cbr /\u003e\n\n\nConsider the following points:\n\n\u003cbr /\u003e\n\n- Dialogs focus your attention to verify their content is addressed.\n- Dialogs should be direct in communicating information and dedicated to completing a task.\n- Dialogs should appear in response to a user task or an action, with relevant or contextual information. \n\n\u003cbr /\u003e\n\n### Confirmation overlay\n\nThe confirmation overlay displays a confirmation message to the user for a short\nperiod. Use this component to capture the user's attention after an action has\nbeen executed.\n\n\u003cbr /\u003e\n\n### Open on phone\n\nThe open on phone overlay is triggered when the user chooses to continue their\njourney on a phone. The overlay has a progress indicator and tells the user when\nto check their phone.\n\n\u003cbr /\u003e\n\n### Stepper\n\nSteppers provide a full-screen control experience that let users make a\nselection from a range of values. They can control the interaction using the\nbuttons or crown, and the specific level is shown using a curved level\nindicator.\n\n\u003cbr /\u003e\n\n### Time picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Time Picker** has up to three columns, depending on whether seconds are\navailable or if the clock is a 12-hour or 24-hour clock. Users interact with\neach column at a time, making your selection by leaving the number in focus\nbefore continuing.\n\n\u003cbr /\u003e\n\n### Date picker\n\nPickers let users choose among a finite number of items in scrollable sections.\nThe **Date Picker** has up to three columns, which have an interchangeable order\nbetween date, time, and year, depending on the use case.\n**Date Pickers** require longer strings of content, so only one column is in\nview at a time, giving a hint of what's to the left or right. Users interact\nwith each column at a time, making their selection by leaving the number in\nfocus before continuing.\n\n\u003cbr /\u003e\n\nCustom non-scrolling layout examples\n------------------------------------\n\nNon-scrolling app screens are not limited to the set components. You can combine\na combination of elements to create the layout you want.\n\nYou should be mindful of the limited space on a non-scrolling screen and the use\nof responsive (percentage) margins and padding to use the available screen\nspace. You can also consider applying a breakpoint at 225dp to introduce\nadditional content or make existing content more glanceable when on bigger\nscreen sizes. \n\n### Maps\n\n\u003cbr /\u003e\n\n### Emergency overlay\n\n\u003cbr /\u003e\n\n### Emergency alert\n\n\u003cbr /\u003e\n\nResponsive and adaptive behavior\n--------------------------------\n\nAll components in the Compose library automatically adapt to the wider screen\nsize and gain width and height. For these views in particular, utilizing\nbreakpoints can deliver a particularly rich and valuable experience for all\nusers.\n\nFor many of your UI's buttons, cards, and margins, stretch and fill the space\nfor different screen sizes to take advantage of the available space on the UI\nand also make for a well-balanced layout.\n\nUse the following checklist to verify that responsive parameters are properly\ndefined:\n\n- Create flexible layouts that look reasonable on all screen sizes.\n- Apply the recommended top, bottom, and side margins.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Utilize layout constraints so that elements make the best possible use of the space within the screen and maintain balance across different device sizes.\n- Accommodate **Time Text** if used, but don't overlap the top section of the page.\n- Consider using edge-hugging buttons to utilize more of the limited space.\n- Consider applying a breakpoint at 225dp to introduce additional content or make existing content more glanceable when on bigger screen sizes.\n\n| **Caution:** A display size shouldn't display less information than ones that are smaller than it. This is especially relevant for custom behaviors added at the breakpoint. A common example of this is when components or text sizes are increased past the breakpoint and end up showing less on the larger screens. Screens should show more value, not less, with increasing size.\n\nMultiple non-scrolling page journeys using pagination\n-----------------------------------------------------\n\nIn scenarios where an experience requires more content but wants to retain a\nnon-scrolling layout, consider a multi-page layout with either vertical or\nhorizontal pagination."]]
