docs: squashed commit of i.o launches

Change-Id: I71bb6efb27f363dc6b47bf1e283369ae274caee8

13 files changed, 366 insertions, 0 deletions

diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs
index 4c2aab2..2bd0bf9 100644
--- a/docs/html/design/design_toc.cs
+++ b/docs/html/design/design_toc.cs
@@ -67,6 +67,25 @@
   </li>
 
   <li class="nav-section">
+    <div class="nav-section-header"><a href="<?cs var:toroot ?>design/devices.html">Devices</a></div>
+    <ul>
+      <!-- wear design goes here -->
+      <li class="nav-section">
+        <div class="nav-section-header">
+          <a href="<?cs var:toroot ?>design/tv/index.html">TV</a></div>
+        <ul>
+          <li><a href="<?cs var:toroot ?>design/tv/principles.html">Design Principles</a></li>
+          <li><a href="<?cs var:toroot ?>design/tv/ui-overview.html">UI Overview</a></li>
+          <li><a href="<?cs var:toroot ?>design/tv/style.html">Style</a></li>
+          <li><a href="<?cs var:toroot ?>design/tv/patterns.html">Patterns</a></li>
+        </ul>
+      </li>
+
+    </ul>
+  </li>
+
+
+  <li class="nav-section">
     <div class="nav-section-header empty"><a href="<?cs var:toroot ?>design/downloads/index.html">Downloads</a></div>
   </li>
 
diff --git a/docs/html/design/tv/images/apps-games-rows.png b/docs/html/design/tv/images/apps-games-rows.png
new file mode 100644
index 0000000..1724147
--- /dev/null
+++ b/docs/html/design/tv/images/apps-games-rows.png
diff --git a/docs/html/design/tv/images/atv-home.png b/docs/html/design/tv/images/atv-home.png
new file mode 100644
index 0000000..2c18827
--- /dev/null
+++ b/docs/html/design/tv/images/atv-home.png
diff --git a/docs/html/design/tv/images/atv.png b/docs/html/design/tv/images/atv.png
new file mode 100644
index 0000000..cd96164
--- /dev/null
+++ b/docs/html/design/tv/images/atv.png
diff --git a/docs/html/design/tv/images/overscan.png b/docs/html/design/tv/images/overscan.png
new file mode 100644
index 0000000..bf08dd8
--- /dev/null
+++ b/docs/html/design/tv/images/overscan.png
diff --git a/docs/html/design/tv/images/recommendations.png b/docs/html/design/tv/images/recommendations.png
new file mode 100644
index 0000000..579b390
--- /dev/null
+++ b/docs/html/design/tv/images/recommendations.png
diff --git a/docs/html/design/tv/images/search.png b/docs/html/design/tv/images/search.png
new file mode 100644
index 0000000..be0d778
--- /dev/null
+++ b/docs/html/design/tv/images/search.png
diff --git a/docs/html/design/tv/images/settings.png b/docs/html/design/tv/images/settings.png
new file mode 100644
index 0000000..f9f45fa
--- /dev/null
+++ b/docs/html/design/tv/images/settings.png
diff --git a/docs/html/design/tv/index.jd b/docs/html/design/tv/index.jd
new file mode 100644
index 0000000..2519e25
--- /dev/null
+++ b/docs/html/design/tv/index.jd
@@ -0,0 +1,31 @@
+page.title=Design for TV
+header.justLinks=1
+footer.hide=1
+@jd:body
+
+<style>
+#landing-graphic-container {
+  position: relative;
+}
+
+#text-overlay {
+  position: absolute;
+  left: 0;
+  top: 402px;
+  width: 220px;
+}
+</style>
+
+<div id="landing-graphic-container">
+  <div id="text-overlay">
+    <span itemprop="description">
+      Build beautiful apps for the biggest screen in the house.</span>
+    <br><br>
+    <a href="{@docRoot}design/tv/principles.html"
+       class="landing-page-link">Design Principles</a>
+  </div>
+
+  <a href="{@docRoot}design/tv/principles.html">
+    <img src="{@docRoot}design/tv/images/atv.png" style="margin-left: 70px;">
+  </a>
+</div>
diff --git a/docs/html/design/tv/patterns.jd b/docs/html/design/tv/patterns.jd
new file mode 100644
index 0000000..c8cc0b0
--- /dev/null
+++ b/docs/html/design/tv/patterns.jd
@@ -0,0 +1,100 @@
+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>
\ No newline at end of file
diff --git a/docs/html/design/tv/principles.jd b/docs/html/design/tv/principles.jd
new file mode 100644
index 0000000..5c0ce10
--- /dev/null
+++ b/docs/html/design/tv/principles.jd
@@ -0,0 +1,45 @@
+page.title=Design Principles 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
+  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>
+
+<p>Users expect immediate access to 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
+  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
+  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>
diff --git a/docs/html/design/tv/style.jd b/docs/html/design/tv/style.jd
new file mode 100644
index 0000000..479ed91
--- /dev/null
+++ b/docs/html/design/tv/style.jd
@@ -0,0 +1,108 @@
+page.title=Style for TV
+page.tags="design"
+@jd:body
+
+
+<p>Follow these style guidelines to create beautiful, functional apps for TV.</p>
+
+
+<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
+  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>
+
+<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
+  the guidance of the Android User Experience team. For more information on using these classes,
+  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
+  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>
+</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" />
+
+<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
+  top and bottom edges and a minimum of 48px from the right and left edges of the picture.</p>
+
+
+<h2>Color</h2>
+
+<p>Color rendering on televisions can be imprecise compared to computer monitors or mobile
+  devices. LCD and Plasma TVs often apply smoothing and sharpening filters, and color rendering may
+  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
+  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>
+
+
+<h2>Typography</h2>
+
+<p>The text and controls in a TV application's UI should be easily visible and navigable from a
+  distance. The minimum recommended font size for TV is 12sp. The default text size setting should
+  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>
+</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>
+
+<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>
+
+<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
+      pixel units instead of absolute pixel units.</li>
+</ul>
\ No newline at end of file
diff --git a/docs/html/design/tv/ui-overview.jd b/docs/html/design/tv/ui-overview.jd
new file mode 100644
index 0000000..c58c9cd
--- /dev/null
+++ b/docs/html/design/tv/ui-overview.jd
@@ -0,0 +1,63 @@
+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" />