In genere lo schermo della TV viene guardato da circa 3 metri di distanza e, sebbene sia molto più grande della maggior parte degli altri display dei dispositivi Android, lo schermo della TV non offre lo stesso livello di dettaglio e colore di uno schermo più piccolo. Questi fattori richiedono la creazione di layout delle app tenendo in considerazione i dispositivi TV, in modo da offrire un'esperienza utente utile e piacevole.
Usare i temi di layout per la TV
I temi Android possono fornire una base per i layout nelle tue app TV. Utilizza un tema per modificare la visualizzazione delle attività delle app che devono essere eseguite su un dispositivo TV. Questa sezione spiega quali temi utilizzare.
Tema Leanback
La libreria Androidx di Leanback include Theme.Leanback, un tema per le attività TV che
fornisce uno stile visivo coerente. Usa 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 Android su smartphone e tablet, ma non è appropriata per le app TV. Se non utilizzi classi AndroidX Leanback, applica il tema NoTitleBar alle tue attività TV per non visualizzare una barra del titolo. Il seguente esempio di codice da un file 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 consente di utilizzare funzionalità come la colorazione tracciabile senza preoccuparsi della versione di Android in esecuzione sul dispositivo. Se stai sviluppando un'app che funziona solo su Android TV, non usare AppCompatActivity, perché le funzionalità attivate sono già disponibili su Android TV o non pertinenti.
Se stai creando un'app con un codebase condiviso tra Android per dispositivi mobili e Android TV, potresti incorrere in alcune sfide legate alla definizione dei temi. AppCompatActivity e i vari widget AppCompat richiedono l'uso di Theme.AppCompat, mentre i frammenti del toolkit dell'interfaccia utente di Leanback prevedono l'uso di FragmentActivity e Theme.Leanback.
Se devi utilizzare la stessa attività di base per i dispositivi mobili Android e Android TV o se vuoi usare le visualizzazioni personalizzate basate su widget AppCompat come AppCompatImageView, utilizza i temi Theme.AppCompat.Leanback. Questi temi ti offrono tutti i temi di AppCompat e forniscono anche i valori specifici di Leanback.
Puoi personalizzare Theme.AppCompat.Leanback temi come faresti con qualsiasi altro
tema. Ad esempio, se vuoi modificare valori specifici del toolkit dell'interfaccia utente di Leanback OnboardingSupportFragment, esegui una procedura analoga 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 su schermo sul lato sinistro o destro dello schermo e salva lo spazio verticale per i contenuti.
- Crea UI suddivise in sezioni utilizzando frammenti. Utilizza gruppi di visualizzazioni come
GridViewanzichéListViewper sfruttare meglio lo spazio orizzontale dello schermo. - Utilizza gruppi di visualizzazioni come
RelativeLayoutoLinearLayoutper organizzare le visualizzazioni. In questo modo, il sistema può regolare la posizione delle visualizzazioni in base alle dimensioni, all'allineamento, alle proporzioni e alla densità dei 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 televisivi per offrire agli spettatori un'immagine a schermo intero. 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 visibili all'utente in ogni momento all'interno dell'area protetta da overscan. L'aggiunta a un layout di un margine del 5% di 48 dp sui bordi sinistro e destro e 27 dp sui bordi superiore e inferiore aiuta a garantire che gli elementi dello schermo nel layout si trovino all'interno dell'area di overscan sicura.
Non regolare gli elementi dello schermo di sfondo con cui l'utente non interagisce direttamente e non tagliare gli elementi all'area protetta da overscan. Questo approccio aiuta a garantire che gli elementi delle schermate di sfondo siano corretti su tutte le schermate.
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 di overscan-safe:
<?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 usi le classi AndroidX Leanback, come BrowseSupportFragment, o i widget correlati, poiché questi layout includono già margini overscan sicuri.
Crea testo e controlli utilizzabili
Segui questi suggerimenti per rendere il testo e i controlli dell'app TV più facilmente visibili da lontano:
- Suddividi il testo in piccoli blocchi che gli utenti possano analizzare rapidamente.
- Utilizza testo chiaro su uno sfondo scuro. Questo stile è più facile da leggere su una TV.
- Evita caratteri leggeri o caratteri che presentano tratti sia molto stretti che molto ampi. Utilizza semplici caratteri senza grazie e anti-alias per migliorare 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"/> - Fai in modo che tutti i widget di visualizzazione siano abbastanza grandi da essere chiaramente visibili a qualcuno che si trova a 3 metri di distanza dallo schermo. Il modo migliore per farlo è utilizzare dimensioni relative al layout anziché dimensioni assoluti e unità di pixel indipendenti dalla densità (dp) anziché unità di pixel assolute. Ad esempio, per impostare la larghezza di un widget, utilizza
wrap_contentanziché la 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 sui layout di creazione per gestire schermi di dimensioni maggiori, 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 diverse risoluzioni, incluse, a titolo esemplificativo, 720p, 1080p e 4K. Assicurati che l'app supporti schermi di dimensioni diverse.
Le diverse dimensioni e risoluzioni degli schermi hanno densità di pixel differenti. Per mantenere l'aspetto dell'interfaccia utente per schermi di varie dimensioni, risoluzione e densità di pixel, definisci le misurazioni dell'interfaccia utente utilizzando pixel indipendenti dalla densità (dp) anziché pixel. La densità dei pixel dello schermo per diverse risoluzioni del pannello TV è descritta di seguito.
| Risoluzione del riquadro | Densità dei pixel dello schermo |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
Per ulteriori informazioni sull'ottimizzazione di layout e risorse per gli schermi di grandi dimensioni, consulta la Panoramica della compatibilità dello schermo.
Pattern di layout da evitare
Esistono alcuni approcci per creare layout che non funzionano bene sui dispositivi TV. Ecco alcuni approcci all'interfaccia utente da evitare quando si sviluppa un layout per la TV.
- Riutilizzo dei layout per telefono o tablet: non riutilizzare i layout di un'app per telefono 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 di azione siano consigliate per l'uso su smartphone e tablet, non sono appropriate per un'interfaccia TV. L'utilizzo di un menu di opzioni della barra delle azioni o di un menu a discesa è vivamente sconsigliato per le app TV a causa della difficoltà di navigazione di tale menu con un telecomando. - Con
ViewPager: lo scorrimento tra gli schermi può funzionare alla grande su uno smartphone o un tablet, ma non provarlo su una TV.
Per ulteriori informazioni sulla progettazione di layout appropriati per la TV, consulta la guida alla progettazione della TV.
Gestire le bitmap di grandi dimensioni
I dispositivi TV, come altri dispositivi Android, hanno una quantità limitata di memoria. Se crei il layout della tua app con immagini ad altissima risoluzione o ne utilizzi molte nel funzionamento dell'app, potresti raggiungere rapidamente i limiti di memoria e causare errori di esaurimento della memoria. Nella maggior parte dei casi, consigliamo di utilizzare la libreria Glide per recuperare, decodificare e visualizzare bitmap nella tua app. Per ulteriori informazioni su come ottenere le migliori prestazioni quando lavori con i bitmap, consulta le nostre best practice generali per la grafica Android.
Fornire pubblicità efficace
Per quanto riguarda l'ambiente del salotto, ti consigliamo di utilizzare soluzioni di annunci video a schermo intero che possono essere ignorate entro 30 secondi. Le funzionalità per la pubblicità su Android TV, ad esempio i pulsanti di chiusura e i clickthrough, devono essere accessibili utilizzando il D-pad anziché il tocco.
Android TV non dispone di 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 l'accesso ai servizi di social media.