docs: Migrate TV Design docs to main DAC-Design area
Change-Id: Ie9ba7e519ccdf46b58010d5ff11b4042134b7a57
diff --git a/docs/html/design/design_toc.cs b/docs/html/design/design_toc.cs
index 885f336..1a6ee7a 100644
--- a/docs/html/design/design_toc.cs
+++ b/docs/html/design/design_toc.cs
@@ -23,7 +23,15 @@
<li><a href="<?cs var:toroot ?>design/wear/style.html">Style</a></li>
</ul>
</li>
- <li><a href="<?cs var:toroot ?>design/tv/index.html">TV</a></li>
+ <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">Creative Vision</a></li>
+ <li><a href="<?cs var:toroot ?>design/tv/patterns.html">UI Patterns</a></li>
+ <li><a href="<?cs var:toroot ?>design/tv/style.html">Style</a></li>
+ </ul>
+ </li>
<li><a href="<?cs var:toroot ?>design/auto/index.html">Auto</a></li>
</ul>
</li>
diff --git a/docs/html/preview/tv/design/images/apps-games-rows.jpg b/docs/html/design/tv/images/apps-games-rows.jpg
similarity index 100%
rename from docs/html/preview/tv/design/images/apps-games-rows.jpg
rename to docs/html/design/tv/images/apps-games-rows.jpg
Binary files differ
diff --git a/docs/html/preview/tv/design/images/atv-framed-med.png b/docs/html/design/tv/images/atv-framed-med.png
similarity index 100%
rename from docs/html/preview/tv/design/images/atv-framed-med.png
rename to docs/html/design/tv/images/atv-framed-med.png
Binary files differ
diff --git a/docs/html/preview/tv/design/images/atv-home.jpg b/docs/html/design/tv/images/atv-home.jpg
similarity index 100%
rename from docs/html/preview/tv/design/images/atv-home.jpg
rename to docs/html/design/tv/images/atv-home.jpg
Binary files differ
diff --git a/docs/html/preview/tv/design/images/focus.png b/docs/html/design/tv/images/focus.png
similarity index 100%
rename from docs/html/preview/tv/design/images/focus.png
rename to docs/html/design/tv/images/focus.png
Binary files differ
diff --git a/docs/html/preview/tv/design/images/icon.png b/docs/html/design/tv/images/icon.png
similarity index 100%
rename from docs/html/preview/tv/design/images/icon.png
rename to docs/html/design/tv/images/icon.png
Binary files differ
diff --git a/docs/html/preview/tv/design/images/overscan.png b/docs/html/design/tv/images/overscan.png
similarity index 100%
rename from docs/html/preview/tv/design/images/overscan.png
rename to docs/html/design/tv/images/overscan.png
Binary files differ
diff --git a/docs/html/preview/tv/design/images/recommendations.png b/docs/html/design/tv/images/recommendations.png
similarity index 100%
rename from docs/html/preview/tv/design/images/recommendations.png
rename to docs/html/design/tv/images/recommendations.png
Binary files differ
diff --git a/docs/html/preview/tv/design/images/search.jpg b/docs/html/design/tv/images/search.jpg
similarity index 100%
rename from docs/html/preview/tv/design/images/search.jpg
rename to docs/html/design/tv/images/search.jpg
Binary files differ
diff --git a/docs/html/preview/tv/design/images/settings.jpg b/docs/html/design/tv/images/settings.jpg
similarity index 100%
rename from docs/html/preview/tv/design/images/settings.jpg
rename to docs/html/design/tv/images/settings.jpg
Binary files differ
diff --git a/docs/html/design/tv/index.jd b/docs/html/design/tv/index.jd
index d144ff0..483c24f 100644
--- a/docs/html/design/tv/index.jd
+++ b/docs/html/design/tv/index.jd
@@ -2,14 +2,67 @@
@jd:body
-<img src="{@docRoot}design/media/android-tv.png"
- width="460" style="float:right;margin:0 0 40px 40px" />
+<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>
+
+<p class="note">
+ <strong>Important:</strong> There are specific design requirements your app must meet to qualify
+ as an Android TV app on Google Play. For more information, see the requirements listed in
+ <a href="{@docRoot}distribute/essentials/quality/tv.html">TV App Quality</a>.
+</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}design/tv/images/atv-home.jpg" alt="TV Home screen" />
-<p>Android TV is <strong>coming soon</strong> and lets you engage your users in a new, shared environment.</p>
+<h2>Search</h2>
-<p>Users bring a specific set of expectations to the experience of watching TV, versus interacting
-with a phone or tablet. So find out how to get your app ready for its big-screen debut
-later this year by reading the
-<a href="{@docRoot}preview/tv/design/index.html">Android TV Design Guide</a>
-in the L Developer Preview.</p>
\ No newline at end of file
+<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}design/tv/images/search.jpg" alt="Recommendations Row" />
+
+<p>To learn more about searching within your app, see
+ <a href="{@docRoot}training/tv/discovery/in-app-search.html">Searching within 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}design/tv/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}training/tv/discovery/recommendations.html">Recommending TV Content</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}design/tv/images/apps-games-rows.jpg" alt="Apps and Games Rows" />
+
+
+<h2>Settings</h2>
+
+<p>Users can access Android and device-specific settings from the bottom of the Home Screen. From
+ here, the user can access Android and device-specific settings.
+</p>
+
+<img src="{@docRoot}design/tv/images/settings.jpg" alt="Settings Row" />
diff --git a/docs/html/preview/tv/design/patterns.jd b/docs/html/design/tv/patterns.jd
similarity index 71%
rename from docs/html/preview/tv/design/patterns.jd
rename to docs/html/design/tv/patterns.jd
index 48faee9..51bb699 100644
--- a/docs/html/preview/tv/design/patterns.jd
+++ b/docs/html/design/tv/patterns.jd
@@ -1,7 +1,7 @@
-page.title=Patterns for TV
-page.tags="design"
+page.title=UI Patterns for TV
@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>
@@ -13,7 +13,7 @@
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" />
+<img src="{@docRoot}design/tv/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
@@ -47,7 +47,7 @@
<p>Recommendation cards include a small icon that is imposed over a colored background.
An example and specifications for this icon are shown below:</p>
-<img src="{@docRoot}preview/tv/design/images/icon.png" alt="Recommendation icon examples" />
+<img src="{@docRoot}design/tv/images/icon.png" alt="Recommendation icon examples" />
<p>Here are the requirements for recommendation icons:</p>
@@ -65,16 +65,20 @@
<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>
+ interest, information, or branding. The user interface widgets provided in the <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support
+ library</a> provide specific support for background images and for updating them as items gain
+ and lose focus. The specific requirements for background images on TV devices is that they
+ should be full color and a size of 1920 x 1080 pixels.
+</p>
-<ul>
- <li>Full color, 1920 x 1080 pixels</li>
-</ul>
+<p class="note" id="solid-background">
+ <strong>Important:</strong> Background images must not be transparent. Your must not allow any
+ portion of another app to be seen through your app.
+</p>
<p class="note">
- <strong>Note:</strong> If the image does not meet this requirement, it is scaled to fit.
+ <strong>Note:</strong> If you background image does not meet the size requirements, it is scaled
+ to fit.
</p>
<h2>Audio Feedback</h2>
@@ -82,5 +86,6 @@
<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>
+ You should also consider using sounds as alternatives to visual messages. For example, use sounds
+ to indicate that a user has reached the end of a list or is trying to navigate to an undefined
+ location.</p>
diff --git a/docs/html/preview/tv/design/principles.jd b/docs/html/design/tv/principles.jd
similarity index 87%
rename from docs/html/preview/tv/design/principles.jd
rename to docs/html/design/tv/principles.jd
index 106fa96..c2f5fc9 100644
--- a/docs/html/preview/tv/design/principles.jd
+++ b/docs/html/design/tv/principles.jd
@@ -1,9 +1,12 @@
page.title=Creative Vision for TV
@jd:body
-<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>
+
+<p>Users bring a specific set of expectations when watching TV, versus interacting with a phone or
+ tablet. The Android User Experience Team has developed the following guidelines for creation of
+ the Android TV platform and the apps that run on it.
+</p>
+
<h2>Casual Consumption</h2>
diff --git a/docs/html/preview/tv/design/style.jd b/docs/html/design/tv/style.jd
similarity index 86%
rename from docs/html/preview/tv/design/style.jd
rename to docs/html/design/tv/style.jd
index 67a7096..6e2704b 100644
--- a/docs/html/preview/tv/design/style.jd
+++ b/docs/html/design/tv/style.jd
@@ -1,5 +1,4 @@
page.title=Style for TV
-page.tags="design"
@jd:body
@@ -19,9 +18,10 @@
</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
+ <a href="{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support
+ library</a>. 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.
+ see the <a href="{@docRoot}training/tv/index.html">Building Apps for TV</a> training.
</p>
<p>Here are some additional recommendations for creating functional and attractive layouts for TV
@@ -33,8 +33,12 @@
<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>Use <a href="{@docRoot}guide/components/fragments.html">fragments</a> to create UIs that are
+ divided into sections, and use view groups like <a href=
+ "{@docRoot}guide/topics/ui/layout/gridview.html">Grid View</a> instead of <a href=
+ "{@docRoot}guide/topics/ui/layout/listview.html">List View</a> to make better use of the
+ horizontal screen space.
+ </li>
<li>Avoid a cluttered interface by adding sufficient margins between layout controls.</li>
</ul>
@@ -45,7 +49,7 @@
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}preview/tv/design/images/overscan.png" alt="Overscan borders for TV" />
+<img src="{@docRoot}design/tv/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
diff --git a/docs/html/preview/tv/design/index.jd b/docs/html/preview/tv/design/index.jd
deleted file mode 100644
index 58bfd5e..0000000
--- a/docs/html/preview/tv/design/index.jd
+++ /dev/null
@@ -1,70 +0,0 @@
-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>
-
-<p class="note">
- <strong>Important:</strong> There are specific requirements your app must meet in order to
- qualify as an Android TV app on Google Play. For more information, see the requirements listed
- in <a href="{@docRoot}preview/tv/publish/index.html">Publishing TV Apps</a>.
-</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" />
diff --git a/docs/html/training/tv/start/start.jd b/docs/html/training/tv/start/start.jd
index b50bc33..bebeedd 100644
--- a/docs/html/training/tv/start/start.jd
+++ b/docs/html/training/tv/start/start.jd
@@ -31,7 +31,7 @@
</p>
<p class="note">
- <strong>Important:</strong> There are specific requirements your app must meet in order to
+ <strong>Important:</strong> There are specific requirements your app must meet to
qualify as an Android TV app on Google Play. For more information, see the requirements listed
in <a href="{@docRoot}distribute/essentials/quality/tv.html">TV App Quality</a>.
</p>
