From c6aed4612827be0359d2022f6a38a0e5fce0609c Mon Sep 17 00:00:00 2001
From: Quddus Chong <quddusc@google.com>
Date: Mon, 10 Nov 2014 18:50:17 -0800
Subject: docs: Added developer docs for Android Auto 11/18 release.

Change-Id: I2e3a2010f3b40f81c56dde9f710284cd2332217c
---
 docs/html/design/auto/index.jd | 202 +++++++++++++++++++++++++++++++++++------
 1 file changed, 172 insertions(+), 30 deletions(-)

(limited to 'docs/html/design/auto')

diff --git a/docs/html/design/auto/index.jd b/docs/html/design/auto/index.jd
index c970cac..e45bd36 100644
--- a/docs/html/design/auto/index.jd
+++ b/docs/html/design/auto/index.jd
@@ -1,35 +1,177 @@
-page.title=Android Auto
+page.title=Designing for Auto
+page.tags="design","Auto"
 @jd:body
 
-<style>
-.auto-img-container-cols {
-  position:relative;
-  margin-bottom:25px;
-  margin-top:25px;
-}
-.auto-img-frame-cols {
-  z-index:2;
-  position:relative;
-}
-.auto-img-shot-cols {
-  position:absolute;
-  top:5px;
-  left:2px;
-  z-index:1;
-}
-</style>
-
-<div class="auto-img-container-cols" style="float:right; margin:0 0 40px 40px;width:460px">
-  <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png">
-  <img class="auto-img-shot-cols" src="/auto/images/assets/03_a_musict.png">
-</div>
-
-<p>Android Auto is <strong>coming soon</strong> and brings apps to the car,
-integrating with the vehicle's input controls and display.</p>
-
-<p>The future design guidelines provide templates that define the user interaction model for all apps and let you hook into a standard UI with touch and voice controls. The templates meet international best practices for reducing driver distraction while still letting you customize and brand them to properly deliver your content.</p>
-
-<p><a href="{@docRoot}auto/index.html">Learn more about Android Auto</a>.</p>
+<a class="notice-developers" href="{@docRoot}training/auto/index.html">
+  <div>
+    <h3>Developer Docs</h3>
+    <p>Building Apps for Auto</p>
+  </div>
+</a>
+
+<div class="sidebox-wrapper">
+<div class="sidebox">
+  <h2><strong>UI Guidelines</strong></h2>
+  <ul>
+  <li><a href="{@docRoot}shareables/auto/AndroidAuto-media-apps.pdf">
+    <strong>Auto Media Apps (PDF)</strong></a>
+  </li>
+  <li><a href="{@docRoot}shareables/auto/AndroidAuto-messaging-apps.pdf">
+    <strong>Auto Messaging Apps (PDF)</strong></a>
+  </li>
+  <li><a href="{@docRoot}shareables/auto/AndroidAuto-custom-colors.pdf">
+    <strong>Auto Color Customization (PDF)</strong></a>
+  </li>
+ </ul>
+</div>
+</div>
+
+<p>Android Auto provide a standardized user interface and user interaction
+model that works across vehicles. As a designer, you do not
+need to worry about vehicle-specific hardware differences. This page
+describes some of the key screens that users will encounter in the
+Auto user interface. To dive deeper into how to design for
+the Auto user interface (UI), see the Auto UI guidelines in the sidebar.</p>
+
+<p class="note"><strong>Important:</strong> Google takes driver distraction
+very seriously. There are specific design requirements your app must meet to
+qualify as an Auto app on Google Play. By adhering to these
+requirements, you can reduce the effort for building and testing your app. For
+more information, see <a href="{@docRoot}distribute/essentials/quality/auto.html">Auto App Quality</a>.</p>
+
+<br>
+
+<h2 id="overview-screen">Overview Screen</h2>
+
+<p>When users first connect their Android device to the car, they are presented
+with the Overview screen. This screen displays contextual cards based on the
+user’s location, time of day, and so on. The user can also use this screen to view
+notifications from their messaging apps and select a message to send a response
+by voice input.</p>
+
+<div class="auto-img-container-single">
+  <div class="auto-img-container">
+    <img src="{@docRoot}auto/images/ui/gearhead_overview.png" alt="Overview screen" />
+  </div>
+  <p class="img-caption" style="margin-top:0px">
+    <strong>Figure 1.</strong> The Overview screen may show contextual cards and
+new messages.
+  </p>
+</div>
+
+<h2 id="launchapp">Audio App Launcher</h2>
+
+<p>Tapping on the headphones icon in the Activity Bar lets the
+  user see all audio apps installed on the user’s handheld device and select
+  one of them from a scrollable list.</p>
+
+<div class="auto-img-container-single">
+  <div class="auto-img-container">
+    <img src="{@docRoot}auto/images/ui/gearhead_lens_switching.png" alt="Launcher" />
+  </div>
+  <p class="img-caption" style="margin-top:0px">
+    <strong>Figure 2.</strong> The audio app launcher shows available audio apps.
+  </p>
+</div>
+
+<h2>Primary App UI</h2>
+
+<p>After the user selects an audio app, the display shows the primary app UI.
+Auto presents the app in a standardized UI, but you can customize
+this UI to show your own icons, app name, and background images
+(such as the album art).</p>
+
+<div class="auto-img-container-single">
+  <div class="auto-img-container">
+    <img src="{@docRoot}auto/images/ui/gearhead_generic_UI.png" alt="Generic audio app UI" />
+  </div>
+  <p class="img-caption" style="margin-top:0px">
+    <strong>Figure 3.</strong> Generic audio app UI.
+  </p>
+</div>
+
+<div class="auto-img-container-single">
+  <div class="auto-img-container">
+    <img src="{@docRoot}auto/images/ui/gearhead_custom_UI.png" alt="Customized audio app UI" />
+  </div>
+  <p class="img-caption" style="margin-top:0px">
+    <strong>Figure 4.</strong> Example of the Google Play Music app UI.
+  </p>
+</div>
+
+<h3 id="useractions">User Actions</h3>
+
+<p>The media control card in the primary app UI supports up to four main actions,
+four auxiliary actions on the overflow bar, and the <em>Return</em> action. You can
+use standard controls and customize the actions and icons.</p>
+
+<div class="auto-img-container-single">
+  <div class="auto-img-container">
+    <img src="{@docRoot}auto/images/ui/gearhead_custom_user_actions.png" alt="Customized user actions" />
+  </div>
+  <p class="img-caption" style="margin-top:0px">
+    <strong>Figure 5.</strong> Example of user actions in the Google Play Music app.
+  </p>
+</div>
+
+<h3 id="drawerlist">Drawer List</h3>
+
+<p>For browse actions, the display shows the drawer transition. After the
+transition from the primary app UI to the list UI, the drawer appears in the
+center. The customized list UI shows the media containers and the audio files
+provided by the media service in your app. You can also customize drawers with
+icons for list items.</p>
+
+<div class="auto-img-container-single">
+  <div class="auto-img-container">
+    <img src="{@docRoot}auto/images/ui/gearhead_drawer_generic.png"
+    alt="Generic drawers" style="border:3px solid black" />
+  </div>
+  <p class="img-caption" style="margin-top:0px">
+    <strong>Figure 6.</strong> Example of the drawer layout template with generic list items.
+  </p>
+</div>
+
+<div class="auto-img-container-single">
+  <div class="auto-img-container">
+    <img src="{@docRoot}auto/images/ui/gearhead_drawers_customized.png"
+    alt="Customized drawers" style="border:3px solid black" />
+  </div>
+  <p class="img-caption" style="margin-top:0px">
+    <strong>Figure 7.</strong> Example of the the drawer layout in the Google Play Music app.
+  </p>
+</div>
+
+
+<h2 id="daynighttransitions">Day and Night Transitions</h2>
+
+<p>All the UIs support different color schemes for day and night. The platform
+provides the state (day or night) and makes adjustments automatically.</p>
+
+<div class="auto-img-container-single">
+  <div class="auto-img-container">
+    <img src="{@docRoot}auto/images/ui/gearhead_day.png" alt="Audio app in day mode" />
+  </div>
+  <p class="img-caption" style="margin-top:0px">
+    <strong>Figure 8.</strong> Example of the Google Play Music app in day mode.
+  </p>
+</div>
+
+<div class="auto-img-container-single">
+  <div class="auto-img-container">
+    <img src="{@docRoot}auto/images/ui/gearhead_night.png" alt="Audio app in night mode" />
+  </div>
+  <p class="img-caption" style="margin-top:0px">
+    <strong>Figure 9.</strong> Example of the Google Play Music app in night mode.
+  </p>
+</div>
+
+<h3 class="rel-resources clearfloat">Related resources</h3>
+
+<div class="resource-widget resource-flow-layout col-13" data-query=
+"collection:design/auto/auto_ui_guidelines"
+data-sortorder="-timestamp" data-cardsizes="6x3" data-maxresults="6">
+</div>
 
 
 
-- 
cgit v1.1