A TV screen is typically viewed from about 10 feet away, and while it is much larger than most other Android device displays, this type of screen does not provide the same level of precise detail and color as a smaller device. These factors require you to create app layouts with TV devices in mind in order to create a useful and enjoyable user experience.
This lesson describes the minimum requirements and implementation details for building effective layouts in TV apps.
You should also read Design for Android TV.
Use layout themes for TV
Android Themes can provide a basis for layouts in your TV apps. You should use a theme to modify the display of your app activities that are meant to run on a TV device. This section explains which themes you should use.
The Leanback androidx library includes
Theme.Leanback, a theme for TV activities that provides a
consistent visual style. We strongly recommend using this theme for any TV app built
with the androidx leanback classes. The following code
sample shows how to apply this theme to an activity:
<activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@style/Theme.Leanback">
The title bar is a standard user interface element for Android apps on phones and tablets, but it is not appropriate for TV apps. If you are not using androidx leanback classes, you should apply this theme to your TV activities to suppress the display of a title bar. The following code example from a TV app manifest demonstrates how to apply this theme to remove the display of a title bar:
<application> ... <activity android:name="com.example.android.TvActivity" android:label="@string/app_name" android:theme="@android:style/Theme.NoTitleBar"> ... </activity> </application>
In Android mobile apps, it’s very common to use
along with one of the
Theme.AppCompat themes. This combination allows you to use features such as drawable tinting
without worrying about the version of Android runnning on the device. If you’re developing an app that only runs on
Android TV, there’s no need to use
AppCompatActivity because the features it enables are either
already available on Android TV or not relevant (for example, the action bar).
If you are building an app with a shared codebase between Android mobile and Android TV, you can run
into some challenges due to theming.
AppCompatActivity and the various
require that you use
Theme.AppCompat while the Leanback fragments expect you to use
Theme.Leanback. If you need to use the same base activity for Android mobile and Android TV, or
if you want to use custom views based on
AppCompat widgets such as
you should use the
Theme.AppCompat.Leanback themes. These themes give you all of the
AppCompat and also provide the Leanback-specific values.
You can still customize
Theme.AppCompat.Leanback themes the same way you do with any
other theme. For example, if you want to change values that are specific to the Leanback’s
do something similar to the following:
<style name="MyOnboarding" parent="Theme.AppCompat.Leanback.Onboarding"> <item name="onboardingLogoStyle">@style/MyOnboardingLogoStyle</item> <item name="onboardingPageIndicatorStyle">@style/MyOnboardingPageIndicatorStyle</item> </style>
Build basic TV layouts
Layouts for TV devices should follow some basic guidelines to ensure they are usable and effective on large screens. Follow these tips to build landscape layouts optimized for TV screens:
- Build layouts with a landscape orientation. TV screens always display in landscape mode.
- Put on-screen navigation controls on the left or right side of the screen and save the vertical space for content.
- Create UIs that are divided into sections, using Fragments, and use view groups like
ListViewto make better use of the horizontal screen space.
- Use view groups such as
LinearLayoutto arrange views. This approach allows the system to adjust the position of the views to the size, alignment, aspect ratio, and pixel density of a TV screen.
- Add sufficient margins between layout controls to avoid a cluttered UI.
Layouts for TV have some unique requirements due to the evolution of TV standards and the desire to always present a full screen picture to viewers. For this reason, TV devices may clip the outside edge of an app layout in order to ensure that the entire display is filled. This behavior is generally referred to as overscan.
Screen elements that must be visible to the user at all times should be positioned within the overscan safe area. Adding a 5% margin of 48dp on the left and right edges and 27dp on the top and bottom edges to a layout ensures that screen elements in that layout will be within the overscan safe area.
Background screen elements that the user doesn't directly interact with should not be adjusted or clipped to the overscan safe area. This approach ensures that background screen elements look correct on all screens.
The following example shows a root layout that can contain background elements, and a nested child layout that has a 5% margin and can contain elements within the overscan safe area:
<?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>
Caution: Do not apply overscan margins to your layout if you are using the
androidx leanback classes, such as
BrowseFragment or related
widgets, as those layouts already incorporate overscan-safe margins.
Build useable text and controls
The text and controls in a TV app layout should be easily visible and navigable from a distance. Follow these tips to make your user interface elements easier to see from a distance:
- Break text into small chunks that users can quickly scan.
- Use light text on a dark background. This style is easier to read on a TV.
- Avoid lightweight fonts or fonts that have both very narrow and very broad strokes. Use simple sans-serif fonts and anti-aliasing to increase readability.
- Use Android's standard font sizes:
<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"/>
- Ensure that all your view widgets are large enough to be clearly visible to someone
sitting 10 feet away from the screen (this distance is greater for very large screens). The
best way to do this is to use layout-relative sizing rather than absolute sizing, and
density-independent pixel (dp) units instead of absolute pixel units. For example, to set the
width of a widget, use
wrap_contentinstead of a pixel measurement, and to set the margin for a widget, use dip values instead of px values.
For more information about density-independent pixels and building layouts to handle larger screen sizes, see Supporting multiple screens.
Manage layout resources for TV
Like all other Android devices, TVs may support various screen sizes with different resolutions, including, but not limited to, 720p, 1080p, and 4K. Your app should support different screen sizes.
Different screen sizes and resolutions have different pixel densities. To preserve the appearance of your UI across screen sizes, resolution, and pixel densities, define UI measurements using density-independent pixels (dp) rather than pixels. See Support different pixel densities for more information.
For more information on optimizing layouts and resources for large screens see Design for multiple screens.
Avoid layout anti-patterns
There are a few approaches to building layouts that you should avoid because they do not work well on TV devices and lead to bad user experiences. Here are some user interface approaches you should specifically not use when developing a layout for TV.
- Re-using phone or tablet layouts - Do not reuse layouts from a phone or tablet app without modification. Layouts built for other Android device form factors are not well suited for TV devices and should be simplified for operation on a TV.
- ActionBar - While this user interface convention is recommended for use on phones and tablets, it is not appropriate for a TV interface. In particular, using an action bar options menu (or any pull-down menu for that matter) is strongly discouraged, due to the difficulty in navigating such a menu with a remote control.
- ViewPager - Sliding between screens can work great on a phone or tablet, but don't try this on a TV!
For more information on designing layouts that are appropriate to TV, see the TV design guide.
Handle large bitmaps
TV devices, like any other Android device, have a limited amount of memory. If you build your app layout with very high-resolution images or use many high-resolution images in the operation of your app, it can quickly run into memory limits and cause out of memory errors. For most cases, we recommend that you use the Glide library to fetch, decode, and display bitmaps in your app. For more information on getting the best performance when working with bitmaps, refer to our general Android graphics best practices.
Provide effective advertising
For the living room environment, we recommend you use video ads solutions that are full-screen and dismissable within 30 seconds. Functionality for advertising on Android TV, such as dismiss buttons and clickthroughs, must be accessible using the D-pad rather than touch.
Android TV does not provide a web browser. Your ads must not attempt to launch a web browser or redirect to Google Play Store content that is not approved for Android TV devices.
Note: You can use the
for logins to social media services.