Uno schermo TV viene in genere visualizzato da circa 3 metri di distanza e, sebbene sia molto più grande della maggior parte degli altri display dei dispositivi Android, non offre lo stesso livello di dettaglio e colore di uno schermo più piccolo. Questi fattori richiedono la creazione di layout dell'app tenendo conto dei dispositivi TV per creare un'esperienza utente utile e piacevole.
Utilizzare i temi di layout per la TV
I temi di Android possono fornire una base per i layout delle app TV. Utilizza un tema per modificare la visualizzazione delle attività delle app destinate a essere eseguite su un dispositivo TV. Questa sezione spiega quali temi utilizzare.
Tema Leanback
La libreria androidx.leanback, deprecata, 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 standard dell'interfaccia utente per le app per Android su smartphone e tablet, ma non è adatta alle app TV. Se non utilizzi le classi AndroidX Leanback, applica il tema
NoTitleBar alle attività TV per eliminare la visualizzazione di una barra del titolo. Il seguente esempio di codice
dal manifest di un'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 per Android, è molto comune utilizzare
AppCompatActivity
insieme a uno dei temi Theme.AppCompat. Questa combinazione ti consente di utilizzare funzionalità
come la colorazione dei disegnabili senza preoccuparti della versione di Android in esecuzione sul dispositivo. Se
stai sviluppando un'app che funziona solo su Android TV, non utilizzare
AppCompatActivity, perché le funzionalità che attiva sono già disponibili su
Android TV o non sono pertinenti.
Se stai creando un'app con un codebase condiviso tra Android mobile e Android TV, potresti riscontrare alcuni problemi a causa dei temi. AppCompatActivity e i vari
widget AppCompat richiedono l'utilizzo di Theme.AppCompat, mentre i
frammenti del toolkit dell'interfaccia utente 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 widget AppCompat come
AppCompatImageView,
utilizza i temi Theme.AppCompat.Leanback. Questi temi offrono tutte le funzionalità di tematizzazione
di 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,
fai qualcosa di simile a quanto segue:
<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding"> <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item> <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item> </style>
Creare layout di base per la TV
I layout per i dispositivi TV devono seguire alcune linee guida di base per garantire che siano utilizzabili ed efficaci su 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 UI suddivise in sezioni utilizzando i fragment. Utilizza gruppi di visualizzazioni come
GridViewanzichéListViewper sfruttare al meglio lo spazio orizzontale dello schermo. - Utilizza gruppi di visualizzazioni come
RelativeLayoutoLinearLayoutper organizzare le visualizzazioni. Questo approccio consente al sistema di regolare la posizione delle visualizzazioni in base alle dimensioni, all'allineamento, alle proporzioni e alla 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 a causa dell'evoluzione degli standard TV per presentare un'immagine a schermo intero agli spettatori. Per questo motivo, i dispositivi TV potrebbero tagliare il bordo esterno del layout di un'app per garantire 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 consente di garantire che gli elementi dello schermo nel layout si trovino all'interno dell'area sicura per l'overscan.
Non regolare 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 in background 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 margini di overscan al layout se utilizzi le classi AndroidX Leanback, ad esempio BrowseSupportFragment o widget correlati, in quanto questi layout incorporano già margini sicuri per l'overscan.
Creare testo e controlli utilizzabili
Segui questi suggerimenti per rendere più visibili da lontano il testo e i controlli nell'app TV:
- Dividi il testo in piccoli blocchi che gli utenti possono scorrere rapidamente.
- Utilizza un testo chiaro su uno sfondo scuro. Questo stile è più facile da leggere su una TV.
- Evita caratteri leggeri o caratteri con tratti molto sottili e molto spessi. 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 di distanza dallo schermo. Il modo migliore per farlo è utilizzare il dimensionamento relativo al layout anziché quello assoluto e le unità di pixel indipendenti dalla densità (dp) anziché le unità di pixel assolute. 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 valori dp anziché valori px.
Per ulteriori informazioni sui pixel indipendenti dalla densità e sulla creazione di layout per gestire schermi di dimensioni maggiori, consulta la Panoramica della 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.
Dimensioni e risoluzioni dello schermo diverse hanno densità di pixel diverse. Per preservare l'aspetto della tua UI su dimensioni dello schermo, risoluzione e densità di pixel, definisci le misurazioni della UI utilizzando pixel indipendenti dalla densità (dp) anziché pixel. Di seguito è riportata la densità di pixel dello schermo per le diverse risoluzioni del pannello 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, vedi Panoramica della compatibilità dello schermo.
Pattern di layout da evitare
Esistono alcuni approcci alla creazione di layout che non funzionano bene sui dispositivi TV. Di seguito sono riportati 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'utilizzo su smartphone e tablet, non sono adatte a un'interfaccia TV. L'utilizzo di un menu delle 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:scorrere tra le schermate può essere utile su uno smartphone o un tablet, ma non provarci su una TV.
Per saperne di più sulla progettazione di layout adatti alla TV, consulta la guida 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 nel 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 prestazioni migliori 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. Le funzionalità per la pubblicità su Android TV, come i pulsanti di chiusura e i clickthrough, devono essere accessibili tramite il D-pad anziché il tocco.
Android TV non fornisce un browser web. I tuoi annunci non devono tentare di avviare un browser web o reindirizzare a 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.