Skip to content

Most visited

Recently visited

navigation

UI Patterns for TV

As a developer of apps for TV, you should follow certain patterns to enable users to quickly understand and operate your app. This section describes recommended design patterns for TV apps.

Navigation, Focus and Selection

Users typically navigate TV devices using a directional pad (D-Pad). This type of controller limits movement to up, down, left, and right. As you design your app for TV, make sure your user interface has clear paths for two-axis navigation by aligning objects in lists and grids.

TV navigation and focus diagram

A key aspect of making your application work well with a D-pad controller is to make sure that there is always an object that is obviously in focus. Your app must clearly indicate what object is focused, so users can easily see what action they can take. Use scale, shadow brightness, opacity, animation or a combination of these attributes to help users see a focused object.

Banners are images that represent the face of your app or game on the home screens of Android TV devices and serve as a way for users to launch your app. Here are the requirements for your banner image:

See Provide a home screen banner in Get Started with TV Apps for more information.

Recommendations

The first row of the Android TV home screen displays cards for content recommended by applications. Your application provides these recommendations, as described in Recommending TV Content. For a visual overview of recommendations, see Designing for Android TV.

The design elements of the recommendation card are as follows:

  1. Large icon
  2. Content title
  3. Content text
  4. Small icon

The design specifications for these elements are described below.

You can also set a background image (not shown) and the color of the card's text area in the recommendation notification. See Recommendations for more information.

Background Image

The background image also appears behind the recommendations row and fills the Android TV home screen when the user selects the recommendation card. This image should be different than the one provided for the large icon, and meet the following specifications:

Note: If the background image does not meet the size requirements, the system scales it to fit.

The user interface widgets provided in the v17 leanback support library provide specific support for background images and for updating them as items gain and lose focus.

Icons

Large icon

Typically, the large icon is an image of the content for the recommendation. It appears above a colored area that contains the recommendation content title and text. This image should be different from that which you provide for the background image, and conform to the following specifications:

Note: If the large icon does not meet the size requirements, the system scales it to fit.

Small icon

Recommendation cards include a small icon that is imposed over a colored background. The icon and background color both display at 100% opacity when the card is selected and at 50% opacity when the card is not selected.

Recommendation icon examples

Here are the requirements for a small recommendation icon:

Note: The color value #eeeeee is actually a light gray, but it is used by the system to create a background which appears white.

Audio Feedback

Sounds on Android TV bring a cinematic quality to the interaction experience. You should consider adding sounds for user actions or to provide feedback when a user is only partially visually engaged with the screen (e.g., because they are distracted or multitasking). You should also consider using sounds as alternatives to visual messages. For example, use sounds to indicate that a user has reached the end of a list or is trying to navigate to an undefined location.

This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Follow Google Developers on WeChat

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a short survey?
Help us improve the Android developer experience. (Dec 2017 Android Platform & Tools Survey)