Crea layout TV

In genere lo schermo della TV viene visualizzato 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 quello di uno schermo più piccolo. Questi fattori richiedono di creare layout delle app tenendo a mente i dispositivi TV per offrire un'esperienza utente utile e piacevole.

Questa guida descrive i requisiti minimi e i dettagli di implementazione per creare layout efficaci per le app per TV.

Per ulteriori informazioni, leggi l'articolo Progettare per la TV.

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 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 offre uno stile visivo coerente. Ti consigliamo di utilizzare 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 telefoni e tablet, ma non è appropriata per le app per TV. Se non utilizzi corsi AndroidX Leanback, applica il tema NoTitleBar alle tue attività TV per impedire la visualizzazione di una barra del titolo. Il seguente esempio di codice dal file manifest di un'app per 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 tracciabile senza preoccuparti della versione di Android in esecuzione sul dispositivo. Se stai sviluppando un'app che funziona solo su Android TV, non è necessario 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 per dispositivi mobili e Android TV, potresti incorrere in alcune sfide dovute alla presenza di temi. AppCompatActivity e i vari widget AppCompat richiedono l'utilizzo di Theme.AppCompat, mentre i frammenti Leanback prevedono l'utilizzo di FragmentActivity e Theme.Leanback.

Se devi utilizzare la stessa attività di base per dispositivi mobili Android e Android TV oppure se vuoi utilizzare visualizzazioni personalizzate basate su widget AppCompat come AppCompatImageView, usa i temi Theme.AppCompat.Leanback. Questi temi ti offrono tutti i temi di AppCompat e includono 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 di OnboardingSupportFragment di Leanback, 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 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 un orientamento orizzontale. Gli schermi TV vengono sempre visualizzati in modalità Orizzontale.
  • Posiziona i controlli di navigazione sullo schermo a sinistra o a destra e salva lo spazio verticale per i contenuti.
  • Crea UI suddivise in sezioni utilizzando frammenti. Utilizza gruppi di visualizzazioni come GridView anziché ListView per sfruttare meglio lo spazio orizzontale sullo schermo.
  • Utilizza gruppi di visualizzazioni come RelativeLayout o LinearLayout per 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à 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 TV e al desiderio di presentare sempre 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 pieno. Questo comportamento è generalmente definito overscan.

Posiziona gli elementi dello schermo che devono essere visibili all'utente in qualsiasi momento all'interno dell'area di sicurezza 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 siano all'interno dell'area di sicurezza overscan.

Non regolare gli elementi della schermata di sfondo con cui l'utente non interagisce direttamente e non ritagliarli nell'area di sicurezza overscan. Questo approccio aiuta a garantire che gli elementi della schermata di sfondo appaiano 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 sicurezza 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, come BrowseFragment o widget correlati, perché questi layout incorporano già margini sicuri per l'overscan.

Crea testo e controlli utilizzabili

Segui questi suggerimenti per semplificare la visione a distanza di testo e controlli nell'app TV:

  • Suddividi il testo in piccoli blocchi che gli utenti possano leggere rapidamente.
  • Utilizza testo chiaro su sfondo scuro. Questo stile è più facile da leggere su una TV.
  • Evita caratteri leggeri o caratteri che hanno tratti sia molto stretti che molto ampi. Usa caratteri Sans-Serif semplici e anti-alias per aumentare 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"/>
    
  • 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 assolute e unità di pixel indipendenti dalla densità (dp) anziché unità di pixel assolute. Ad esempio, per impostare la larghezza di un widget, utilizza wrap_content invece della misurazione in pixel, mentre 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 in modo da 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 diverse. Per mantenere l'aspetto dell'interfaccia utente per dimensioni dello schermo, 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 dei pannelli TV.

Risoluzione del riquadro Densità pixel dello schermo
720p tvdpi
1080 xhdpi
4K xxxhdpi
Per ulteriori informazioni, consulta la sezione Supporto di diverse densità di pixel.

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 alla creazione di layout che non funzionano bene sui dispositivi TV. Di seguito sono riportati 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 realizzati 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 telefoni e tablet, non sono appropriate per l'interfaccia della TV. L'utilizzo di un menu opzioni della barra delle azioni o di un menu a discesa è vivamente sconsigliato per le app per TV, a causa della difficoltà di navigare in tale menu con un telecomando.
  • Con ViewPager: lo scorrimento da una schermata all'altra è un'ottima soluzione su smartphone o tablet, ma non provare a farlo sulla TV.

Per ulteriori informazioni sulla progettazione di layout appropriati per la TV, consulta la guida Design della TV.

Gestire le bitmap di grandi dimensioni

I dispositivi TV, come altri dispositivi Android, hanno una quantità di memoria limitata. Se crei il layout della tua app con immagini ad alta risoluzione o ne utilizzi molte nel suo funzionamento, potresti raggiungere rapidamente i limiti di memoria e causare errori di memoria. Nella maggior parte dei casi, consigliamo di utilizzare la libreria Glide per recuperare, decodificare e visualizzare i bitmap nella tua app. Per ulteriori informazioni su come ottenere prestazioni ottimali con le bitmap, consulta le best practice generali per la grafica Android.

Offri pubblicità efficace

Per l'ambiente del salotto, ti consigliamo di utilizzare soluzioni di annunci video a schermo intero che possono essere ignorati 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 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 il corso WebView per l'accesso ai servizi di social media.