1 page.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 25 <h2>Icons</h2> 26 27 <p>Apps on TV devices require some additional icon images for presentation in the system 28 user interface, including home screen launcher images (banners) and recommendation icons. 29 The visual specifications for these icons are shown below.</p> 30 31 32 <h3 id="banner">Banners</h3> 33 34 <p>App Banners represent your app on the home screen of TV devices and serve and as a way for 35 users to launch your app. Here are specific requirements for a banner image: 36 </p> 37 38 <ul> 39 <li>Size: 320 x 180 px, xhdpi resource</li> 40 <li>Text should be included in the image. If your app is available in more than one 41 language, you must provide versions of the banner image for each supported language.</li> 42 </ul> 43 44 45 <h3>Recommendation Icons</h3> 46 47 <p>Recommendation cards include a small icon that is imposed over a colored background. 48 An example and specifications for this icon are shown below:</p> 49 50 <img src="{@docRoot}design/tv/images/icon.png" alt="Recommendation icon examples" /> 51 52 <p>Here are the requirements for recommendation icons:</p> 53 54 <ul> 55 <li>Monocolor: size 16x16dp, white (#fff) icon with transparent background, PNG format</li> 56 <li>Graphics should be centered within the icon image</li> 57 </ul> 58 59 <p class="note"> 60 <strong>Note:</strong> Your app icon image may be desaturated and blended for some card 61 displays. 62 </p> 63 64 65 <h2>Background Images</h2> 66 67 <p>Background images are displayed in the background of your app to provide additional visual 68 interest, information, or branding. The user interface widgets provided in the <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support 69 library</a> provide specific support for background images and for updating them as items gain 70 and lose focus. The specific requirements for background images on TV devices is that they 71 should be full color and a size of 1920 x 1080 pixels. 72 </p> 73 74 <p class="note" id="solid-background"> 75 <strong>Important:</strong> Background images must not be transparent. Your must not allow any 76 portion of another app to be seen through your app. 77 </p> 78 79 <p class="note"> 80 <strong>Note:</strong> If you background image does not meet the size requirements, it is scaled 81 to fit. 82 </p> 83 84 <h2>Audio Feedback</h2> 85 86 <p>Sounds on Android TV bring a cinematic quality to the interaction experience. You should 87 consider adding sounds for user actions or to provide feedback when a user is only partially 88 visually engaged with the screen (e.g., because they are distracted or multitasking). 89 You should also consider using sounds as alternatives to visual messages. For example, use sounds 90 to indicate that a user has reached the end of a list or is trying to navigate to an undefined 91 location.</p> 92
