In genere lo schermo di una TV viene guardato da una distanza di circa 3 metri e, sebbene sia molto più grande della maggior parte degli altri display dei dispositivi Android, non offre lo stesso livello di dettaglio e colore dello schermo di un dispositivo più piccolo. Questi fattori richiedono la creazione di layout delle app tenendo in considerazione i dispositivi TV, al fine di 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 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 raccolta androidx.leanback include Theme.Leanback, un tema per le attività TV che
offre uno stile visivo coerente. 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 telefoni e tablet, ma non è appropriata per le app TV. Se non utilizzi classi AndroidX Leanback, applica il
tema NoTitleBar alle tue attività TV per evitare la visualizzazione di 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 ti consente di utilizzare funzionalità
come la colorazione disegnabile senza preoccuparti 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 attiva sono già disponibili su Android TV o non sono pertinenti.
Se stai creando un'app con un codebase condiviso tra dispositivi mobili Android e Android TV, potresti incontrare delle sfide 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 che tu utilizzi
FragmentActivity
e Theme.Leanback.
Se devi utilizzare la stessa attività di base per dispositivi mobili Android e Android TV o se vuoi utilizzare
visualizzazioni personalizzate basate su widget AppCompat come
AppCompatImageView,
usa i temi Theme.AppCompat.Leanback. Questi temi ti forniscono tutti i temi di AppCompat e forniscono anche i valori specifici di Leanback.
Puoi personalizzare i temi Theme.AppCompat.Leanback come faresti con qualsiasi altro tema. Ad esempio, se vuoi modificare i valori specifici per OnboardingSupportFragment del toolkit Leanback UI, procedi in modo 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 libera lo spazio verticale per i contenuti.
- Crea interfacce utente suddivise in sezioni utilizzando frammenti. Utilizza gruppi di visualizzazioni come
GridViewanzichéListViewper sfruttare meglio lo spazio orizzontale dello schermo. - Utilizza gruppi di viste come
RelativeLayoutoLinearLayoutper organizzare le visualizzazioni. Questo approccio consente al sistema di regolare la posizione delle visualizzazioni in base a dimensioni, allineamento, proporzioni e densità dei pixel di uno schermo TV. - Aggiungi margini sufficienti tra i controlli di layout per evitare di visualizzare un'interfaccia utente caotica.
Overscan
I layout per la TV hanno alcuni requisiti unici dovuti all'evoluzione degli standard televisivi 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 venga riempito. Questo comportamento è generalmente definito overscan.
Posiziona gli elementi dello schermo che devono essere sempre visibili all'utente all'interno dell'area a sicurezza di overscan. L'aggiunta a un layout di un margine del 5% di 48 dp sui bordi sinistro e destro e di 27 dp sui bordi superiore e inferiore contribuisce a garantire che gli elementi sullo schermo nel layout si trovino all'interno dell'area di sicurezza per l'overscan.
Non regolare gli elementi della schermata di sfondo con cui l'utente non interagisce direttamente e non ritagliare gli elementi nell'area di sicurezza per l'overscan. In questo modo, gli elementi della schermata di sfondo vengono 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 può contenere elementi all'interno dell'area 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 utilizzi le classi Leanback AndroidX, come BrowseSupportFragment o i widget correlati, poiché questi layout incorporano già margini per l'overscan.
Crea testo e controlli utilizzabili
Segui questi suggerimenti per rendere il testo e i controlli nella tua app TV più facili da vedere da lontano:
- Suddividi il testo in piccole porzioni che gli utenti possono analizzare rapidamente.
- Usa testo chiaro su sfondo scuro. Questo stile è più facile da leggere sulla TV.
- Evita caratteri leggeri o con tratti molto stretti e molto ampi. Usa caratteri Sans-Serif semplici e anti-aliasing per migliorare la leggibilità.
- Utilizza le dimensioni standard dei caratteri 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 qualcuno che si trova a 3 metri di distanza dallo schermo. Il modo migliore per farlo è utilizzare il ridimensionamento relativo al layout, anziché il ridimensionamento assoluto, e l'utilizzo di unità di pixel indipendenti dalla densità (dp) anziché 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 per un widget, utilizza i valori dp anziché i valori px.
Per ulteriori informazioni sui pixel indipendenti dalla densità e sui layout degli edifici per gestire schermi di dimensioni maggiori, consulta Panoramica della compatibilità dello schermo.
Gestisci le risorse di layout per la TV
Come tutti gli altri dispositivi Android, le TV hanno schermi di dimensioni diverse e supportano diverse risoluzioni, incluse, a titolo esemplificativo, 720p, 1080p e 4K. Assicurati che la tua app supporti schermi di dimensioni diverse.
Dimensioni e risoluzioni dello schermo diverse hanno densità di pixel diverse. Per preservare l'aspetto dell'interfaccia utente su schermi di dimensioni, risoluzione e densità di pixel, definisci le misurazioni dell'interfaccia utente utilizzando i pixel indipendenti dalla densità (dp) anziché i pixel. Di seguito è indicata la densità dei pixel dello schermo per le diverse risoluzioni del pannello TV.
| Risoluzione del pannello | Densità pixel schermo |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
Per maggiori informazioni sull'ottimizzazione di layout e risorse per schermi di grandi dimensioni, consulta 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 durante lo sviluppo di un layout per la TV.
- Riutilizzo dei layout per telefono o tablet: non riutilizzare i layout di un'app per smartphone o tablet senza apportare modifiche. I layout creati per altri fattori di forma dei dispositivi Android non sono adatti per i dispositivi TV e devono essere semplificati per il funzionamento su una TV.
- Con
ActionBar:sebbene si consiglia di utilizzare le barre delle azioni su smartphone e tablet, le barre delle azioni non sono appropriate per un'interfaccia TV. Per le app TV è fortemente sconsigliato utilizzare un menu di opzioni della barra delle azioni o qualsiasi menu a discesa, a causa delle difficoltà di navigazione in questo menu con un telecomando. - Con
ViewPager:scorrere tra gli schermi può funzionare perfettamente su smartphone o tablet, ma non provare su una TV.
Per ulteriori informazioni sulla progettazione di layout appropriati per la TV, consulta la Guida alla progettazione della TV.
Gestire bitmap di grandi dimensioni
I dispositivi TV, come gli altri dispositivi Android, hanno una quantità di memoria limitata. Se crei il layout dell'app con immagini ad altissima risoluzione o utilizzi molte immagini ad alta risoluzione nel funzionamento dell'app, potresti incorrere rapidamente nei limiti di memoria e causare errori di memoria. 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 utilizzi le bitmap, consulta le nostre best practice generali per le grafiche Android.
Fornire pubblicità efficace
Per l'ambiente da salotto, ti consigliamo di utilizzare soluzioni di annunci video a schermo intero e ignorabili entro 30 secondi. Le funzionalità per la pubblicità su Android TV, ad esempio i pulsanti per ignorare e i clickthrough, devono essere accessibili utilizzando il D-pad anziché il tocco.
Android TV non offre un browser web. Gli annunci non devono tentare di aprire 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.