1page.title=UI Patterns for TV
2@jd:body
3
4
5<p>As a developer of apps for TV, you should follow certain patterns to enable users to
6  quickly understand and operate your app. This section describes recommended design patterns
7  for TV apps.</p>
8
9<h2>Navigation, Focus and Selection</h2>
10
11<p>Users typically navigate TV devices using a directional pad (D-Pad). This type of controller
12  limits movement to up, down, left, and right. As you design your app for TV, make sure your
13  user interface has clear paths for two-axis navigation by aligning objects in lists and
14  grids.</p>
15
16<img src="{@docRoot}design/tv/images/focus.png" alt="TV navigation and focus diagram" />
17
18<p>A key aspect of making your application work well with a D-pad controller is to make sure
19  that there is always an object that is obviously in focus. Your app must clearly indicate
20  what object is focused, so users can easily see what action they can take. Use scale, shadow
21  brightness, opacity, animation or a combination of these attributes to help users see a focused
22  object.</p>
23
24<h2 id="banner">App and Game Banners</h3>
25
26<p>App Banners represent your app or game on the home screens of TV devices and serve and as a way for
27  users to launch your app. Here are the specific requirements for a banner image:
28</p>
29
30<ul>
31  <li>Size: 320 x 180 px, xhdpi resource</li>
32  <li>Text should be included in the image. If your app is available in more than one
33      language, you must provide versions of the banner image for each supported language.</li>
34</ul>
35
36<p>See <a href="{@docRoot}training/tv/start/start.html#banner">Provide a home screen banner</a>
37in Get Started with TV Apps for more information.</p>
38
39<h2 id="recommendation">Recommendations</h2>
40
41<p>The first row of the Android TV home screen displays cards for content recommended by applications.
42Your application provides these recommendations, as described in <a href="{@docRoot}training/tv/discovery/recommendations.html">
43</a>. For a visual overview of recommendations, see <a href="design/tv/index.html#recommendations">
44Design for Android TV</a>.</p>
45
46<div class="cols">
47  <div class="col-8 with-callouts">
48
49  <p>The design elements of the recommendation card are as follows:</p>
50  <ol>
51  <li><strong>Large icon</strong></li>
52  <li><strong>Content title</strong></li>
53  <li><strong>Content text</strong></li>
54  <li><strong>Small icon</strong></li>
55  </ol>
56
57  <p>The design specifications for these elements are described below.</p>
58
59  <p>You can also set a background image (not shown) and the color of the card's text area in the
60  recommendation notification. See <a href="{@docRoot}training/tv/discovery/recommendations.html">
61  Recommendations</a> for more information.</p>
62
63  </div>
64  <div class="col-5">
65
66    <img src="{@docRoot}images/tv/recommend-card.png">
67
68  </div>
69</div>
70
71<h3>Background Image</h3>
72
73<p>The background image also appears behind the recommendations
74row and fills the Android TV home screen when the user selects the recommendation card. This image
75should be different than the one provided for the large icon, and meet the following specifications:</p>
76
77<ul>
78  <li>Measure 2016 x 1134 pixels (1920 x 1080 plus 5% margin for for motion)</li>
79  <li id="solid-background">Must not be transparent</li>
80</ul>
81
82<p class="note">
83  <strong>Note:</strong> If the background image does not meet the size requirements, the system
84  scales it to fit.
85</p>
86
87<p>The user interface widgets provided in the
88  <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support
89  library</a> provide specific support for background images and for updating them as items gain
90  and lose focus.
91</p>
92
93<h3 id="icons">Icons</h3>
94
95<h4>Large icon</h4>
96
97<p>Typically, the large icon is an image of the content for the recommendation. It appears
98above a colored area that contains the recommendation content title and text. This image should be
99different from that which you provide for the background image, and conform to the following
100specifications:</p>
101
102<ul>
103  <li>Height: 176dp or more</li>
104  <li>Minimum width: 2/3 of the height (117dp for an image 176dp in height)</li>
105  <li>Max width: 4/3 of the height (234dp for an image 176dp in height)</li>
106  <li>Must not be transparent</li>
107</ul>
108
109<p class="note">
110  <strong>Note:</strong> If the large icon does not meet the size requirements, the system
111  scales it to fit.
112</p>
113
114<h4>Small icon</h4>
115
116<p>Recommendation cards include a small icon that is imposed over a colored background. The icon and
117background color display at 100% opacity when the card is selected, and at 50% opacity when not
118selected.</p>
119
120<img src="{@docRoot}design/tv/images/icon.png" alt="Recommendation icon examples" />
121
122<p>Here are the requirements for recommendation small icons:</p>
123
124<ul>
125  <li>Flat image</li>
126  <li>Monocolor: size 16x16dp, white (#fff) icon with transparent background, PNG format</li>
127  <li>Graphics should be centered within the icon image</li>
128</ul>
129
130<h2>Audio Feedback</h2>
131
132<p>Sounds on Android TV bring a cinematic quality to the interaction experience. You should
133  consider adding sounds for user actions or to provide feedback when a user is only partially
134  visually engaged with the screen (e.g., because they are distracted or multitasking).
135  You should also consider using sounds as alternatives to visual messages. For example, use sounds
136  to indicate that a user has reached the end of a list or is trying to navigate to an undefined
137  location.</p>
138