Cosa fare e cosa fare adattivi

Le app adattive supportano schermi di tutte le dimensioni: l'intero schermo del dispositivo, finestre ridimensionabili in modalità multi-finestra, orientamenti verticale e orizzontale, schermi piegati e aperti dei dispositivi pieghevoli.

Un breve elenco di impostazioni di configurazione e API ti consente di creare app adattive. Tuttavia, alcune impostazioni e API obsolete non sono compatibili con le app adattive e devono essere evitate.

Ridimensionabilità

Le app adattive supportano la ridimensionabilità delle app e la modalità multi-finestra.

L'resizeableActivity attributo degli elementi del file manifest <activity> e <application> attiva o disattiva la modalità multi-finestra su Android 11 (livello API 30) e versioni precedenti. Su Android 12 (livello API 31) e versioni successive, gli schermi di grandi dimensioni supportano la modalità multi-finestra indipendentemente dall'attributo. Per ulteriori informazioni, vedi Supportare la modalità multi-finestra.

✓ Da fare

Consenti alla tua app di partecipare a scenari multi-finestra e multitasking per aumentare la produttività e la soddisfazione degli utenti.

Imposta resizeableActivity="true" se la tua app ha come target livelli API inferiori a 24; in caso contrario, non preoccuparti, è true per impostazione predefinita su Android 7.0 (API livello 24) e versioni successive.

✗ Da non fare

Non impostare resizeableActivity="false" per nessun livello API. Non escludere la tua app dai casi d'uso che prevedono la modalità multi-finestra.

Orientamento

Le app adattive supportano l'orientamento verticale e orizzontale indipendentemente dalle dimensioni dello schermo o dalla modalità di visualizzazione a finestre.

L'impostazione del file manifest screenOrientation limita l'orientamento dell'attività.

✓ Da fare

Elimina l'impostazione screenOrientation dal file manifest dell'app.

Il blocco dell'orientamento delle app non impedisce le modifiche delle dimensioni della finestra. Le app vengono ridimensionate quando entrano in modalità multi-finestra, quando un dispositivo viene piegato o aperto o quando una finestra di tipo desktop viene ridimensionata. La tua app deve supportare le modifiche delle dimensioni della finestra indipendentemente dall'impostazione dell'attributo screenOrientation.

✗ Da non fare

Non limitare l'orientamento dell'attività. Le app che bloccano l'orientamento vengono visualizzate con barre nere sui dispositivi con schermi di grandi dimensioni e con dimensioni della finestra incompatibili.

Le app con barre nere sono soggette a una minore rilevabilità su Google Play per tablet, dispositivi pieghevoli e dispositivi ChromeOS.

Proporzioni

Le dimensioni dello schermo e della finestra variano, così come le loro proporzioni, da alte e strette a quadrate, a corte e larghe.

Le impostazioni del file manifest minAspectRatio e maxAspectRatio limitano le proporzioni dell'app a valori hardcoded.

✓ Da fare

Adatta la tua app allo schermo indipendentemente dalle dimensioni relative.

Elimina le impostazioni minAspectRatio e maxAspectRatio dal file manifest dell'app. In alternativa, assicurati che la tua app sia ridimensionabile e che le proporzioni vengano gestite automaticamente (vedi la sezione Ridimensionabilità).

✗ Da non fare

Non provare a controllare le dimensioni relative della tua app. Se la tua app viene eseguita su uno schermo o in una finestra con proporzioni incompatibili con le proporzioni dell'app, viene visualizzata con barre nere.

Su Android 14 (livello API 34) e versioni successive, gli utenti possono sostituire le proporzioni dell'app per espandere le app con barre nere in modo da riempire l'area di visualizzazione disponibile. Vedi Modalità di compatibilità del dispositivo.

Dimensioni della finestra

L'ottimizzazione dei layout per schermi di dimensioni diverse è la premessa fondamentale della progettazione adattiva. Le app adattive si concentrano sulle dimensioni della finestra dell'app anziché sulle dimensioni dello schermo del dispositivo. Quando l'app è a schermo intero, la finestra dell'app è lo schermo del dispositivo.

Le classi di dimensioni della finestra forniscono un modo sistematico per determinare e classificare le dimensioni della finestra dell'app. Adatta la tua app modificando i layout in base alla classe di dimensioni della finestra dell'app.

✓ Da fare

Valuta le dimensioni della finestra dell'app in base alle classi di dimensioni della finestra.

Per determinare la classe di dimensioni della finestra, utilizza la currentWindowAdaptiveInfo() funzione di primo livello della libreria adattiva Compose Material 3. Per ulteriori informazioni, vedi Creare app adattive.

✗ Da non fare

Non ignorare l'utilità delle definizioni delle classi di dimensioni della finestra e delle API integrate. Non utilizzare API obsolete per calcolare le dimensioni della finestra.

API obsolete

Le API della piattaforma precedenti non misurano correttamente la finestra dell'app; alcune misurano lo schermo del dispositivo, altre escludono la decorazione del sistema.

✓ Da fare

Utilizza WindowManager#getCurrentWindowMetrics() e WindowMetrics#getBounds() per ottenere le dimensioni della finestra dell'app. Utilizza WindowMetrics#getDensity() per ottenere la densità dello schermo.

✗ Da non fare

Non utilizzare le seguenti API Display obsolete per determinare le dimensioni della finestra:

Scrivi

Jetpack Compose è progettato per lo sviluppo di UI adattive. Nessun XML, nessun file di layout, nessun qualificatore di risorse. Solo composable senza stato basati su Kotlin come Column, Row e Box che descrivono la tua UI e modificatori come offset, padding e size che aggiungono comportamento agli elementi della UI.

✓ Da fare

Crea build con Compose. Non perderti le ultime funzionalità e release.

✗ Da non fare

Non fare affidamento su tecnologie obsolete. Non lasciare che la tua app diventi obsoleta.

Libreria adattiva Compose Material 3

La libreria adattiva Compose Material 3 fornisce componenti e API che facilitano lo sviluppo di app adattive.

✓ Da fare

Utilizza le seguenti API per rendere la tua app adattiva:

  • NavigationSuiteScaffold: passa dalla barra di navigazione alla barra di navigazione verticale in base alla classe di dimensioni della finestra dell'app.
  • ListDetailPaneScaffold: implementa il layout canonico list-detail. Adatta il layout alle dimensioni della finestra dell'app.
  • SupportingPaneScaffold: implementa il layout canonico del riquadro di supporto.
✗ Da non fare

Non c'è bisogno di reinventare la ruota. Non perdere i vantaggi di produttività degli sviluppatori offerti da tutte le librerie Jetpack Compose.

Layout

Gli utenti si aspettano che le app sfruttino al meglio lo spazio di visualizzazione disponibile con contenuti supplementari o controlli avanzati.

Le app adattive ottimizzano i layout in base alle modifiche dello schermo, in particolare alle modifiche delle dimensioni della finestra dell'app o della postura del dispositivo.

✓ Da fare

Modifica i componenti della UI in base alle dimensioni della finestra per sfruttare lo spazio di visualizzazione disponibile. Ad esempio, sostituisci la barra di navigazione in basso utilizzata per le dimensioni della finestra compatte con una barra di navigazione verticale per le finestre medie ed espanse. Riposiziona le finestre di dialogo in modo che siano raggiungibili su tutti gli schermi.

Organizza i contenuti in riquadri per abilitare layout multi-riquadro come elenco-dettagli e riquadro di supporto per la visualizzazione dinamica dei contenuti.

✓ Da fare: attività di elenco e dettagli organizzate in un layout a doppio riquadro.
✗ Da non fare

Se non utilizzi i riquadri dei contenuti, non limitarti a estendere gli elementi della UI per riempire lo spazio di visualizzazione disponibile. Le righe di testo lunghe sono difficili da leggere. I pulsanti estesi hanno un aspetto poco curato. Se utilizzi Modifier.fillMaxWidth, non dare per scontato che sia il comportamento corretto per tutte le dimensioni dello schermo.

✗ Da non fare: layout esteso per riempire la finestra in espansione.

Dispositivi di input

Gli utenti non utilizzano solo i touch screen per interagire con le app.

Le app adattive supportano tastiere, mouse e stili esterni per offrire un'esperienza utente migliorata e aiutare gli utenti a essere più produttivi su fattori di forma di ogni tipo.

✓ Da fare

Sfrutta la funzionalità integrata del framework Android per la navigazione con la tastiera e il clic, la selezione e lo scorrimento con il mouse o il trackpad. Pubblica le scorciatoie da tastiera della tua app in Guida scorciatoie da tastiera.

Utilizza la libreria Jetpack Material 3 per consentire agli utenti di scrivere in qualsiasi TextField componente utilizzando uno stilo.

✗ Da non fare

Non rendere impossibili i metodi di input alternativi. Non introdurre problemi di accessibilità.

Riepilogo

  • Crea la tua app con Compose e la libreria adattiva Material 3
  • Basare i layout sulle classi di dimensioni della finestra
  • Creare layout multi-riquadro
  • Rendere ridimensionabile la tua app
  • Non bloccare mai l'orientamento dell'attività
  • Non limitare le proporzioni
  • Supportare input diversi dal tocco
  • Evitare le API obsolete

✓ Fai ciò che si aspettano i tuoi utenti: ottimizza la tua app per la diversità di dispositivi su cui le persone fanno affidamento ogni giorno.

✗ Non aspettare. Inizia oggi stesso.