Layouts im Leanback-UI-Toolkit

Ein Fernsehbildschirm wird in der Regel aus einer Entfernung von etwa drei Metern betrachtet und ist zwar viel größer als die meisten anderen Bildschirme von Android-Geräten, aber ein Fernsehbildschirm bietet nicht die gleichen Details und Farben wie ein kleinerer Bildschirm. Diese Faktoren erfordern das Erstellen von App-Layouts unter Berücksichtigung von TV-Geräten, um eine nützliche und angenehme Nutzererfahrung zu bieten.

Layoutdesigns für TV verwenden

Android-Designs können als Grundlage für Layouts in deinen TV-Apps dienen. Mit einem Design kannst du die Darstellung deiner App-Aktivitäten ändern, die auf einem Fernseher ausgeführt werden sollen. In diesem Abschnitt wird erläutert, welche Themen Sie verwenden sollten.

Leanback-Design

Die androidx.leanback-Bibliothek enthält Theme.Leanback, ein Design für TV-Aktivitäten, das einen einheitlichen visuellen Stil bietet. Verwende dieses Design für alle TV-Apps, die mit den AndroidX Leanback-Klassen erstellt wurden. Das folgende Codebeispiel zeigt, wie dieses Design auf eine Aktivität angewendet wird:

<activity
  android:name="com.example.android.TvActivity"
  android:label="@string/app_name"
  android:theme="@style/Theme.Leanback">

NoTitleBar-Design

Die Titelleiste ist ein standardmäßiges Benutzeroberflächenelement für Android-Apps auf Smartphones und Tablets, eignet sich jedoch nicht für TV-Apps. Wenn du keine AndroidX Leanback-Klassen verwendest, wende das Design NoTitleBar auf deine TV-Aktivitäten an, um die Anzeige einer Titelleiste zu unterdrücken. Das folgende Codebeispiel aus einem TV-App-Manifest zeigt, wie dieses Design angewendet wird, um die Anzeige einer Titelleiste zu entfernen:

<application>
  ...
  <activity
    android:name="com.example.android.TvActivity"
    android:label="@string/app_name"
    android:theme="@android:style/Theme.NoTitleBar">
    ...
  </activity>
</application>

AppCompat-Designs

In mobilen Android-Apps wird AppCompatActivity häufig zusammen mit einem der Theme.AppCompat-Designs verwendet. Mit dieser Kombination kannst du Funktionen wie die Tönung für Drehbewegungen verwenden, ohne dir Sorgen machen zu müssen, welche Android-Version auf dem Gerät ausgeführt wird. Wenn du eine App entwickelst, die nur für Android TV ausgeführt werden kann, verwende AppCompatActivity nicht, da die dadurch aktivierten Funktionen entweder bereits für Android TV verfügbar oder nicht relevant sind.

Wenn Sie eine App mit einer gemeinsamen Codebasis für Android-Mobilgeräte und Android TV erstellen, kann es zu einigen Herausforderungen kommen. Für AppCompatActivity und die verschiedenen AppCompat-Widgets musst du Theme.AppCompat verwenden. Für die Fragmente des Leanback-UI-Toolkits musst du hingegen FragmentActivity und Theme.Leanback verwenden.

Wenn du für Android-Mobilgeräte und Android TV dieselbe Basisaktivität oder benutzerdefinierte Ansichten verwenden möchtest, die auf AppCompat-Widgets wie AppCompatImageView basieren, verwende die Theme.AppCompat.Leanback-Designs. Diese Themen enthalten alle Themen aus AppCompat und stellen auch die Leanback-spezifischen Werte bereit.

Du kannst Theme.AppCompat.Leanback-Designs auf die gleiche Weise anpassen wie bei jedem anderen Design. Wenn Sie beispielsweise Werte ändern möchten, die für das OnboardingSupportFragment-Toolkit des Leanback-UI-Toolkits spezifisch sind, gehen Sie in etwa so vor:

<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding">
    <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item>
    <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item>
</style>

Einfache TV-Layouts erstellen

Layouts für Fernsehgeräte müssen einigen grundlegenden Richtlinien entsprechen, damit sie auf großen Bildschirmen nutzbar und effektiv sind. Befolgen Sie diese Tipps, um für TV-Bildschirme optimierte Layouts zu erstellen:

• Erstellen Sie Layouts im Querformat. Fernsehbildschirme werden immer im Querformat angezeigt.
• Platziere die Navigationssteuerelemente auf dem Bildschirm links oder rechts und spare den vertikalen Platz für Inhalte.
• Erstellen Sie Benutzeroberflächen, die mithilfe von Fragmenten in Abschnitte unterteilt sind. Verwenden Sie Ansichtsgruppen wie GridView anstelle von ListView, um den horizontalen Bildschirmbereich besser zu nutzen.
• Verwenden Sie Ansichtsgruppen wie RelativeLayout oder LinearLayout, um Ansichten anzuordnen. Auf diese Weise kann das System die Position der Ansichten an die Größe, Ausrichtung, Seitenverhältnis und Pixeldichte eines Fernsehbildschirms anpassen.
• Fügen Sie ausreichende Ränder zwischen Layout-Steuerelementen ein, um eine überladene Benutzeroberfläche zu vermeiden.

Overscan

Layouts für Fernseher haben aufgrund der Entwicklung der TV-Standards einige besondere Anforderungen, um Nutzern ein Vollbildbild zu präsentieren. Aus diesem Grund kann es sein, dass Fernsehgeräte den äußeren Rand eines App-Layouts beschneiden, damit der gesamte Bildschirm ausgefüllt wird. Dieses Verhalten wird im Allgemeinen als Overscan bezeichnet.

Positioniere Bildschirmelemente, die für den Nutzer jederzeit sichtbar sein müssen, innerhalb des Overscan-sicheren Bereichs. Wenn Sie einem Layout einen Rand von 5% von 48 dp an der linken und rechten Kante und 27 dp an den oberen und unteren Rändern hinzufügen, sorgen Sie dafür, dass die Bildschirmelemente im Layout innerhalb des Overscan-sicheren Bereichs liegen.

Passen Sie Bildschirmelemente im Hintergrund, mit denen der Nutzer nicht direkt interagiert, nicht an und kürzen Sie die Elemente nicht auf den Overscan-sicheren Bereich. Dieser Ansatz trägt dazu bei, dass Elemente des Hintergrundbildschirms auf allen Bildschirmen korrekt dargestellt werden.

Das folgende Beispiel zeigt ein Stammlayout, das Hintergrundelemente und ein verschachteltes untergeordnetes Layout mit einem Rand von 5% und Elemente innerhalb des Overscan-sicheren Bereichs enthalten kann:

<?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>

Achtung:Wenden Sie keine Overscan-Ränder auf Ihr Layout an, wenn Sie AndroidX Leanback-Klassen wie BrowseSupportFragment oder verwandte Widgets verwenden, da diese Layouts bereits Overscan-sichere Ränder enthalten.

Verwendbare Texte und Steuerelemente erstellen

Mit den folgenden Tipps können Sie den Text und die Steuerelemente in Ihrer TV-App auch aus der Ferne besser erkennen:

• Teilen Sie Text in kleine Blöcke auf, die Nutzer schnell überfliegen können.
• Hellen Text auf dunklem Hintergrund verwenden Dieser Stil ist auf einem Fernseher besser lesbar.
• Vermeiden Sie Schriftarten mit sehr schmaler und breit gefasster Kontur. Verwenden Sie einfache Sans-Serif-Schriftarten und Kantenglättung, um die Lesbarkeit zu verbessern.
• Verwende die Standardschriftgrößen von 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"/>
  

• Achte darauf, dass alle Ansichts-Widgets groß genug sind, dass sie auch für Personen, die etwa 3 Meter vom Bildschirm entfernt sind, gut sichtbar sind. Am besten verwenden Sie dazu eine layoutbezogene Größe statt einer absoluten Größenanpassung sowie dichteunabhängige Pixeleinheiten (dp) anstelle von absoluten Pixeleinheiten. Wenn du beispielsweise die Breite eines Widgets festlegen möchtest, verwende wrap_content anstelle einer Pixelmessung. Um den Rand für ein Widget festzulegen, verwende dp-Werte anstelle von px-Werten.

Weitere Informationen zu dichteunabhängigen Pixeln und Erstellungslayouts für größere Bildschirmformate findest du unter Bildschirmkompatibilität.

Layoutressourcen für TV verwalten

Wie alle anderen Android-Geräte haben Fernseher unterschiedliche Bildschirmgrößen und unterstützen unterschiedliche Auflösungen, einschließlich, aber nicht beschränkt auf 720p, 1080p und 4K. Achten Sie darauf, dass Ihre App unterschiedliche Bildschirmgrößen unterstützt.

Verschiedene Bildschirmgrößen und -auflösungen haben unterschiedliche Pixeldichten. Damit Ihre UI bei allen Bildschirmgrößen, Auflösungen und Pixeldichten dargestellt wird, definieren Sie UI-Messungen mit dichteunabhängigen Pixeln (dp) und nicht mit Pixeln. Unten sehen Sie die Bildschirmpixeldichte bei verschiedenen TV-Panel-Auflösungen.

Bereichsauflösung	Bildschirm-Pixeldichte
720p	tvdpi
1080	xhdpi
4K	xxxhdpi

Weitere Informationen finden Sie unter Verschiedene Pixeldichten unterstützen.

Weitere Informationen zum Optimieren von Layouts und Ressourcen für große Bildschirme findest du unter Bildschirmkompatibilität – Übersicht.

Zu vermeidende Layoutmuster

Es gibt einige Ansätze, um Layouts zu erstellen, die auf Fernsehern nicht gut funktionieren. Im Folgenden findest du einige Ansätze für Benutzeroberflächen, die du bei der Entwicklung eines Layouts für Fernseher vermeiden solltest.

• Wiederverwendung von Smartphone- oder Tablet-Layouts:Verwende Layouts einer Smartphone- oder Tablet-App nicht ohne Änderungen wieder. Layouts, die für andere Formfaktoren von Android-Geräten erstellt wurden, sind nicht gut für Fernseher geeignet und müssen für den Betrieb auf einem Fernseher vereinfacht werden.
• Verwendung von ActionBar:Aktionsleisten werden zwar für die Verwendung auf Smartphones und Tablets empfohlen, sind jedoch für eine TV-Oberfläche nicht geeignet. Von der Verwendung eines Optionsmenüs für die Aktionsleiste oder eines Drop-down-Menüs wird für TV-Apps dringend abgeraten, da es schwierig ist, ein solches Menü mit einer Fernbedienung zu verwenden.
• Mit ViewPager:Auf einem Smartphone oder Tablet funktioniert das Verschieben zwischen den Bildschirmen gut. Probier es aber nicht auf einem Fernseher aus.

Weitere Informationen zum Entwerfen von Layouts, die für das Fernsehen geeignet sind, findest du im TV-Design-Leitfaden.

Große Bitmaps verarbeiten

Fernseher und andere Android-Geräte haben nur einen begrenzten Speicherplatz. Wenn Sie Ihr App-Layout mit sehr hochauflösenden Bildern erstellen oder für den Betrieb Ihrer App viele hochauflösende Bilder verwenden, kann dies schnell zu Speicherlimits und zu Fehlern im Arbeitsspeicher führen. In den meisten Fällen empfehlen wir die Verwendung der Glide-Bibliothek, um Bitmaps in deiner App abzurufen, zu decodieren und anzuzeigen. Weitere Informationen zur optimalen Leistung bei der Arbeit mit Bitmaps findest du in unseren allgemeinen Best Practices für Android-Grafiken.

Effektive Werbung bereitstellen

Für Wohnzimmer empfehlen wir Lösungen für Videoanzeigen, die im Vollbildmodus sind und sich innerhalb von 30 Sekunden schließen lassen. Funktionen für Werbung auf Android TV, z. B. Schaltflächen zum Schließen und Klicks, müssen über das Steuerkreuz zugänglich sein, anstatt sie zu berühren.

Android TV bietet keinen Webbrowser. In Ihren Anzeigen darf nicht versucht werden, einen Webbrowser zu öffnen oder Nutzer zu Inhalten aus dem Google Play Store weiterzuleiten, die nicht für Android TV-Geräte zugelassen sind.

Hinweis:Sie können die Klasse WebView für die Anmeldung in Social-Media-Diensten verwenden.

Zusätzliche Ressourcen

Design für das Fernsehen