am e748fb58: Merge "Android TV Design Guidelines" into klp-modular-dev

* commit 'e748fb5891bac5bb6ae01a0d2550ab70a7ad9a81':
  Android TV Design Guidelines

docs/html/design/tv/patterns.jd

@@ -1,100 +0,0 @@
-page.title=Patterns for TV
-page.tags="design"
-@jd:body
-
-<p>As a developer of apps for TV, you should follow certain patterns to enable users to
-  quickly understand and efficiently your app. This section describes recommended design patterns
-  for TV apps.</p>
-
-<h2>Navigation</h2>
-
-<p>Users typically navigate TV devices using a directional pad (D-Pad). This type of controller
-  limits movement to up, down, left, and right. In a typical D-Pad remote, hardware keys that
-  correspond to those directions are present and an additional action key is available to make a
-  selection. As you design your Android application for TVs, pay special attention to how users
-  navigate your application when using a remote control instead of a touchscreen.</p>
-
-<p>[add visual: D-Pad image or illustration]</p>
-
-<p>A key aspect of making your application work well with a D-Pad controller is to make sure
-  that there is always a object that is obviously in focus. If a user cannot see what is in focus,
-  they will not be able to navigate your app intuitively with this type of controller.</p>
-
-<p>Optimize your app screen layouts for D-Pad navigation. Align objects in your app lists and
-  grids to make navigation within each screen intuitive. Design your layout so it takes advantage of
-  two-axis navigation.</p>
-
-
-<h2>Home and Back Buttons</h2>
-
-<p>
-  In addition to the D-Pad buttons, Android TV devices always include Home and Back buttons on their
-  controllers. Make sure the Back button functions within your app in a way that is consistent with
-  the general <a href="{@docRoot}design/patterns/navigation.html">Android Design guidelines</a>.
-</p>
-
-
-<h2>Focus and Selection</h2>
-
-<p>Providing good focus and selection indicators is key to making your app useable on TV. As
-  mentioned previously, making sure that an object is always selected in your app is critical for
-  effective navigation using a D-Pad. This requirement also means that you must use focus indicators
-  that are easy to recognize and should be consistent throughout your app.</p>
-
-<p>
-  [add visual of selected item on screen]
-</p>
-
-<p>The default focus indicator used in Android TV use a combination of scale, shadow,
-  brightness, and opacity. The focus feedback is enhanced by displaying an animation going from a
-  non-focused to a focused state and back. Instead of immediately applying the focus transformation,
-  it is animated into place to reduce abrupt changes and help users notice how the object changed.</p>
-
-<h2>Audio Feedback</h2>
-
-<p>Sounds on Android TV bring a cinematic quality to the interaction experience. You should
-  consider adding sounds for user actions or to provide feedback when a user is only partially
-  visually engaged with the screen (e.g., because they have their hands full or are multitasking).
-  You should also consider using sounds as alternatives to error messages, for example to indicate
-  that a user has reached the end of a list or is trying to navigate to an undefined location.</p>
-
-<h2>Banners</h2>
-
-<p>
-  App Banners represent your app on the home screen of TV devices and serves and as a way for
-  users to launch your app. Here are specific requirements for the banner image:
-</p>
-
-<ul>
-  <li>Size: 320 x 180 px, xhdpi resource</li>
-  <li>Text should be included in the image. If your app is available in more than one
-      language, you must provide version of the banner image for each supported language.</li>
-</ul>
-
-
-<h2>App Icons</h2>
-
-<p>The app icon is shown in recommendation cards on the Home screen, search results and the main
-  Browse screen of your app if you use {@code BrowseFragment}. Here are the specific
-  requirements for the app icon:</p>
-
-<ul>
-  <li><p>Full color: size: 52x52dp, PNG</p></li>
-  <li><p>Monocolor: size 52x52dp, white(#fff) icon with transparent background, PNG</p></li>
-</ul>
-
-
-<h2>Background Images</h2>
-
-<p>Background images are displayed in the background of your app to provide additional visual
-  interest, information or branding. The BrowseFragment and DetailsFragment classes in the Leanback
-  support library provide specific support for background images and updating them as items are
-  brought into and out of focus. Here are the specific requirements for background images:</p>
-
-<ul>
-  <li>2016x1134 (1920x1080 + 5% extra margin for motion)</li>
-</ul>
-
-<p>
-  <strong>Note:</strong> If the image does not meet this requirement, it is scaled to fit.
-</p>

docs/html/design/tv/ui-overview.jd

@@ -1,63 +0,0 @@
-page.title=UI Overview for TV
-page.tags="design"
-@jd:body
-
-<p>The Android TV system user interface provides the launch pad for your app's big screen
-  experience. It's important to understand how your app is presented in the main user interface and
-  how your app can help users get to the content they want quickly, including contributing content
-  suggestions to the recommendations row.</p>
-
-<p>This section provides quick overview of the Android TV user interface.</p>
-
-
-<h2>Home Screen</h2>
-
-<p>The Home Screen is the start of a TV user's experience, providing search, content
-  recommendations, access to apps and settings. The Home Screen provides a rich and cinematic
-  overview of apps and content.</p>
-
-<img src="{@docRoot}design/tv/images/atv-home.png" alt="TV Home screen" />
-
-
-<h2>Search</h2>
-
-<p>By bringing the power of Google search to the big screen, Android TV makes new, dynamic
-  connections between content - a favorite movie may connect to the discovery of a new music artist,
-  planning trip to Paris might surface new YouTube content and photos.</p>
-
-<img src="{@docRoot}design/tv/images/search.png" alt="Recommendations Row" />
-
-
-<h2>Recommendations</h2>
-
-<p>The recommendation row on Android TV is a central feature of the Home Screen that allows
-  users quick access to dynamic and relevant content for their media consumption activities. The
-  stream is optimized for quick browsing of personalized content and activity resumption (on the
-  device and across devices), while also providing a way for users to act on meaningful new content.</p>
-
-<img src="{@docRoot}design/tv/images/recommendations.png" alt="Recommendations Row" />
-
-<p>
-  The recommendations are based on the user’s recent and frequent usage behaviors, as well as
-  expressed content preferences. They are presented as cards that represent a system or app action,
-  notification, activity, or piece of actionable media. Your app can provide suggestions for the
-  recommendations row to help get your content noticed. To learn more, see
-  <a href="{@docRoot}preview/tv/build-ui/recommendations.html">Recommendations</a>.
-</p>
-
-
-<h2>Apps and Games</h2>
-
-<p>Apps and Games rows both have special areas on the Home Screen. Within these respective
-  areas, Apps and Games titles are reordered to reflect the user’s recent usage.</p>
-
-<img src="{@docRoot}design/tv/images/apps-games-rows.png" alt="Apps and Games Rows" />
-
-
-<h2>Settings</h2>
-
-<p>Access to Settings is found at the bottom of the Home Screen. From here, the user can access
-  Android and device-specific settings. Please see the "Settings" section for more detailed
-  information.</p>
-
-<img src="{@docRoot}design/tv/images/settings.png" alt="Settings Row" />

docs/html/preview/preview_toc.cs

@@ -30,6 +30,19 @@
     <ul>
       <li><a href="<?cs var:toroot ?>preview/tv/start/index.html">
         Get Started</a></li>
+      <li class="nav-section">
+        <div class="nav-section-header">
+          <a href="<?cs var:toroot ?>preview/tv/design/index.html">
+          Design</a></div>
+        <ul>
+          <li><a href="<?cs var:toroot ?>preview/tv/design/principles.html">
+            Creative Vision</a></li>
+          <li><a href="<?cs var:toroot ?>preview/tv/design/patterns.html">
+            UI Patterns</a></li>
+          <li><a href="<?cs var:toroot ?>preview/tv/design/style.html">
+            Style</a></li>
+        </ul>
+      </li>
       <li class="nav-section">
         <div class="nav-section-header">
           <a href="<?cs var:toroot ?>preview/tv/ui/index.html">

docs/html/preview/tv/design/index.jd

@@ -0,0 +1,65 @@
+page.title=Design for TV
+header.justLinks=1
+footer.hide=1
+@jd:body
+
+
+<p>The Android TV platform user interface provides the launch pad for your app's big screen
+  experience. It's important to understand how your app is presented in the main user interface and
+  how your app can help users get to the content they want quickly.</p>
+
+
+<h2>Home Screen</h2>
+
+<p>The Home Screen is the start of the user experience, providing search, content
+  recommendations, and access to apps and settings. This screen provides a rich and cinematic
+  overview of apps and content.</p>
+
+<img src="{@docRoot}preview/tv/design/images/atv-home.jpg" alt="TV Home screen" />
+
+
+<h2>Search</h2>
+
+<p>By bringing the power of Google search to the big screen, Android TV makes new, dynamic
+  connections between content. A favorite movie may lead to the discovery of a new music artist,
+  planning a trip to Paris might surface new YouTube content and photos.</p>
+
+<img src="{@docRoot}preview/tv/design/images/search.jpg" alt="Recommendations Row" />
+
+<p>To learn more about searching within your app, see
+  <a href="{@docRoot}preview/tv/ui/in-app-search.html">Searching in TV Apps</a>.
+
+<h2>Recommendations</h2>
+
+<p>The recommendations row on Android TV is a central feature of the Home Screen that allows
+  users quick access to dynamic and relevant content for their media-consumption activities. The
+  row is optimized for quick browsing of personalized content and activity resumption (on the
+  device and across devices), while also providing a way for users to act on meaningful new
+  content.</p>
+
+<img src="{@docRoot}preview/tv/design/images/recommendations.png" alt="Recommendations Row" />
+
+<p>
+  Recommendations are based on the user’s recent and frequent usage behaviors, as well as
+  expressed content preferences. They appear as cards that represent a system or app action,
+  notification, activity, or piece of actionable media. Your app can provide suggestions for the
+  recommendations row to help get your content noticed. To learn more, see
+  <a href="{@docRoot}preview/tv/ui/recommendations.html">Recommendations</a>.
+</p>
+
+
+<h2>Apps and Games</h2>
+
+<p>Apps and Games rows both have special areas on the Home Screen. Within their respective
+  areas, Apps and Games titles are ordered to reflect the user’s recent usage.</p>
+
+<img src="{@docRoot}preview/tv/design/images/apps-games-rows.jpg" alt="Apps and Games Rows" />
+
+
+<h2>Settings</h2>
+
+<p>Access to Settings is found at the bottom of the Home Screen. From here, the user can access
+  Android and device-specific settings.
+</p>
+
+<img src="{@docRoot}preview/tv/design/images/settings.jpg" alt="Settings Row" />

docs/html/preview/tv/design/patterns.jd

@@ -0,0 +1,86 @@
+page.title=Patterns for TV
+page.tags="design"
+@jd:body
+
+<p>As a developer of apps for TV, you should follow certain patterns to enable users to
+  quickly understand and operate your app. This section describes recommended design patterns
+  for TV apps.</p>
+
+<h2>Navigation, Focus and Selection</h2>
+
+<p>Users typically navigate TV devices using a directional pad (D-Pad). This type of controller
+  limits movement to up, down, left, and right. As you design your app for TV, make sure your
+  user interface has clear paths for two-axis navigation by aligning objects in lists and
+  grids.</p>
+
+<img src="{@docRoot}preview/tv/design/images/focus.png" alt="TV navigation and focus diagram" />
+
+<p>A key aspect of making your application work well with a D-Pad controller is to make sure
+  that there is always an object that is obviously in focus. Your app must clearly indicate
+  what object is focused, so users can easily see what action they can take. Use scale, shadow
+  brightness, opacity, animation or a combination of these attributes to help users see a focused
+  object.</p>
+
+
+<h2>Icons</h2>
+
+<p>Apps on TV devices require some additional icon images for presentation in the system
+  user interface, including home screen launcher images (banners) and recommendation icons.
+  The visual specifications for these icons are shown below.</p>
+
+
+<h3>Banners</h3>
+
+<p>App Banners represent your app on the home screen of TV devices and serve and as a way for
+  users to launch your app. Here are specific requirements for a banner image:
+</p>
+
+<ul>
+  <li>Size: 320 x 180 px, xhdpi resource</li>
+  <li>Text should be included in the image. If your app is available in more than one
+      language, you must provide versions of the banner image for each supported language.</li>
+</ul>
+
+
+<h3>Recommendation Icons</h3>
+
+<p>Recommendation cards include a small icon that is imposed over a colored background.
+  An example and specifications for the this icon are shown below:</p>
+
+<img src="{@docRoot}preview/tv/design/images/icon.png" alt="Recommendation icon examples" />
+
+<p>Here are the requirements for recommendation icons:</p>
+
+<ul>
+  <li>Monocolor: size 16x16dp, white (#fff) icon with transparent background, PNG format</li>
+  <li>Graphics should be centered within the icon image</li>
+</ul>
+
+<p class="note">
+  <strong>Note:</strong> Your app icon image may be desaturated and blended for some card
+  displays.
+</p>
+
+
+<h2>Background Images</h2>
+
+<p>Background images are displayed in the background of your app to provide additional visual
+  interest, information, or branding. The BrowseFragment and DetailsFragment classes in the Leanback
+  support library provide specific support for background images and for updating them as items gain
+  and lose focus. Here are the specific requirements for background images:</p>
+
+<ul>
+  <li>Full color, 1920 x 1080 pixels</li>
+</ul>
+
+<p class="note">
+  <strong>Note:</strong> If the image does not meet this requirement, it is scaled to fit.
+</p>
+
+<h2>Audio Feedback</h2>
+
+<p>Sounds on Android TV bring a cinematic quality to the interaction experience. You should
+  consider adding sounds for user actions or to provide feedback when a user is only partially
+  visually engaged with the screen (e.g., because they are distracted or multitasking).
+  You should also consider using sounds as alternatives to visual messages, for example to indicate
+  that a user has reached the end of a list or is trying to navigate to an undefined location.</p>

docs/html/preview/tv/design/principles.jd

@@ -1,45 +1,33 @@
-page.title=Design Principles for TV
+page.title=Creative Vision for TV
 @jd:body
 
-<p>Users bring a specific set of expectations to the experience of watching TV, versus
-  interacting with a phone or tablet. These principles have been developed by the Android User
+<p>Users bring a specific set of expectations when watching TV, versus
+  interacting with a phone or tablet. These guidelines have been developed by the Android User
   Experience Team to guide creation of the Android TV platform and the apps that run on it.</p>
 
 <h2>Casual Consumption</h2>
 
 <p>The TV is an entertainment interface, not a computer or mobile device. Optimize for
   activities that put content at the center: from the casual posture of movie-watching, to
-  edge-of-seat, immersive gameplay, to hanging out with friends in a living room.</p>
+  immersive gameplay, to hanging out with friends in a living room.</p>
 
-<p>Users expect immediate access to to content when they turn on a TV. Get users into the action
+<p>Users expect immediate access to content when they turn on a TV. Get users into the action
   fast, be it the big game, their favorite show, or a game with friends. The next piece of content
   to watch or play should only be a click or two away.</p>
 
-<p>
-  [add a visual]
-</p>
-
 
 <h2>Cinematic Experience</h2>
 
 <p>Create immersive experiences for the user. Design for as little user interface and as much
-  content as possible on each screen. Use visual imagery, movement and sound to inform and delight
+  content as possible on each screen. Use visual imagery, movement, and sound to inform and delight
   users. Avoid using on-screen text to convey information and purpose. Tell your story with pictures
   and sound.</p>
 
-<p>
-  [add a visual]
-</p>
-
 
 <h2>Simplicity</h2>
 
-<p>An Android TV should be simple and magical. It’s all about finding and enjoying content and
+<p>Android TV is simple and magical. It’s all about finding and enjoying content and
   apps with the least amount of friction. Minimize the number of navigation steps required to
   perform actions. Build apps with the fewest screens possible between app entry and content
   immersion. Avoid making users enter text whenever possible, and use voice interfaces when you
   require text input.</p>
-
-<p>
-  [add a visual]
-</p>

docs/html/preview/tv/design/style.jd

@@ -9,13 +9,14 @@ page.tags="design"
 <h2>Layouts</h2>
 
 <p>The difference between a TV experience that feels right and one that does not greatly depends
-  on the number, spacing and size of on-screen elements. Although TV sizes and resolutions have
+  on the number, spacing, and size of on-screen elements. Although TV sizes and resolutions have
   steadily increased over time, users expect TV experiences to be relatively simple and
   uncluttered.</p>
 
 <p>The additional resolution and screen area afforded by modern displays is best used to display
   things at better quality, rather than greater quantity. For example, use your layouts to show
-  large, beautiful pieces of content, or resize type for both easy reading and generous spacing.</p>
+  large, beautiful pieces of content, or to resize type for both easy reading and generous spacing.
+</p>
 
 <p>If you are creating an app for browsing and playing content, use the prebuilt fragments in the
   Leanback support library. These layouts have been built specifically for use on TV devices with
@@ -23,33 +24,28 @@ page.tags="design"
   see the <a href="{@docRoot}preview/tv/build-ui/index.html">User Interfaces</a> guide.
 </p>
 
-<p>Here are some additional recommendations for creating functional and attractive layout for TV
+<p>Here are some additional recommendations for creating functional and attractive layouts for TV
   apps:</p>
 
 <ul>
-  <li><p>Build layouts designed for landscape orientation. TV screens always use in this
-      orientation.</p></li>
-  <li><p>Put on-screen navigational controls on the left or right side of the screen and
-      save the vertical space for content.</p></li>
-  <li><p>Create UIs that are divided into sections, by using Fragments and use view groups
-      like GridView instead of ListView to make better use of the horizontal screen space.</p></li>
-  <li><p>Add sufficient margins between layout controls to avoid a cluttered interface.</p></li>
+  <li>Design layouts for landscape orientation. TV screens always use this
+      orientation.</li>
+  <li>Design your artwork assets for best viewing at HD resolution (1920 x 1080 pixels).</li>
+  <li>Put on-screen navigational controls on the left or right side of the screen, and
+      save the vertical space for content.</li>
+  <li>Use Fragments to create UIs that are divided into sections, and use view groups
+      like GridView instead of ListView to make better use of the horizontal screen space.</li>
+  <li>Avoid a cluttered interface by adding sufficient margins between layout controls.</li>
 </ul>
 
 
-<h3>Screen Size</h3>
-
-<p>TV devices running Android are intended to operate at HD resolution (1920 x 1080 pixels) or
-  higher. Design your artwork assets for best viewing at this resolution.</p>
-
-
 <h3>Overscan</h3>
 
 <p>During the evolution of TV technology, overscan originally described an area of TV content
   outside of a safe zone that most TVs could reliably display. Even on some of today’s HDTV flat
   screens, areas outside that zone may not be visible.</p>
 
-<img src="{@docRoot}design/tv/images/overscan.png" alt="image alt text" />
+<img src="{@docRoot}preview/tv/design/images/overscan.png" alt="Overscan borders for TV" />
 
 <p>Build a 10% margin into your TV screen designs to account for overscan area the TV may not
   display correctly. On a 1920 x 1080 pixel screen, this margin should be a minimum of 27px from the
@@ -63,8 +59,9 @@ page.tags="design"
   not match what you see on a computer screen.</p>
 
 <p>Subtle hue or brightness differences between elements may disappear or be over-emphasized on
-  TV screens. Some color gradient combinations will show bands. You should avoid pure whites and
-  highly saturated colors in large areas of the screen (especially reds, greens and blues). You
+  TV screens. Some color gradient combinations will show bands. You should avoid pure whites on
+  large areas of the screen. For highly saturated colors (especially reds, greens and blues) you
+  should review them when used to fill significant areas of the screen.  You
   should also avoid using very dark or muddy colors, as TV settings may display these colors with
   exaggerated contrast, causing them to be indistinguishable.</p>
 
@@ -76,17 +73,14 @@ page.tags="design"
   be 18sp. We recommend the following guidelines for TV apps:</p>
 
 <ul>
-  <li>Browse Titles: Regular 44sp</li>
-  <li>Browse Menu Category Text: 20sp at 50% transparency</li>
-  <li>Browse Focused Menu Category Text: 24sp with no transparency</li>
-  <li>Row Category Titles focused: 20sp with no transparency</li>
-  <li>Row Category Titles focused: 20sp at 50% transparency</li>
-  <li>Details Content Titles: 34sp</li>
-  <li>Details Subtext: 14sp</li>
+  <li><strong>Card Titles:</strong> Roboto Condensed 16sp</li>
+  <li><strong>Card Subtext:</strong> Roboto Condensed 12sp</li>
+  <li><strong>Browse Screen Title:</strong> Roboto Regular 44sp</li>
+  <li><strong>Browse Category Title:</strong> Roboto Condensed 20sp</li>
+  <li><strong>Details Content Titles:</strong> Roboto Regular 34sp</li>
+  <li><strong>Details Subtext:</strong> Roboto Regular 14sp</li>
 </ul>
 
-<p>[visual showing text on a TV screen (sidebar position)]</p>
-
 <p>Some TVs have strong sharpness and contrast settings as their defaults. These picture
   settings make thin and light typefaces look jagged and make the text difficult for people to read.
   Therefore you should avoid thin or light typefaces on TV.</p>
@@ -94,15 +88,14 @@ page.tags="design"
 <h2>Text</h2>
 
 <p>Use text in TV apps sparingly. The position of users relative to a TV screen
-  (typically about 10 away) makes it harder for users to read text and the expectation of users in a
-  TV environment not conducive to reading. Follow these tips for the best handling of text in your
-  app:</p>
+  (typically about 10 feet away) makes it harder for users to read text. Users also don't expect to
+  read much in a TV environment. Follow these tips for the best handling of text in your app:</p>
 
 <ul>
   <li>Break text into small chunks that users can quickly scan.</li>
   <li>Use light text on a dark background. This style is easier to read on a TV.</li>
   <li>Avoid lightweight fonts or fonts that have both very narrow and very broad
-      strokes. Use simple sans-serif fonts and use anti-aliasing to increase readability.</li>
-  <li>Use layout-relative sizing rather than absolute sizing and density-independent
+      strokes. Use simple sans-serif fonts and anti-aliasing to increase readability.</li>
+  <li>Use layout-relative sizing rather than absolute sizing, and density-independent
       pixel units instead of absolute pixel units.</li>
-</ul>
+</ul>