1 page.title=Style for TV 2 @jd:body 3 4 5 <p>Follow these style guidelines to create beautiful, functional apps for TV.</p> 6 7 8 <h2>Layouts</h2> 9 10 <p>The difference between a TV experience that feels right and one that does not greatly depends 11 on the number, spacing, and size of on-screen elements. Although TV sizes and resolutions have 12 steadily increased over time, users expect TV experiences to be relatively simple and 13 uncluttered.</p> 14 15 <p>The additional resolution and screen area afforded by modern displays is best used to display 16 things at better quality, rather than greater quantity. For example, use your layouts to show 17 large, beautiful pieces of content, or to resize type for both easy reading and generous spacing. 18 </p> 19 20 <p>If you are creating an app for browsing and playing content, use the prebuilt fragments in the 21 <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support 22 library</a>. These layouts have been built specifically for use on TV devices with 23 the guidance of the Android User Experience team. For more information on using these classes, 24 see the <a href="{@docRoot}training/tv/index.html">Building Apps for TV</a> training. 25 </p> 26 27 <p>Here are some additional recommendations for creating functional and attractive layouts for TV 28 apps:</p> 29 30 <ul> 31 <li>Design layouts for landscape orientation. TV screens always use this 32 orientation.</li> 33 <li>Design your artwork assets for best viewing at HD resolution (1920 x 1080 pixels).</li> 34 <li>Put on-screen navigational controls on the left or right side of the screen, and 35 save the vertical space for content.</li> 36 <li>Use <a href="{@docRoot}guide/components/fragments.html">fragments</a> to create UIs that are 37 divided into sections, and use view groups like <a href= 38 "{@docRoot}guide/topics/ui/layout/gridview.html">Grid View</a> instead of <a href= 39 "{@docRoot}guide/topics/ui/layout/listview.html">List View</a> to make better use of the 40 horizontal screen space. 41 </li> 42 <li>Avoid a cluttered interface by adding sufficient margins between layout controls.</li> 43 </ul> 44 45 46 <h3>Overscan</h3> 47 48 <p>During the evolution of TV technology, overscan originally described an area of TV content 49 outside of a safe zone that most TVs could reliably display. Even on some of todays HDTV flat 50 screens, areas outside that zone may not be visible.</p> 51 52 <img src="{@docRoot}design/tv/images/overscan.png" alt="Overscan borders for TV" /> 53 54 <p>Build a 5% margin into your TV screen designs to account for overscan area the TV may not 55 display correctly. On a 1920 x 1080 screen, this margin should be a minimum of 27 pixels 56 from the top and bottom edges and a minimum of 48 pixels from the right and left edges of the 57 picture. 58 </p> 59 60 61 <h2>Color</h2> 62 63 <p>Color rendering on televisions can be imprecise compared to computer monitors or mobile 64 devices. LCD and Plasma TVs often apply smoothing and sharpening filters, and color rendering may 65 not match what you see on a computer screen.</p> 66 67 <p>Subtle hue or brightness differences between elements may disappear or be over-emphasized on 68 TV screens. Some color gradient combinations will show bands. You should avoid pure whites on 69 large areas of the screen. For highly saturated colors (especially reds, greens and blues) you 70 should review them when used to fill significant areas of the screen. You 71 should also avoid using very dark or muddy colors, as TV settings may display these colors with 72 exaggerated contrast, causing them to be indistinguishable.</p> 73 74 75 <h2 id="typography">Typography</h2> 76 77 <p>The text and controls in a TV application's UI should be easily visible and navigable from a 78 distance. The minimum recommended font size for TV is 12sp. The default text size setting should 79 be 18sp. We recommend the following guidelines for TV apps:</p> 80 81 <ul> 82 <li><strong>Card Titles:</strong> Roboto Condensed 16sp</li> 83 <li><strong>Card Subtext:</strong> Roboto Condensed 12sp</li> 84 <li><strong>Browse Screen Title:</strong> Roboto Regular 44sp</li> 85 <li><strong>Browse Category Title:</strong> Roboto Condensed 20sp</li> 86 <li><strong>Details Content Titles:</strong> Roboto Regular 34sp</li> 87 <li><strong>Details Subtext:</strong> Roboto Regular 14sp</li> 88 </ul> 89 90 <p>Some TVs have strong sharpness and contrast settings as their defaults. These picture 91 settings make thin and light typefaces look jagged and make the text difficult for people to read. 92 Therefore you should avoid thin or light typefaces on TV.</p> 93 94 <h2>Text</h2> 95 96 <p>Use text in TV apps sparingly. The position of users relative to a TV screen 97 (typically about 10 feet away) makes it harder for users to read text. Users also don't expect to 98 read much in a TV environment. Follow these tips for the best handling of text in your app:</p> 99 100 <ul> 101 <li>Break text into small chunks that users can quickly scan.</li> 102 <li>Use light text on a dark background. This style is easier to read on a TV.</li> 103 <li>Avoid lightweight fonts or fonts that have both very narrow and very broad 104 strokes. Use simple sans-serif fonts and anti-aliasing to increase readability.</li> 105 <li>Use layout-relative sizing rather than absolute sizing, and density-independent 106 pixel units instead of absolute pixel units.</li> 107 </ul> 108
