TV-Layouts erstellen

Ein Fernsehbildschirm wird in der Regel aus etwa 3 Metern Entfernung betrachtet. Er ist zwar viel größer als die Displays der meisten anderen Android-Geräte, bietet aber nicht die gleiche Detailtiefe und Farbwiedergabe wie ein kleinerer Bildschirm. Aus diesen Gründen müssen Sie App-Layouts für TV-Geräte erstellen, um eine nützliche und angenehme Nutzererfahrung im Wohnzimmer zu ermöglichen.

Grundlegende Layoutprinzipien

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

  • Erstellen Sie Layouts im Querformat. TV-Bildschirme werden immer im Querformat angezeigt.
  • Platzieren Sie die Steuerelemente für die Bildschirmnavigation auf der linken oder rechten Seite des Bildschirms und sparen Sie den vertikalen Platz für Inhalte.
  • Verwenden Sie responsive und relative Größenangaben (z. B. die Einheiten dp und sp), damit die Benutzeroberflächen bei unterschiedlichen Bildschirmauflösungen sauber skaliert werden.
  • Fügen Sie zwischen den Layoutsteuerelementen ausreichend Ränder und Abstände hinzu, um eine überladene Benutzeroberfläche zu vermeiden.

Overscan

Layouts für TV-Geräte haben einige besondere Anforderungen, da sich die TV-Standards so entwickelt haben, dass dem Zuschauer ein Vollbild präsentiert wird. Aus diesem Grund schneiden TV-Geräte möglicherweise den äußeren Rand eines App-Layouts ab, um sicherzustellen, dass der gesamte Bildschirm ausgefüllt ist. Dieses Verhalten wird allgemein als Overscan bezeichnet.

Positionieren Sie Bildschirmelemente, die für den Nutzer immer sichtbar sein müssen, im Overscan-sicheren Bereich. Wenn Sie einem Layout einen Rand von 5% mit 48 dp an den linken und rechten Rändern und 27 dp an den oberen und unteren Rändern hinzufügen, befinden sich die Bildschirmelemente im Layout im Overscan-sicheren Bereich.

Passen Sie die Hintergrundbildschirmelemente, mit denen der Nutzer nicht direkt interagiert, nicht an und schneiden Sie die Elemente nicht auf den Overscan-sicheren Bereich zu. So wird sichergestellt, dass die Hintergrundbildschirmelemente auf allen Bildschirmen korrekt aussehen.

Nutzerfreundlichen Text und nutzerfreundliche Steuerelemente erstellen

Beachten Sie diese Tipps, damit der Text und die Steuerelemente in Ihrer TV-App auch aus der Ferne gut zu sehen sind:

  • Teilen Sie den Text in kleine Abschnitte auf, die Nutzer schnell überfliegen können.
  • Verwenden Sie hellen Text auf dunklem Hintergrund. Dieser Stil ist auf einem Fernseher leichter zu lesen.
  • Vermeiden Sie dünne Schriftarten oder Schriftarten mit sehr schmalen und sehr breiten Strichen. Verwenden Sie serifenlose Schriftarten und Anti-Aliasing, um die Lesbarkeit zu verbessern.
  • Alle Ansichtswidgets müssen groß genug sein, damit sie für eine Person, die 3 Meter vom Bildschirm entfernt sitzt, gut sichtbar sind. Verwenden Sie dichteunabhängige Pixel (dp) anstelle von absoluten Pixeleinheiten und skalierbare Pixel (sp) für die Typografie.

Weitere Informationen zu dichteunabhängigen Pixeln und zum Erstellen von Layouts für größere Bildschirme finden Sie unter Übersicht zur Bildschirmkompatibilität.

Layoutressourcen für TV-Geräte verwalten

Wie alle anderen Android-Geräte haben auch Fernseher unterschiedliche Bildschirmgrößen und unterstützen unterschiedliche Auflösungen, darunter 720p, 1080p und 4K. Ihre App muss unterschiedliche Bildschirmgrößen unterstützen.

Unterschiedliche Bildschirmgrößen und Auflösungen haben unterschiedliche Pixeldichten. Damit die Benutzeroberfläche bei unterschiedlichen Bildschirmgrößen, Auflösungen und Pixeldichten gleich aussieht, definieren Sie die UI-Maße mit dichteunabhängigen Pixeln (dp). Die Pixeldichte des Bildschirms für unterschiedliche TV-Panel-Auflösungen ist in der folgenden Tabelle aufgeführt:

Panel-Auflösung Pixeldichte des Bildschirms
720p tvdpi
1080p xhdpi
4K xxxhdpi

Weitere Informationen finden Sie unter Unterschiedliche Pixeldichten unterstützen und der Übersicht zur Bildschirmkompatibilität.

Zu vermeidende Layoutmuster

Es gibt einige Ansätze zum Erstellen von Layouts, die auf TV-Geräten nicht gut funktionieren. Vermeiden Sie die folgenden Benutzeroberflächenmuster, wenn Sie ein Layout für TV-Geräte entwickeln:

  • Layouts für Smartphones oder Tablets wiederverwenden: Verwenden Sie Layouts aus einer Smartphone- oder Tablet-App nicht ohne Änderungen wieder. Layouts, die für andere Android-Geräteformfaktoren erstellt wurden, sind nicht gut für TV-Geräte geeignet und müssen für die Verwendung auf einem Fernseher vereinfacht werden.
  • Aktionsleisten oder Menüs für Smartphones verwenden: Obere Aktionsleisten und Drop-down-Menüs sind für eine TV-Oberfläche nicht geeignet, da sie mit einer Fernbedienung nur schwer zu bedienen sind.
  • Navigation nur mit Wischbewegungen verwenden: Das Wischen zwischen Bildschirmen kann auf einem Smartphone oder Tablet gut funktionieren, aber versuchen Sie nicht, nur Wischbewegungen auf einem Fernseher zu verwenden, bei dem Nutzer auf eine Fernbedienung mit Steuerkreuz angewiesen sind.

Weitere Informationen zum Entwerfen von Layouts, die für TV-Geräte geeignet sind, finden Sie unter Für TV-Geräte entwickeln.

Mit großen Bitmaps umgehen

TV-Geräte haben einen begrenzten Arbeitsspeicher. Wenn Ihr App-Layout Bilder mit sehr hoher Auflösung verwendet, können die Arbeitsspeicherlimits schnell erreicht werden und Fehler aufgrund von zu wenig Arbeitsspeicher auftreten. Verwenden Sie effiziente Bibliotheken zum Laden und Dekodieren von Bildern (z. B. Coil oder Glide), um Bitmaps in Ihrer App abzurufen, zu dekodieren und anzuzeigen.

Weitere Informationen zur optimalen Leistung bei der Arbeit mit Bitmaps finden Sie unter Best Practices für Android-Grafiken.

Effektive Werbung bereitstellen

Für die Wohnzimmerumgebung empfehlen wir Videoanzeigenlösungen, die im Vollbildmodus angezeigt werden und innerhalb von 30 Sekunden geschlossen werden können. Funktionen für Werbung auf Android TV, z. B. Schaltflächen zum Schließen und Klicks, müssen über das Steuerkreuz und nicht per Touchscreen zugänglich sein.

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