In genere, uno schermo TV viene visualizzato da una distanza di circa 3 metri e, sebbene sia molto più grande della maggior parte degli schermi di altri dispositivi con Android, uno schermo TV non fornisce lo stesso livello di dettagli e colori di uno schermo di un dispositivo più piccolo. Questi fattori richiedono di creare layout delle app pensati per i dispositivi TV per offrire un'esperienza utente utile e piacevole.
Utilizzare i temi di layout per la TV
I temi Android possono fornire una base per i layout nelle app per TV. Utilizza un tema per modificare la visualizzazione delle attività dell'app che sono destinate a essere eseguite su un dispositivo TV. In questa sezione viene spiegato quali temi utilizzare.
Tema Leanback
La libreria androidx.leanback ritirata include Theme.Leanback,
un tema per le attività TV che fornisce uno stile visivo coerente per le app del toolkit UI Leanback. Utilizza questo tema per qualsiasi app TV creata con le classi AndroidX Leanback. Il seguente esempio di codice
mostra come applicare questo tema a un'attività:
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
Tema NoTitleBar
La barra del titolo è un elemento dell'interfaccia utente standard per le app Android su smartphone e tablet, ma non è appropriata per le app per TV. Se non utilizzi le classi AndroidX Leanback, applica il
NoTitleBar tema alle attività TV per sopprimere la visualizzazione di una barra del titolo. Il seguente esempio di codice tratto da un manifest dell'app TV mostra come applicare questo tema per rimuovere la visualizzazione di una barra del titolo:
<application> ... <activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar"> ... </activity> </application>
Temi AppCompat
Nelle app mobile Android, è molto comune utilizzare
AppCompatActivity
insieme a uno dei temi Theme.AppCompat. Questa combinazione ti consente di utilizzare funzionalità come la colorazione delle risorse drawable senza doverti preoccupare della versione di Android in esecuzione sul dispositivo. Se stai sviluppando un'app che viene eseguita solo su Android TV, non utilizzare AppCompatActivity, perché le funzionalità che abilita sono già disponibili su Android TV o non sono pertinenti.
Se stai creando un'app con una codebase condivisa tra Android mobile e Android TV, potresti riscontrare
alcune difficoltà a causa dei temi. AppCompatActivity e i vari
AppCompat widget richiedono l'utilizzo di Theme.AppCompat, mentre i
frammenti del toolkit UI Leanback prevedono l'utilizzo di
FragmentActivity
e Theme.Leanback.
Se devi utilizzare la stessa attività di base per Android mobile e Android TV o se vuoi utilizzare
visualizzazioni personalizzate basate su AppCompat widget come
AppCompatImageView,
utilizza i temi Theme.AppCompat.Leanback. Questi temi ti offrono tutti i temi
da AppCompat e forniscono anche i valori specifici di Leanback.
Puoi personalizzare i temi Theme.AppCompat.Leanback allo stesso modo di qualsiasi altro
tema. Ad esempio, se vuoi modificare i valori specifici del
toolkit UI Leanback
OnboardingSupportFragment,
procedi in modo simile al seguente:
<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding"> <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item> <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item> </style>
Creare layout TV di base
I layout per i dispositivi TV devono seguire alcune linee guida di base per garantire che siano utilizzabili ed efficaci sugli schermi di grandi dimensioni. Segui questi suggerimenti per creare layout ottimizzati per gli schermi TV:
- Crea layout con orientamento orizzontale. Gli schermi TV vengono sempre visualizzati in modalità orizzontale.
- Posiziona i controlli di navigazione sullo schermo sul lato sinistro o destro dello schermo e salva lo spazio verticale per i contenuti.
- Crea interfacce utente suddivise in sezioni utilizzando i frammenti. Utilizza gruppi di visualizzazioni come
GridViewanzichéListViewper sfruttare al meglio lo spazio orizzontale dello schermo. - Utilizza gruppi di visualizzazioni come
RelativeLayoutoLinearLayoutper disporre le visualizzazioni. Questo approccio consente al sistema di regolare la posizione delle visualizzazioni in base a dimensioni, allineamento, proporzioni e densità di pixel di uno schermo TV. - Aggiungi margini sufficienti tra i controlli del layout per evitare un'interfaccia utente disordinata.
Overscan
I layout per la TV hanno alcuni requisiti unici dovuti all'evoluzione degli standard TV per presentare un' immagine a schermo intero agli spettatori. Per questo motivo, i dispositivi TV potrebbero ritagliare il bordo esterno di un layout dell'app per assicurarsi che l'intero display sia riempito. Questo comportamento è generalmente definito overscan.
Posiziona gli elementi dello schermo che devono essere sempre visibili all'utente all'interno dell'area sicura per l'overscan. L'aggiunta di un margine del 5% di 48 dp sui bordi sinistro e destro e di 27 dp sui bordi superiore e inferiore a un layout contribuisce a garantire che gli elementi dello schermo nel layout si trovino all'interno dell'area sicura per l'overscan.
Non modificare gli elementi dello schermo di sfondo con cui l'utente non interagisce direttamente e non ritagliare gli elementi nell'area sicura per l'overscan. Questo approccio contribuisce a garantire che gli elementi dello schermo di sfondo vengano visualizzati correttamente su tutti gli schermi.
L'esempio seguente mostra un layout principale che può contenere elementi di sfondo e un layout secondario nidificato con un margine del 5% e che può contenere elementi all'interno dell'area sicura per l'overscan:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Screen elements that can render outside the overscan-safe area go here. --> <!-- Nested RelativeLayout with overscan-safe margin. --> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="27dp" android:layout_marginBottom="27dp" android:layout_marginLeft="48dp" android:layout_marginRight="48dp"> <!-- Screen elements that need to be within the overscan-safe area go here. --> </RelativeLayout> </RelativeLayout>
Attenzione: non applicare i margini di overscan al layout se utilizzi le
classi AndroidX Leanback, come
BrowseSupportFragment
o i widget correlati, poiché questi layout incorporano già margini sicuri per l'overscan.
Creare testo e controlli utilizzabili
Segui questi suggerimenti per rendere il testo e i controlli dell'app TV più facili da vedere da lontano:
- Suddividi il testo in piccoli blocchi che gli utenti possono scorrere rapidamente.
- Utilizza testo chiaro su sfondo scuro. Questo stile è più facile da leggere su una TV.
- Evita i caratteri leggeri o quelli con tratti molto stretti e molto ampi. Utilizza caratteri sans-serif semplici e l'anti-aliasing per aumentare la leggibilità.
- Utilizza le dimensioni dei caratteri standard di Android:
<TextView android:id="@+id/atext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center_vertical" android:singleLine="true" android:textAppearance="?android:attr/textAppearanceMedium"/>
- Rendi tutti i widget di visualizzazione abbastanza grandi da essere chiaramente visibili a una persona
seduta a 3 metri dallo schermo. Il
modo migliore per farlo è utilizzare il dimensionamento relativo al layout anziché il dimensionamento assoluto e le
unità di pixel indipendenti dalla densità (dp) anziché le unità di pixel assoluti. Ad esempio, per impostare la
larghezza di un widget, utilizza
wrap_contentanziché una misurazione in pixel e, per impostare il margine di un widget, utilizza i valori dp anziché i valori px.
Per ulteriori informazioni sui pixel indipendenti dalla densità e sulla creazione di layout per gestire le dimensioni dello schermo più grandi, consulta la panoramica sulla compatibilità dello schermo.
Gestire le risorse di layout per la TV
Come tutti gli altri dispositivi Android, le TV hanno dimensioni dello schermo diverse e supportano risoluzioni diverse, tra cui, a titolo esemplificativo, 720p, 1080p e 4K. Assicurati che la tua app supporti diverse dimensioni dello schermo.
Le diverse dimensioni e risoluzioni dello schermo hanno densità di pixel diverse. Per preservare l'aspetto dell'interfaccia utente in base alle dimensioni dello schermo, alla risoluzione e alla densità di pixel, definisci le misurazioni dell'interfaccia utente utilizzando pixel indipendenti dalla densità (dp) anziché pixel. Di seguito è riportata la densità di pixel dello schermo per le diverse risoluzioni dei pannelli TV.
| Risoluzione del pannello | Densità di pixel dello schermo |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
Per ulteriori informazioni sull'ottimizzazione di layout e risorse per schermi di grandi dimensioni, consulta la panoramica sulla compatibilità dello schermo.
Pattern di layout da evitare
Esistono alcuni approcci alla creazione di layout che non funzionano bene sui dispositivi TV. Ecco alcuni approcci all'interfaccia utente da evitare quando sviluppi un layout per la TV.
- Riutilizzo dei layout di smartphone o tablet: non riutilizzare i layout di un'app per smartphone o tablet senza modifiche. I layout creati per altri fattori di forma dei dispositivi Android non sono adatti ai dispositivi TV e devono essere semplificati per il funzionamento su una TV.
- Utilizzo di
ActionBar: sebbene le barre delle azioni siano consigliate per l'uso su smartphone e tablet, non sono appropriate per un'interfaccia TV. L'utilizzo di un menu opzioni della barra delle azioni o di qualsiasi menu a discesa è fortemente sconsigliato per le app TV a causa della difficoltà di navigare in un menu di questo tipo con un telecomando. - Utilizzo di
ViewPager: lo scorrimento tra gli schermi può funzionare perfettamente su uno smartphone o un tablet, ma non provarlo su una TV.
Per ulteriori informazioni sulla progettazione di layout adatti alla TV, consulta la guida alla progettazione per la TV.
Gestire bitmap di grandi dimensioni
I dispositivi TV, come gli altri dispositivi Android, hanno una quantità limitata di memoria. Se crei il layout dell'app con immagini ad altissima risoluzione o utilizzi molte immagini ad alta risoluzione durante il funzionamento dell'app, puoi raggiungere rapidamente i limiti di memoria e causare errori di memoria insufficiente. Nella maggior parte dei casi, ti consigliamo di utilizzare la libreria Glide per recuperare, decodificare e visualizzare le bitmap nella tua app. Per ulteriori informazioni su come ottenere le migliori prestazioni quando lavori con le bitmap, consulta le nostre best practice generali per la grafica Android.
Fornire pubblicità efficace
Per l'ambiente del salotto, ti consigliamo di utilizzare soluzioni di annunci video a schermo intero e chiudibili entro 30 secondi. La funzionalità per la pubblicità su Android TV, come i pulsanti di chiusura e i clickthrough, deve essere accessibile tramite il tastierino direzionale anziché il tocco.
Android TV non fornisce un browser web. I tuoi annunci non devono tentare di avviare un browser web o reindirizzare ai contenuti del Google Play Store non approvati per i dispositivi Android TV.
Nota: puoi utilizzare la classe WebView per gli accessi ai servizi di social media.