Layouts im Leanback-UI-Toolkit

Ein Fernsehbildschirm wird in der Regel aus etwa 3 Metern Entfernung betrachtet. Obwohl er viel größer ist als die meisten anderen Android-Gerätebildschirme, bietet ein Fernsehbildschirm nicht die gleiche Detail- und Farbintensität wie ein kleinerer Gerätebildschirm. Aufgrund dieser Faktoren musst du App-Layouts für TV-Geräte erstellen, um eine nützliche und angenehme Nutzererfahrung zu schaffen.

Layoutdesigns für TV verwenden

Android-Designs können als Grundlage für Layouts in deinen TV-Apps dienen. Verwende ein Design, um die Anzeige deiner App-Aktivitäten, die auf einem Fernseher laufen sollen, anzupassen. In diesem Abschnitt wird erläutert, welche Designs verwendet werden sollten.

Leanback-Design

Die Leanback-Androidx-Bibliothek umfasst 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 Standardelement der Benutzeroberfläche für Android-Apps auf Smartphones und Tablets, ist aber für TV-Apps nicht geeignet. Wenn du keine AndroidX Leanback-Kurse verwendest, wende das Design NoTitleBar auf deine TV-Aktivitäten an, um die Anzeige einer Titelleiste zu unterdrücken. Das folgende Codebeispiel aus einem Manifest einer TV-App 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. Durch diese Kombination kannst du Funktionen wie Drawable-Färbung nutzen, ohne dir Gedanken über die Android-Version machen zu müssen. Wenn du eine App entwickelst, die nur für Android TV ausgeführt wird, solltest du AppCompatActivity nicht verwenden, da die dadurch aktivierten Funktionen entweder schon für Android TV verfügbar oder nicht relevant sind.

Wenn du eine App mit einer gemeinsamen Codebasis für die Android-Mobilgeräte und die Android TV-App erstellst, kann das zu Problemen führen. Für AppCompatActivity und die verschiedenen AppCompat-Widgets muss Theme.AppCompat verwendet werden. Für die Fragmente des Leanback-UI-Toolkits ist die Verwendung von FragmentActivity und Theme.Leanback erforderlich.

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

Sie können Theme.AppCompat.Leanback-Designs auf die gleiche Weise anpassen wie jedes andere Design. Wenn Sie beispielsweise Werte ändern möchten, die für die OnboardingSupportFragment des Leanback-UI-Toolkits spezifisch sind, gehen Sie 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 einige grundlegende Richtlinien erfüllen, damit sie auf großen Bildschirmen nutzbar und effektiv sind. Beachten Sie die folgenden Tipps, um für Fernsehbildschirme optimierte Layouts zu erstellen:

  • Erstellen Sie Layouts im Querformat. Fernsehbildschirme werden immer im Querformat angezeigt.
  • Platzieren Sie die Bildschirmsteuerelemente auf der linken oder rechten Seite des Bildschirms und sparen Sie den vertikalen Platz für Inhalte.
  • Erstellen Sie UIs, 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, die Ausrichtung, das Seitenverhältnis und die Pixeldichte eines Fernsehbildschirms anpassen.
  • Fügen Sie genügend Ränder zwischen den Layoutsteuerelementen hinzu, um eine unübersichtliche Benutzeroberfläche zu vermeiden.

Overscan

Layouts für das Fernsehen haben einige besondere Anforderungen, da die TV-Standards zur Darstellung eines Vollbilds für den Betrachter weiterentwickelt werden. Aus diesem Grund können TV-Geräte den äußeren Rand eines App-Layouts abschneiden, um sicherzustellen, dass der gesamte Bildschirm ausgefüllt ist. Dieses Verhalten wird im Allgemeinen als Overscan bezeichnet.

Positionieren Sie Bildschirmelemente, die immer für den Nutzer sichtbar sein müssen, innerhalb des Bereichs, der zu schnell gescannt werden kann. Durch Hinzufügen eines 5% Rands von 48 dp am linken und rechten Rand und von 27 dp am oberen und unteren Rand zu einem Layout wird sichergestellt, dass sich die Bildschirmelemente im Layout innerhalb des für Overscan gesicherten Bereichs befinden.

Passen Sie keine Bildschirmelemente im Hintergrund an, mit denen der Nutzer nicht direkt interagiert, und kürzen Sie die Elemente nicht in einen Bereich, der zu schnell gescannt werden kann. Auf diese Weise wird dafür gesorgt, dass Hintergrundelemente auf allen Bildschirmen korrekt dargestellt werden.

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

<?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 Überscan-Ränder auf Ihr Layout an, wenn Sie AndroidX Leanback-Klassen wie BrowseSupportFragment oder verwandte Widgets verwenden, da diese Layouts bereits Ränder ohne Scan enthalten.

Anpassbare Texte und Steuerelemente erstellen

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

  • Teilen Sie Text in kleine Blöcke auf, die Nutzende schnell überfliegen können.
  • Hellen Text auf dunklem Hintergrund verwenden. Dieser Stil ist auf einem Fernseher besser zu lesen.
  • Vermeiden Sie einfache Schriftarten oder Schriftarten mit sehr engem und sehr breitem Strich. Verwenden Sie einfache serifenlose Schriftarten und Kantenglättung, um die Lesbarkeit zu verbessern.
  • Standardschriftgrößen von Android verwenden: 
    <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"/>
  • Achten Sie darauf, dass alle Anzeige-Widgets groß genug sind, damit eine Person, die 3 Meter vom Bildschirm entfernt sitzt, deutlich sichtbar sind. Am besten verwenden Sie hierfür die layoutrelative Größe statt absoluter Größenangaben und dichteunabhängige Pixeleinheiten (dp) anstelle von absoluten Pixeleinheiten. Wenn Sie beispielsweise die Breite eines Widgets festlegen möchten, verwenden Sie wrap_content anstelle eines Pixelmaßes und zum Festlegen des Rands für ein Widget dp-Werte anstelle von px-Werten.

Weitere Informationen zu dichteunabhängigen Pixeln und Gebäudelayouts für größere Bildschirmgrößen findest du unter Bildschirmkompatibilität – Übersicht.

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. Prüfen Sie, ob Ihre App verschiedene Bildschirmgrößen unterstützt.

Verschiedene Bildschirmgrößen und -auflösungen haben unterschiedliche Pixeldichten. Um das Erscheinungsbild der Benutzeroberfläche unabhängig von Bildschirmgröße, Auflösung und Pixeldichte beizubehalten, sollten Sie UI-Messungen mit dichteunabhängigen Pixeln (dp) statt Pixeln definieren. Die Bildschirmpixeldichte für verschiedene Bildschirmauflösungen ist unten aufgeführt.

Panelauflösung Pixeldichte des Bildschirms
720p tvdpi
1080 xhdpi
4K xxxhdpi
Weitere Informationen finden Sie unter Unterstützung verschiedener Pixeldichten.

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

Zu vermeidende Layoutmuster

Es gibt mehrere Ansätze zum Erstellen von Layouts, die auf Fernsehgeräten nicht gut funktionieren. Hier sind einige Ansätze der Benutzeroberfläche, die du bei der Entwicklung eines Layouts für Fernseher vermeiden solltest.

  • Smartphone- oder Tablet-Layouts wiederverwenden:Verwende Layouts aus einer Smartphone- oder Tablet-App nicht ohne Änderungen. Layouts, die für andere Formfaktoren von Android-Geräten erstellt wurden, sind für Fernseher nicht gut geeignet und müssen für die Nutzung auf einem Fernseher vereinfacht werden.
  • ActionBar verwenden:Aktionsleisten werden für die Verwendung auf Smartphones und Tablets empfohlen, sind aber für TV-Oberflächen nicht geeignet. Von der Verwendung eines Optionsmenüs in der Aktionsleiste oder eines beliebigen Drop-down-Menüs wird bei TV-Apps dringend abgeraten, da es schwierig ist, ein solches Menü mit einer Fernbedienung zu bedienen.
  • Mit ViewPager:Das Wechseln zwischen den Bildschirmen funktioniert auf einem Smartphone oder Tablet sehr gut. Probiere es aber nicht auf einem Fernseher aus.

Weitere Informationen zum Entwerfen von Layouts, die für das Fernsehen geeignet sind, findest du im Designleitfaden für Fernseher.

Große Bitmaps verarbeiten

Der Speicherplatz auf Fernsehern ist wie bei anderen Android-Geräten begrenzt. Wenn Sie Ihr App-Layout mit Bildern mit sehr hoher Auflösung erstellen oder beim Betrieb der Anwendung viele Bilder mit hoher Auflösung verwenden, können schnell Arbeitsspeicherlimits und Fehler aufgrund fehlenden Arbeitsspeichers auftreten. 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 Wohnzimmerumgebungen empfehlen wir Lösungen für Videoanzeigen, die sich im Vollbildmodus ansehen und innerhalb von 30 Sekunden schließen lassen. Funktionen für Werbung unter Android TV, z. B. Schaltflächen zum Schließen und Klicken, müssen über das Steuerkreuz und nicht über die Touchbedienung zugänglich sein.

Android TV hat keinen Webbrowser. Ihre Anzeigen dürfen nicht versuchen, einen Webbrowser zu starten oder zu Inhalten im Google Play Store weiterzuleiten, die nicht für Android TV-Geräte zugelassen sind.

Hinweis: Sie können die Klasse WebView für Anmeldungen in sozialen Medien verwenden.

Weitere Informationen

Für das Fernsehen entwickeln

Zurück
Best practices for driving engagement on Google TV