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 <h2 id="banner">App and Game Banners</h3> 25 26 <p>Banners are images that represent the face of your app or game on the home 27 screens of Android TV devices and serve as a way for users to launch your app. 28 Here are the requirements for your banner image:</p> 29 30 <ul> 31 <li>Size: 320 x 180 px, xhdpi resource</li> 32 <li>Text must be included in the image. If your app is available in more than 33 one language, you must provide versions of the banner image for each supported 34 language.</li> 35 </ul> 36 37 <p>See <a href="{@docRoot}training/tv/start/start.html#banner">Provide a home screen banner</a> 38 in Get Started with TV Apps for more information.</p> 39 40 <h2 id="recommendation">Recommendations</h2> 41 42 <p>The first row of the Android TV home screen displays cards for content recommended by applications. 43 Your application provides these recommendations, as described in 44 <a href="{@docRoot}training/tv/discovery/recommendations.html">Recommending TV Content</a>. 45 For a visual overview of recommendations, see 46 <a href="{@docRoot}design/tv/index.html#recommendations">Designing for Android TV</a>.</p> 47 48 <div class="cols"> 49 <div class="col-8 with-callouts"> 50 51 <p>The design elements of the recommendation card are as follows:</p> 52 <ol> 53 <li><strong>Large icon</strong></li> 54 <li><strong>Content title</strong></li> 55 <li><strong>Content text</strong></li> 56 <li><strong>Small icon</strong></li> 57 </ol> 58 59 <p>The design specifications for these elements are described below.</p> 60 61 <p>You can also set a background image (not shown) and the color of the card's text area in the 62 recommendation notification. See <a href="{@docRoot}training/tv/discovery/recommendations.html"> 63 Recommendations</a> for more information.</p> 64 65 </div> 66 <div class="col-5"> 67 68 <img src="{@docRoot}images/tv/recommend-card.png"> 69 70 </div> 71 </div> 72 73 <h3>Background Image</h3> 74 75 <p>The background image also appears behind the recommendations 76 row and fills the Android TV home screen when the user selects the recommendation card. This image 77 should be different than the one provided for the large icon, and meet the following specifications:</p> 78 79 <ul> 80 <li>Measure 2016 x 1134 pixels (1920 x 1080 plus 5% margin for motion)</li> 81 <li id="solid-background">Must not be transparent</li> 82 </ul> 83 84 <p class="note"> 85 <strong>Note:</strong> If the background image does not meet the size requirements, the system 86 scales it to fit. 87 </p> 88 89 <p>The user interface widgets provided in the 90 <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support 91 library</a> provide specific support for background images and for updating them as items gain 92 and lose focus. 93 </p> 94 95 <h3 id="icons">Icons</h3> 96 97 <h4>Large icon</h4> 98 99 <p>Typically, the large icon is an image of the content for the recommendation. It appears 100 above a colored area that contains the recommendation content title and text. This image should be 101 different from that which you provide for the background image, and conform to the following 102 specifications:</p> 103 104 <ul> 105 <li>Height: 176dp or more</li> 106 <li>Minimum width: 2/3 of the height (117dp for an image 176dp in height)</li> 107 <li>Max width: 4/3 of the height (234dp for an image 176dp in height)</li> 108 <li>Must not be transparent</li> 109 </ul> 110 111 <p class="note"> 112 <strong>Note:</strong> If the large icon does not meet the size requirements, the system 113 scales it to fit. 114 </p> 115 116 <h4>Small icon</h4> 117 118 <p>Recommendation cards include a small icon that is imposed over a colored 119 background. The icon and background color both display at 100% opacity when the card 120 is selected and at 50% opacity when the card is not selected.</p> 121 122 <img src="{@docRoot}design/tv/images/icon.png" alt="Recommendation icon examples" /> 123 124 <p>Here are the requirements for a small recommendation icon:</p> 125 126 <ul> 127 <li>Visually flat graphic, monocolor, 16x16dp</li> 128 <li>Color <code>#eeeeee</code> with transparency</li> 129 <li>Graphic centered over transparent background</li> 130 <li>PNG file format</li> 131 </ul> 132 133 <p class="note"><strong>Note:</strong> The color value <code>#eeeeee</code> is actually a light 134 gray, but it is used by the system to create a background which appears white.</p> 135 136 <h2>Audio Feedback</h2> 137 138 <p>Sounds on Android TV bring a cinematic quality to the interaction experience. You should 139 consider adding sounds for user actions or to provide feedback when a user is only partially 140 visually engaged with the screen (e.g., because they are distracted or multitasking). 141 You should also consider using sounds as alternatives to visual messages. For example, use sounds 142 to indicate that a user has reached the end of a list or is trying to navigate to an undefined 143 location.</p> 144
