Lo schermo di una TV viene in genere guardato da una distanza di circa 3 metri, sebbene sia molto più grande della maggior parte su altri dispositivi Android, lo schermo della TV non offre lo stesso livello dettagli e colori come lo schermo di un dispositivo più piccolo. Questi fattori richiedono la creazione di layout per le app con per creare un'esperienza utente utile e piacevole.
Utilizzare i temi di layout per la TV
I temi Android possono fornire una base per layout nelle app TV. Utilizza un tema per modificare la visualizzazione delle attività nelle app che per funzionare 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
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 dell'interfaccia utente standard per le app Android su telefoni e tablet, ma
non è appropriato per le app TV. Se non utilizzi le classi AndroidX Leanback, applica il metodo
NoTitleBar alle tue attività TV per evitare la visualizzazione di una barra del titolo. Il seguente esempio di codice
dal file manifest di un'app TV illustra 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 usare
AppCompatActivity
insieme a uno dei Theme.AppCompat temi. Questa combinazione ti consente di utilizzare le caratteristiche
ad esempio la colorazione disegnabile senza doversi preoccupare della versione di Android installata sul dispositivo. Se
stai sviluppando un'app eseguibile solo su Android TV, non utilizzare
AppCompatActivity, perché le funzionalità che abilita sono già disponibili su
Android TV o non pertinente.
Se stai creando un'app con un codebase condiviso tra dispositivi mobili Android e Android TV, puoi eseguire
in alcune sfide a causa dei temi. AppCompatActivity e i vari
I widget AppCompat richiedono l'uso di Theme.AppCompat, mentre
I frammenti del toolkit dell'interfaccia utente di Leanback prevedono che
FragmentActivity
e Theme.Leanback.
Se devi utilizzare la stessa attività di base per i dispositivi mobili Android e Android TV oppure per utilizzare
visualizzazioni personalizzate basate su AppCompat widget come
AppCompatImageView,
utilizza i temi Theme.AppCompat.Leanback. Questi temi ti offrono tutte le
da AppCompat e fornisce anche i valori specifici di Leanback.
Puoi personalizzare i temi Theme.AppCompat.Leanback come faresti con qualsiasi altro tema
tema. Ad esempio, se vuoi modificare i valori specifici del
Toolkit della UI Leanback
OnboardingSupportFragment,
esegui un'operazione simile alla seguente:
<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 e efficace 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 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 visualizzazioni come
RelativeLayoutoLinearLayoutper organizzare le viste. Questo approccio consente al sistema di regolare la posizione delle visualizzazioni in base alle 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 presentano alcuni requisiti specifici, dovuti all'evoluzione degli standard televisivi, a schermo intero. Per questo motivo, i dispositivi TV potrebbero tagliare il bordo esterno 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 della modalità overscan-safe geografica specifica. Aggiunta di un margine del 5% di 48 dp sui bordi sinistro e destro e di 27 dp sui bordi superiore e inferiore i bordi di un layout contribuiscono a garantire che gli elementi dello schermo nel layout siano all'interno della modalità overscan geografica specifica.
Non modificare gli elementi della schermata di sfondo con cui l'utente non interagisce direttamente e non ritagliare gli elementi nell'area di overscan-safe. Questo approccio aiuta a garantire che gli elementi della schermata di sfondo siano corretti. su tutti gli schermi.
L'esempio seguente mostra un layout principale che può contenere elementi di sfondo e un layout secondario con un margine del 5% e che 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 lo
Classi AndroidX Leanback, come
BrowseSupportFragment
o widget correlati, poiché questi layout incorporano già margini a sicurezza 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 tuoi widget di visualizzazione abbastanza grandi da essere chiaramente visibili a qualcuno
a una distanza di 3 metri dallo schermo. La
il modo migliore per farlo è utilizzare un ridimensionamento relativo al layout anziché un ridimensionamento assoluto.
Unità pixel indipendenti dalla densità (dp) anziché unità pixel assolute. Ad esempio, per impostare il
larghezza di un widget, usa
wrap_contentanziché una misurazione in pixel e per impostare 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 dimensioni dello schermo, consulta Compatibilità dello schermo Panoramica.
Gestisci le risorse di layout per la TV
Come tutti gli altri dispositivi Android, le TV hanno dimensioni dello schermo diverse e supportano diverse Risoluzioni, tra cui, 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 la tua UI per dimensioni di schermo, risoluzione e densità di pixel, definisci le misurazioni dell'UI utilizzando i pixel indipendenti dalla densità (dp) anziché i pixel. La densità dei pixel dello schermo per i diversi pannelli TV soluzioni sono descritte di seguito.
| Risoluzione del pannello | Densità pixel schermo |
|---|---|
| 720p | tvdpi |
| 1080 | xhdpi |
| 4K | xxxhdpi |
Per ulteriori 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 alla creazione di layout che non funzionano bene sui dispositivi TV. Ecco alcuni approcci dell'interfaccia utente da evitare durante lo sviluppo di un layout per la TV.
- Riutilizzo di layout per telefono o tablet: non riutilizzare i layout di un telefono o senza modifiche. I layout creati per altri fattori di forma dei dispositivi Android non lo sono Questa funzionalità è adatta ai dispositivi TV e deve essere semplificata per il funzionamento su una TV.
- Utilizzo di
ActionBar: mentre è consigliato l'uso delle barre delle azioni su telefoni e tablet, non sono appropriati per un'interfaccia TV. L'utilizzo di un il menu opzioni della barra delle azioni o qualsiasi menu a discesa è vivamente sconsigliato per le app TV a causa alla difficoltà di navigazione in un menu di questo tipo con un telecomando. - Con
ViewPager: scorrere tra gli schermi può funzionare perfettamente su smartphone o tablet, ma non provarlo su una TV.
Per ulteriori informazioni sulla progettazione di layout adatti alla TV, consulta il Design della TV.
Gestire bitmap di grandi dimensioni
I dispositivi TV, come gli altri dispositivi Android, hanno una quantità di memoria limitata. Se crei dell'app con immagini ad altissima risoluzione o utilizzare molte immagini ad alta risoluzione nell'operazione della tua app, potrebbe imbattersi rapidamente nei limiti di memoria e causare errori di memoria esaurita. Per la maggior parte casi, consigliamo di utilizzare lo strumento Glide libreria per il recupero, la decodifica e la visualizzazione delle bitmap nella tua app. Per ulteriori informazioni su come ottenere prestazioni migliori quando si utilizzano bitmap, fai riferimento alle nostre Best practice 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. Funzionalità per per la pubblicità su Android TV, ad esempio pulsanti per ignorare e clickthrough, devono essere accessibile tramite il D-pad anziché il tocco.
Android TV non offre un browser web. I tuoi annunci non devono cercare di avviare un browser web o reindirizzare a contenuti del Google Play Store che non sono Approvato per i dispositivi Android TV.
Nota: puoi utilizzare il corso WebView
per gli accessi ai servizi di social media.