docs: Added developer docs for Android Auto 11/18 release.
Change-Id: I2e3a2010f3b40f81c56dde9f710284cd2332217c
diff --git a/docs/html/auto/images/assets/icons/auto_app_in_simulator.png b/docs/html/auto/images/assets/icons/auto_app_in_simulator.png
new file mode 100644
index 0000000..085b82b
--- /dev/null
+++ b/docs/html/auto/images/assets/icons/auto_app_in_simulator.png
Binary files differ
diff --git a/docs/html/auto/images/assets/icons/gp-auto-quality.png.png b/docs/html/auto/images/assets/icons/gp-auto-quality.png.png
new file mode 100644
index 0000000..483f418
--- /dev/null
+++ b/docs/html/auto/images/assets/icons/gp-auto-quality.png.png
Binary files differ
diff --git a/docs/html/auto/images/assets/icons/media_app_playback.png b/docs/html/auto/images/assets/icons/media_app_playback.png
new file mode 100644
index 0000000..3de04bf
--- /dev/null
+++ b/docs/html/auto/images/assets/icons/media_app_playback.png
Binary files differ
diff --git a/docs/html/auto/images/assets/icons/messaging_app_notifications.png b/docs/html/auto/images/assets/icons/messaging_app_notifications.png
new file mode 100644
index 0000000..3236fdf
--- /dev/null
+++ b/docs/html/auto/images/assets/icons/messaging_app_notifications.png
Binary files differ
diff --git a/docs/html/auto/images/assets/landing/01.gif b/docs/html/auto/images/assets/landing/01.gif
new file mode 100644
index 0000000..34c9fa8
--- /dev/null
+++ b/docs/html/auto/images/assets/landing/01.gif
Binary files differ
diff --git a/docs/html/auto/images/assets/landing/02.gif b/docs/html/auto/images/assets/landing/02.gif
new file mode 100644
index 0000000..d50e06b
--- /dev/null
+++ b/docs/html/auto/images/assets/landing/02.gif
Binary files differ
diff --git a/docs/html/auto/images/assets/landing/03.gif b/docs/html/auto/images/assets/landing/03.gif
new file mode 100644
index 0000000..79920210
--- /dev/null
+++ b/docs/html/auto/images/assets/landing/03.gif
Binary files differ
diff --git a/docs/html/auto/images/assets/landing/04.png b/docs/html/auto/images/assets/landing/04.png
new file mode 100644
index 0000000..a0e75f3
--- /dev/null
+++ b/docs/html/auto/images/assets/landing/04.png
Binary files differ
diff --git a/docs/html/auto/images/assets/landing/05.png b/docs/html/auto/images/assets/landing/05.png
new file mode 100644
index 0000000..f3d2ab8
--- /dev/null
+++ b/docs/html/auto/images/assets/landing/05.png
Binary files differ
diff --git a/docs/html/auto/images/assets/landing/06.png b/docs/html/auto/images/assets/landing/06.png
new file mode 100644
index 0000000..b19a6bb
--- /dev/null
+++ b/docs/html/auto/images/assets/landing/06.png
Binary files differ
diff --git a/docs/html/auto/images/assets/landing/07.png b/docs/html/auto/images/assets/landing/07.png
new file mode 100644
index 0000000..380e8da
--- /dev/null
+++ b/docs/html/auto/images/assets/landing/07.png
Binary files differ
diff --git a/docs/html/auto/images/assets/landing/08.png b/docs/html/auto/images/assets/landing/08.png
new file mode 100644
index 0000000..9889b39
--- /dev/null
+++ b/docs/html/auto/images/assets/landing/08.png
Binary files differ
diff --git a/docs/html/auto/images/assets/landing/FrameA.png b/docs/html/auto/images/assets/landing/FrameA.png
new file mode 100644
index 0000000..2a78380
--- /dev/null
+++ b/docs/html/auto/images/assets/landing/FrameA.png
Binary files differ
diff --git a/docs/html/auto/images/assets/landing/FrameB.png b/docs/html/auto/images/assets/landing/FrameB.png
new file mode 100644
index 0000000..cb7a3c4
--- /dev/null
+++ b/docs/html/auto/images/assets/landing/FrameB.png
Binary files differ
diff --git a/docs/html/auto/images/logos/apps/kik.png b/docs/html/auto/images/logos/apps/kik.png
new file mode 100644
index 0000000..056ef7e
--- /dev/null
+++ b/docs/html/auto/images/logos/apps/kik.png
Binary files differ
diff --git a/docs/html/auto/images/logos/apps/npr.png b/docs/html/auto/images/logos/apps/npr.png
new file mode 100644
index 0000000..5234201
--- /dev/null
+++ b/docs/html/auto/images/logos/apps/npr.png
Binary files differ
diff --git a/docs/html/auto/images/logos/apps/textplus.png b/docs/html/auto/images/logos/apps/textplus.png
new file mode 100644
index 0000000..2a640c4
--- /dev/null
+++ b/docs/html/auto/images/logos/apps/textplus.png
Binary files differ
diff --git a/docs/html/auto/images/logos/apps/whatsapp.png b/docs/html/auto/images/logos/apps/whatsapp.png
new file mode 100644
index 0000000..fb5866e
--- /dev/null
+++ b/docs/html/auto/images/logos/apps/whatsapp.png
Binary files differ
diff --git a/docs/html/auto/images/ui/gearhead_custom_UI.png b/docs/html/auto/images/ui/gearhead_custom_UI.png
new file mode 100644
index 0000000..345db12
--- /dev/null
+++ b/docs/html/auto/images/ui/gearhead_custom_UI.png
Binary files differ
diff --git a/docs/html/auto/images/ui/gearhead_custom_user_actions.png b/docs/html/auto/images/ui/gearhead_custom_user_actions.png
new file mode 100644
index 0000000..6cc0dcb
--- /dev/null
+++ b/docs/html/auto/images/ui/gearhead_custom_user_actions.png
Binary files differ
diff --git a/docs/html/auto/images/ui/gearhead_day.png b/docs/html/auto/images/ui/gearhead_day.png
new file mode 100644
index 0000000..81ead75
--- /dev/null
+++ b/docs/html/auto/images/ui/gearhead_day.png
Binary files differ
diff --git a/docs/html/auto/images/ui/gearhead_drawer_generic.png b/docs/html/auto/images/ui/gearhead_drawer_generic.png
new file mode 100644
index 0000000..d203aed
--- /dev/null
+++ b/docs/html/auto/images/ui/gearhead_drawer_generic.png
Binary files differ
diff --git a/docs/html/auto/images/ui/gearhead_drawers_customized.png b/docs/html/auto/images/ui/gearhead_drawers_customized.png
new file mode 100644
index 0000000..44915b5
--- /dev/null
+++ b/docs/html/auto/images/ui/gearhead_drawers_customized.png
Binary files differ
diff --git a/docs/html/auto/images/ui/gearhead_generic_UI.png b/docs/html/auto/images/ui/gearhead_generic_UI.png
new file mode 100644
index 0000000..beb0701
--- /dev/null
+++ b/docs/html/auto/images/ui/gearhead_generic_UI.png
Binary files differ
diff --git a/docs/html/auto/images/ui/gearhead_lens_switching.png b/docs/html/auto/images/ui/gearhead_lens_switching.png
new file mode 100644
index 0000000..9dbfe6c
--- /dev/null
+++ b/docs/html/auto/images/ui/gearhead_lens_switching.png
Binary files differ
diff --git a/docs/html/auto/images/ui/gearhead_night.png b/docs/html/auto/images/ui/gearhead_night.png
new file mode 100644
index 0000000..3f8c593
--- /dev/null
+++ b/docs/html/auto/images/ui/gearhead_night.png
Binary files differ
diff --git a/docs/html/auto/images/ui/gearhead_overview.png b/docs/html/auto/images/ui/gearhead_overview.png
new file mode 100644
index 0000000..4332ddf3
--- /dev/null
+++ b/docs/html/auto/images/ui/gearhead_overview.png
Binary files differ
diff --git a/docs/html/auto/index.jd b/docs/html/auto/index.jd
index 63ac287..ddb265b 100644
--- a/docs/html/auto/index.jd
+++ b/docs/html/auto/index.jd
@@ -77,17 +77,20 @@
<div class="col-10">
<div class="landing-section-header">
<div class="landing-h1 hero">Android Auto</div>
- <div class="landing-subhead hero">Entertainment and services on your dashboard</div>
+ <div class="landing-subhead hero">Audio entertainment and
+ messaging services in the car</div>
<div class="landing-hero-description">
- <p style="width:450px">Display and control your Android app in vehicles.
- Integrate your content with easy-to-use APIs and let Android Auto take
- care of the rest.</p>
+ <p style="width:450px">Let drivers listen to and control
+ content in your music and other audio apps. Allow drivers to
+ hear and respond to your messaging service via the
+ car's controls and screen.</p>
</div>
<div class="landing-body">
- <a href="{@docRoot}auto/overview.html" class="landing-button landing-primary"
+ <a href="{@docRoot}training/auto/index.html"
+ class="landing-button landing-primary"
style="margin-top:40px;">
- Developer Overview
+ Get Started
</a>
</div>
</div>
@@ -103,149 +106,114 @@
</div> <!-- end .landing-section .landing-hero -->
</div> <!-- end .landing-hero-container -->
- <div class="landing-rest-of-page">
+ <div class="landing-rest-of-page">
- <div class="landing-section landing-gray-background" id="android-in-car">
- <div class="wrap">
- <div class="landing-section-h1">
- <div class="landing-h1">Extending Android to Cars</div>
- </div>
- <div class="landing-body">
- <div class="landing-subhead">Android Auto brings the Android experience to
- cars with apps like Google Now and Maps.</div>
- <div class="cols">
- <div class="col-8">
- <div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/01_b_now.png" />
- </div>
- </div>
- <div class="col-8">
- <div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/01_a_maps.png" />
- </div>
+ <div class="landing-section landing-gray-background" id="android-in-car">
+ <div class="wrap">
+ <div class="landing-section-h1">
+ <div class="landing-h1">Extending Android to Cars</div>
+ <div class="landing-subhead">Android Auto brings the Android
+ platform into the car with a user interface that's optimized for driving.</div>
+ </div>
+
+ <div class="landing-body">
+ <div class="cols">
+ <div class="col-8">
+ <div class="auto-img-container-cols">
+ <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
+ <img class="auto-img-shot-cols" src="/auto/images/assets/landing/01.gif" />
</div>
</div>
-
- <p>When users connect their Android phones to compatible vehicles, Android Auto
- shows a standard interface that lets them start enabled apps and services.
- Android Auto locks the handheld device when connected, so drivers
- interact with Auto by using the vehicle's input controls, touch display, and voice.</p>
- </p>
+ <div class="col-8">
+ <div class="auto-img-container-cols">
+ <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
+ <img class="auto-img-shot-cols" src="/auto/images/assets/landing/02.gif" />
+ </div>
+ </div>
</div>
- </div> <!-- end .wrap -->
- </div> <!-- end .landing-section -->
+ <p>Before you start building, check out the
+ <a href="http://youtu.be/ctiaVxgclsg" class="external-link">Introduction to Android Auto</a> video to understand how
+ users see and interact with your app in Android Auto.
+ </p>
+ </div>
+ </div> <!-- end .wrap -->
+ </div> <!-- end .landing-section -->
-
- <div class="landing-section">
+ <div class="landing-section">
<div class="wrap">
<div class="landing-section-header">
<div class="landing-h1">Build for One Platform</div>
- <div class="landing-subhead">Create apps with the Android APIs you're familiar with
- and extend them to cars with the Auto SDK.
+ <div class="landing-subhead">Create apps with the Android APIs
+ you’re familiar with and extend them to cars.
</div>
</div>
<div class="landing-body">
-
- <div class="cols">
- <div class="col-8">
- <div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/02_b_switcher.gif" />
- </div>
- </div>
- <div class="col-8">
- <div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/02_a_notif.gif" />
- </div>
- </div>
- </div>
- <p>Write your apps without having
- to worry about vehicle-specific hardware differences like screen resolution, software
- interfaces, knobs, and touch controls. Your users get the same experience on any compatible
- vehicle such as a consistent app launcher and system events such as notifications.</p>
- </div>
- </div> <!-- end .wrap -->
- </div> <!-- end .landing-section -->
-
-
- <div class="landing-section landing-gray-background">
- <div class="wrap">
- <div class="landing-section-header">
- <div class="landing-h1">Minimize Distraction</div>
- <div class="landing-subhead">
- Android Auto displays different UIs for several app categories that let users focus on the road.
- </div>
- </div>
- <div class="landing-body">
<div class="cols">
<div class="col-8">
<div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/03_b_voice.gif" />
+ <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
+ <img class="auto-img-shot-cols" src="/auto/images/assets/landing/05.png" />
</div>
</div>
<div class="col-8">
<div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/03_a_musict.png" />
+ <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
+ <img class="auto-img-shot-cols" src="/auto/images/assets/landing/06.png" />
</div>
</div>
</div>
- <p>Android Auto defines the user interaction model for all
- apps and let you hook into a standard UI with touch and voice controls. The interface
- is designed to reduce driver distraction while still letting you customize and brand them to properly deliver your content.
- </p>
+ <p>Write your apps without having to worry about vehicle-specific
+ hardware differences like screen resolution, software interfaces,
+ knobs, and touch controls. Your users get the same experience on any
+ compatible vehicle such as a consistent app launcher and system
+ events such as notifications.</p>
</div>
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
- <div class="landing-section" style="background-color:#f5f5f5">
+ <div class="landing-section" style="background-color:#f5f5f5" id="developing-for-auto">
<div class="wrap">
<div class="landing-section-header">
- <div class="landing-pre-h1">Coming soon</div>
- <div class="landing-h1">Android Auto SDK</div>
+ <div class="landing-pre-h1">Now Available</div>
+ <div class="landing-h1">Developing for Android Auto</div>
+ <div class="landing-subhead">The APIs for building Auto-enabled apps
+ are available now! When connected to compatible vehicles, apps on
+ handheld devices running Android 5.0 or higher can communicate
+ with Android Auto.</div>
</div>
<div class="landing-body">
- <p>In the coming months, we’ll be releasing the Android Auto SDK, which includes APIs
- and tools to make your existing apps compatible with Android Auto. The first version
- of the SDK will provide APIs for music, podcast, live radio, and audio
- news apps, as well as limited voice actions.</p>
-
- <div class="cols" style="margin-top:40px">
- <div class="col-3-wide">
- <p class="sdk-link-title">Updates</p>
- <p class="sdk-link-desc">
- Register to receive more information and be notified when the SDK is available.
+ <div class="cols">
+ <div class="col-8">
+ <div class="auto-img-container-cols">
+ <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
+ <img class="auto-img-shot-cols" src="/auto/images/assets/landing/03.gif" />
+ </div>
+ <div class="landing-h3">Play Music on the Road from Your App</div>
+ <p class="landing-small" style="padding-left:0px; padding-top:15px;">
+ Extend audio apps such as music, radio, and audiobook players
+ into the car. Build apps that let users browse and play their
+ music in the car.<br><a href="{@docRoot}training/auto/audio/index.html">Learn how to build audio apps</a>
</p>
- <a class="sdk-link" href="https://docs.google.com/a/google.com/forms/d/1ANgYOoYLkfyZ2JRPSU34Nep5yNaU-Ha2syXJ9b4xLrA/viewform">Sign up for updates</a>
</div>
- <div class="col-3-wide">
- <p class="sdk-link-title">Google+ Community</p>
- <p class="sdk-link-desc">
- Stay involved, get updates, and exchange experiences with other developers.
+ <div class="col-8">
+ <div class="auto-img-container-cols">
+ <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
+ <img class="auto-img-shot-cols" src="/auto/images/assets/landing/04.png" />
+ </div>
+ <div class="landing-h3">Keep Users Connected with In-Vehicle Messaging</div>
+ <p class="landing-small" style="padding-left:0px; padding-top:15px;">
+ Create messaging apps that receive incoming notifications,
+ read messages via text-to-speech, and let users reply by voice
+ input in the car.<br><a href="{@docRoot}training/auto/messaging/index.html">Learn how to build messaging apps</a>
</p>
- <a class="sdk-link" href="http://g.co/androidautodev">Discuss on Google+</a>
- </div>
- <div class="col-3-wide">
- <p class="sdk-link-title">Developer Overview</p>
- <p class="sdk-link-desc">
- Learn more about developing apps for Android Auto when the SDK is available.
- </p>
- <a class="sdk-link" href="{@docRoot}auto/overview.html">Learn about the platform</a>
</div>
</div>
</div>
-
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
-
-
<div class="landing-section landing-gray-background" >
<div class="wrap">
<div class="landing-section-header">
@@ -257,6 +225,25 @@
<div class="cols">
<div class="col-4">
+ <img src="/auto/images/logos/apps/kik.png"
+ width="120" height="120" class="img-logo" style="margin-top:20px"/>
+ </div>
+ <div class="col-4">
+ <img src="/auto/images/logos/apps/textplus.png"
+ width="120" height="24" class="img-logo" style="margin-top:70px" />
+ </div>
+ <div class="col-4">
+ <img src="/auto/images/logos/apps/iheartradio.png"
+ width="160" height="160" class="img-logo" />
+ </div>
+ <div class="col-4">
+ <img src="/auto/images/logos/apps/spotify.png"
+ width="160" height="160" class="img-logo" />
+ </div>
+ </div>
+ <div class="cols">
+
+ <div class="col-4">
<img src="{@docRoot}auto/images/logos/apps/joyride.png"
width="160" height="160" class="img-logo" />
</div>
@@ -293,22 +280,31 @@
</div>
<div class="cols" style="margin-top:40px">
<div class="col-4">
- <img src="{@docRoot}auto/images/logos/apps/iheartradio.png"
- width="160" height="160" class="img-logo" />
+ <img src="/auto/images/logos/apps/whatsapp.png"
+ width="120" height="120" class="img-logo" />
</div>
- <div class="col-12">
+ <div class="col-8">
<p><em>
- "The Android Auto APIs provide an easy way to integrate the most important features and functionality of iHeartRadio’s robust music service into a safety-minded automotive infotainment solution. The process was seamless, utilizing a flexible construct that allowed us to quickly adapt our existing product without losing any of the core experience our listeners know and love."</em></p>
+ "We were able to get messaging functionality for text
+ implemented easily on Android Auto, with minimal development
+ effort. We're excited to participate in Android Auto which
+ provides a notification interface for the car that is both
+ user-friendly and highly safety-minded."</em></p>
</div>
</div>
<div class="cols" style="margin-top:60px">
<div class="col-4">
- <img src="{@docRoot}auto/images/logos/apps/spotify.png"
- width="160" height="160" class="img-logo" />
+ <img src="/auto/images/logos/apps/npr.png"
+ width="100" height="128" class="img-logo" />
</div>
- <div class="col-12"><p style="margin-top:20px"><em>
- "Android Auto offers Spotify the exciting opportunity to easily enable safe access to millions of songs while driving. We were able to quickly develop for the platform using the new Android voice and media API extensions. As a result, Android users will soon be able to continue the Spotify experience in their cars, including being able to play any song, artist, album or playlist by voice.</em></p>
+ <div class="col-8"><p style="margin-top:0px"><em>
+ "Android Auto connects NPR One listeners to a personalized stream
+ of public radio news and stories to catch up on in the car. It's
+ an engaging and driver-safe user experience that was developed
+ using the media APIs provided in Android 5.0. The available
+ development tools made the integration and testing process simple
+ for launching in a short period of time."</em></p>
</div>
</div>
</div>
@@ -316,8 +312,6 @@
</div> <!-- end .landing-section -->
-
-
<div class="landing-section landing-white-background">
<div class="wrap">
<div class="landing-section-header">
@@ -456,24 +450,47 @@
</div>
</div>
</div>
- </div> <!-- end .landing-rest-of-page -->
- <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement"
- style="border-top: none;">
- <div class="layout-content-col col-16" style="padding-top:4px">
- <style>#___plusone_0 {float:right !important;}</style>
- <div class="g-plusone" data-size="medium"></div>
+
+ <div class="landing-section landing-red-background">
+ <div class="wrap">
+ <div class="landing-section-header">
+ <div class="landing-h1 landing-align-left">Get Started with Android Auto</div>
+
+ <div class="landing-subhead landing-subhead-red">
+ <p>
+ Set up your development environment and start working with the APIs.
+ We’re excited about the experiences you'll create and can't
+ wait to see what you do next.</p>
+ </div>
+ </div>
+ <div class="landing-body">
+ <a href="{@docRoot}training/auto/index.html"
+ class="landing-button landing-primary" style="margin-top: 20px;">
+ Get Started
+ </a>
+ </div>
+ </div>
</div>
+ </div>
+ <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement"
+ style="border-top: none;">
+
+ <div class="layout-content-col col-16" style="padding-top:4px">
+ <style>#___plusone_0 {float:right !important;}</style>
+ <div class="g-plusone" data-size="medium"></div>
</div>
- <div id="footer" class="wrap" style="width:940px;position:relative;top:-35px;z-index:-1">
- <div id="copyright">
+ </div>
+
+ <div id="footer" class="wrap" style="width:940px;position:relative;top:-35px;z-index:-1">
+ <div id="copyright">
Except as noted, this content is
licensed under <a href="http://creativecommons.org/licenses/by/2.5/">
Creative Commons Attribution 2.5</a>. For details and
restrictions, see the <a href="{@docRoot}license.html">Content
License</a>.
- </div>
</div>
- </div> <!-- end .landing-hero-container -->
+ </div>
+</div> <!-- end .landing-hero-container -->
<script>
$("a.landing-down-arrow").on("click", function(e) {
diff --git a/docs/html/auto/overview.jd b/docs/html/auto/overview.jd
deleted file mode 100644
index ae1efec..0000000
--- a/docs/html/auto/overview.jd
+++ /dev/null
@@ -1,411 +0,0 @@
-fullpage=true
-page.viewport_width=970
-no_footer_links=true
-excludeFromSuggestions=true
-page.metaDescription=Android Auto
-
-@jd:body
-
-<style>
-.jd-descr {
- height:auto;
-}
-#copyright {
- margin-top:-35px;
-}
-.auto-img-container {
- position:relative;
-}
-.auto-img-frame {
- z-index:2;
- position:relative;
-}
-.auto-img-shot {
- position:absolute;
- top:9px;
- left:8px;
- z-index:1;
-}
-.auto-img-container-cols {
- position:relative;
- margin-top:10px;
-}
-.auto-img-frame-cols {
- width:380px;
- z-index:2;
- position:relative;
-}
-.auto-img-shot-cols {
- width:369px;
- position:absolute;
- top:7px;
- left:6px;
- z-index:1;
-}
-.auto-col-2 {
- width:380px;
- display: inline;
- float: left;
- margin-left: 10px;
- margin-right: 10px;
-}
-.auto-img-container-single {
- width:380px;
- margin:0 auto;
- margin-top:20px;
-}
-</style>
-
-<div style="width:780px; margin:0 auto;">
-
-<div id="qv-wrapper">
-<div id="qv">
-<h2>In this document</h2>
-<ol>
- <li><a href="#design">Design</a>
- <ol>
- <li><a href="#designprinciples">Design Principles</a></li>
- <li><a href="#uioverview">UI Overview</a></li>
- </ol>
- </li>
- <li><a href="#architecture">Architecture</a></li>
- <li><a href="#ui">User Interface</a>
- <ol>
- <li><a href="#launchapp">Launch App</a></li>
- <li><a href="#useractions">User Actions</a></li>
- <li><a href="#drawertransitions">Drawer Transitions</a></li>
- <li><a href="#daynighttransitions">Day and Night Transitions</a></li>
- <li><a href="#customizeui">Customizing the UI</a></li>
- </ol>
- </li>
- <li><a href="#devprocess">Development Process</a></li>
- <li><a href="#emulator">Testing Your App</a></li>
- <li><a href="#running">Running Your App</a></li>
-</ol>
-</div>
-</div>
-
-<h1>Android Auto Developer Overview</h1>
-
-<p>Android Auto extends the Android platform into the car. When users connect
-their Android handheld device to a compatible vehicle, Android Auto provides a car-optimized
-Android experience on the vehicle's screen. Users interact with compatible apps and services
-through voice actions and the vehicle's input controls.</p>
-
-<p>The Android Auto SDK lets you easily extend your existing apps to work in the car, without
-having to worry about vehicle-specific hardware differences. You can use many Android APIs and
-services you are already familiar with. Android Auto provides an easy to use UI model and
-supports notifications and voice actions:</p>
-
-<dl>
-<dt style="margin-bottom:10px"><strong>Media UI</strong></dt>
-<dd style="margin-bottom:20px">
-Android Auto defines interaction models and car-specific UI patterns for apps. The
-first version of Android Auto supports media apps, such as music, podcast, live radio, and
-audio news apps.
-</dd>
-<dt style="margin-bottom:10px"><strong>Notifications</strong></dt>
-<dd style="margin-bottom:20px">
-The platform will integrate with existing Android APIs for notifications. Users will get
-car appropiate notifications from Android apps on the vehicle's screen.</dd>
-
-<dt style="margin-bottom:10px"><strong>Voice Actions</strong></dt>
-<dd style="margin-bottom:20px">
-Android Auto supports a set of voice actions to interact with compatible apps and services.
-Apps can respond to the voice actions they're interested in, such as playing a particular song
-or taking a note.</dd>
-
-<dt style="margin-bottom:10px"><strong>Easy Development Workflow</strong></dt>
-<dd style="margin-bottom:20px">
-To extend an existing Android app for Android Auto, you implement a set of interfaces and
-services defined in the platform. You can reuse existing functionality and many Android APIs
-you already know.</dd>
-</dl>
-
-<p>We’ll release the Android Auto SDK in the coming months, which will let you test your
-Android Auto experience on a regular Android device.</p>
-
-
-<h2 id="design">Design</h2>
-
-<p>Android Auto extends users' digital ecosystem into their cars, allowing drivers to stay
-connected to their virtual worlds while staying focused on the road ahead.</p>
-
-<p>Because driving is the primary activity in the car, any digital experiences should be designed
-to complement and augment that activity. They should never demand the user's attention.</p>
-
-<p>Designing for cars is fundamentally different than designing for phones or tablets, and
-requires rethinking how experiences unfold. Because attention is limited and not all tasks are
-possible in the car, effective apps leverage the entire set of devices that drivers have,
-leveraging the app experience on those devices, outside of the car, to set the stage for simple
-experiences while driving.</p>
-
-<p>Android Auto experiences are:</p>
-
-<p><strong>Glanceable and simple</strong>. Driving requires users' full attention. In-car software
-should not. Android Auto was designed to simplify not only the UI, but to optimize interactions
-and require less thinking, induce lower cognitive load, and ultimately, be safer. Effective apps
-provide just enough information in the minimum amount of time the user needs to glance at it and
-return their attention back to the road. Apps should also reduce the number of features to only
-those that are safe and drive-appropriate.</p>
-
-<p><strong>Predictive, yet predictable</strong>. Android Auto leverages rich, contextual awareness
-to keep the driver informed about important situations during the drive. Rich, timely help is
-combined with predictable functions. Effective apps make use of the patterns for common tasks and
-show timely information only when relevant.</p>
-
-<p><strong>Connected</strong>. By leveraging the user's personal ecosystem of apps and services,
-Android Auto promotes a continuous experience from phone to car to other devices. The user's
-music, destinations, and virtual ecosystem are always available to augment the drive. Experiences
-that leverage personal context and other devices are naturally part of Android Auto.</p>
-
-<p><strong>Naturally integrated</strong>. Android Auto blends the user's apps with the car,
-creating a truly integrated experience that leverages what is unique about each car. By using
-the screens, controls, and capabilities of the vehicle, Android Auto feels like an extension of
-the car.</p>
-
-
-
-
-<h2 id="architecture">Architecture</h2>
-
-<p>The Android Auto app shows your app's customized UI on the vehicle's screen. To communicate
-with the Android Auto app, your media app implements a set of media interfaces.</p>
-
-<div style="width:750px;margin:0 auto">
-<img src="{@docRoot}auto/images/figure01.png" alt="" />
-<p class="img-caption">
- <strong>Figure 1</strong> - Architecture of Android Auto.
-</p>
-</div>
-
-<p>The architecture consists of the following components:</p>
-
-<p><strong>Media App</strong> - Runs a media service that exposes content through browsing and
-playback APIs. The service provides content to the Android Auto app. This is your Android app.</p>
-
-<p><strong>Android Auto App</strong> - Creates the UI and handles user interactions.
-This app uses a media client to request content from the media service running in the media
-app. The client requests data from the media service and monitors service states.</p>
-
-<p><strong>Vehicle Display</strong> - Shows app content and supports user interaction via
-on-screen soft buttons and other components, such as physical buttons or steering
-wheel controls.</p>
-
-<p>Android media apps must implement binders to these APIs:</p>
-
-<ul>
-<li><strong>Browsing</strong> - Enables a media client to browse a hierarchy of a user’s
-media collection, presented as a virtual file system with containers (similar to directories)
-and items (similar to files).</li>
-<li><strong>Playback</strong> - Enables a media client to control media playback and monitor
-playback state through callbacks.</li>
-</ul>
-
-
-<h2 id="ui">User Interface</h2>
-
-<p>The Android Auto app uses a car-specific UI model to display content and user interaction
-opportunities. Android Auto provides you with a standard UI designed to minimize driver
-distraction. You do not have to test a custom UI for driver distraction, which is a
-lengthy and expensive process involving multiple legislations across the globe and different
-standards for each vehicle OEM.</p>
-
-<p>The UI defines interfaces for browsing, searching, and listening to content from
-media apps. You can customize the UI colors, action icons, background images, and more.</p>
-
-<h3 id="launchapp">Launcher</h3>
-
-<p>The launcher shows all the compatible media apps installed on the user’s
-Android device and lets users select one of them from a scrollable list:</p>
-
-<div class="auto-img-container-single">
- <div class="auto-img-container">
- <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="/auto/images/assets/do_01_switcher.png" />
- </div>
- <p class="img-caption" style="margin-top:0px">
- <strong>Figure 2.</strong> The launcher.
- </p>
-</div>
-
-<h3>Primary App UI</h3>
-
-<p>After the user selects a media app, the display shows the primary app UI.
-You can customize this UI to show your own icons, app name, and
-background images. Figure 3 shows an example of a customized UI:</p>
-
-<div class="cols">
-<div class="auto-col-2">
- <div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_05_template.png" />
- </div>
-</div>
-<div class="auto-col-2">
- <div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_02_music.png" />
- </div>
-</div>
-</div>
-<p class="img-caption">
- <strong>Figure 3.</strong> A customized UI.
-</p>
-
-
-
-<h3 id="useractions">User Actions</h3>
-
-<p>The primary app UI supports four main actions on the action bar, four auxiliary actions
-on the overflow bar, and the <em>Return</em> action. You can use standard controls and customize
-the actions and icons, as shown in Figure 4.</p>
-
-<div class="auto-img-container-single">
- <div class="auto-img-container">
- <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="/auto/images/assets/do_03_more.png" />
- </div>
- <p class="img-caption" style="margin-top:0px">
- <strong>Figure 4.</strong> Custom extra actions.
- </p>
-</div>
-
-<h3 id="drawertransitions">Drawer Transitions</h3>
-
-<p>For browse actions, the display shows the drawer transition as shown in Figure 5.</p>
-
-<div class="cols">
-<div class="auto-col-2">
- <div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_06_gdrawer.png" />
- </div>
-</div>
-<div class="auto-col-2">
- <div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_04_mdrawer.png" />
- </div>
-</div>
-</div>
-<p class="img-caption">
- <strong>Figure 5.</strong> Generic and customized drawers.
-</p>
-
-<p>After the transition from the primary app UI to the drawer UI, the drawer
-appears on the center. The customized drawer UI shows the media containers and
-media files provided by the media service in your app. You can also customize drawers
-with icons for list items.</p>
-
-
-<h3 id="daynighttransitions">Day and Night Transitions</h3>
-
-<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="cols">
-<div class="auto-col-2">
- <div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_02_music.png" />
- </div>
-</div>
-<div class="auto-col-2">
- <div class="auto-img-container-cols">
- <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
- <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_02_music_night.png" />
- </div>
-</div>
-</div>
-<p class="img-caption">
- <strong>Figure 6.</strong> Day and night modes.
-</p>
-
-<h3 id="customizeui">Customizing UIs</h3>
-
-<p>To customize the UI, you provide the following app-specific resources and actions
-to the Android Auto media client:</p>
-
-<ul>
-<li><strong>Resources</strong> - App logo, app name, theme colors, and background images.</li>
-<li><strong>Actions</strong> - Multiple custom actions; for example: <em>Thumbs Up/Down</em>,
-<em>Favorite</em>, and <em>Bookmark</em>. These actions are app-specific.</li>
-</ul>
-
-<p>If provided, the media client automatically uses them in the UI.</p>
-
-
-<h2 id="devprocess">Development Process</h2>
-
-<p class="note"><strong>Note:</strong> When released, the Android Auto SDK will provide
-media service interfaces, an APK for handheld devices that simulates the Android Auto
-app, and other tools for Android Auto development.</p>
-
-<p>To create a media app for Android Auto, you include an Android service in your app
-that implements the media service interfaces provided by the Android Auto SDK. These
-interfaces define functionality for browsing and finding content, playing media,
-customizing the UI, and performing app-specific actions.</p>
-
-<p>The media service interfaces present the content library as a navigable tree and enable
-clients to play media, get album art, obtain theme resources for the UI, and
-invoke app-specific actions.</p>
-
-<p>You don’t have to create a new app for Android Auto: you can extend your existing
-Android app with implementations of the media service interfaces. Your service exposes
-your app’s media content, theme resources, and app-specific actions using the methods and
-data types specified by the media service interfaces. This simplifies the development
-cycle because:</p>
-
-<ul>
-<li>You do not have to maintain a separate project for Android Auto</li>
-<li>You can reuse existing functionality from your Android app</li>
-</ul>
-
-<p>The Android Auto client presents the customized UI to users and invokes the
-functionality from your service as needed. This has two additional advantages:</p>
-
-<ul>
-<li>Your app does not implement a UI for Android Auto</li>
-<li>Your app does not manage user interactions directly</li>
-</ul>
-
-<p>This also means that you do not have to worry about vehicle-specific hardware
-differences such as screen resolutions, software interfaces, knobs and touch
-controls.</p>
-
-
-<h2 id="emulator">Testing Your App on an Android Device</h2>
-
-<p>The Android Auto SDK includes an APK with a media client implementation, which is
-similar to those available in compatible vehicles. To test your app with this
-client:</p>
-
-<ol>
-<li>Get an Android device with a similar form factor to a dashboard screen (like a
-Nexus 7).</li>
-<li>Configure the device for Android development.</li>
-<li>Install the APK for the media client from the Android Auto SDK on the device.</li>
-<li>Install the APK for your app on the device.</li>
-<li>Open the media client app from the Android Auto SDK on the device.</li>
-<li>Select your app from the list of available services.</li>
-</ol>
-
-<p>The customized UI for your app appears on the client. You can navigate the content
-library and play media. If your app provides app-specific actions, these actions appear
-in the UI controls.</p>
-
-
-<h2 id="running">Running Your App on Android Auto</h2>
-
-<p>Media apps are available on the Google Play Store for compatible Android devices.
-When users connect their Android device to a compatible vehicle, the
-Android Auto media client shows a list of all the Android apps installed on the phone
-that implement the media service interfaces.</p>
-
-<p>When users select one of these apps, the Android Auto media client uses the app’s
-service to respond to user input and invoke the methods in the media service interfaces
-to build the UI, navigate the content library, and play media.</p>
-
-<div style="margin-bottom:40px"> </div>
-</div>
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>
+<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="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 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 is <strong>coming soon</strong> and brings apps to the car,
-integrating with the vehicle's input controls and display.</p>
+<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>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 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>
-<p><a href="{@docRoot}auto/index.html">Learn more about Android Auto</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>
diff --git a/docs/html/jd_collections.js b/docs/html/jd_collections.js
index 5f5a5e1..a843350 100644
--- a/docs/html/jd_collections.js
+++ b/docs/html/jd_collections.js
@@ -794,6 +794,14 @@
"shareables/distribute/play_dev_guide_secrets_en.pdf"
]
},
+ "design/auto/auto_ui_guidelines": {
+ "title": "",
+ "resources": [
+ "shareables/auto/AndroidAuto-media-apps.pdf",
+ "shareables/auto/AndroidAuto-messaging-apps.pdf",
+ "shareables/auto/AndroidAuto-custom-colors.pdf"
+ ]
+ },
"distribute/stories/games": {
"title": "",
"resources": [
diff --git a/docs/html/jd_extras.js b/docs/html/jd_extras.js
index 36f26e8..a86ffeb 100644
--- a/docs/html/jd_extras.js
+++ b/docs/html/jd_extras.js
@@ -1407,5 +1407,44 @@
"keywords": ["distribute"],
"type": "PDF DOWNLOAD (11MB)",
"titleFriendly": ""
+ },
+ {
+ "lang": "en",
+ "group": "",
+ "tags": [],
+ "url": "shareables/auto/AndroidAuto-media-apps.pdf",
+ "timestamp": null,
+ "image": "auto/images/assets/icons/media_app_playback.png",
+ "title": "Android Auto Media Apps UI Guidelines",
+ "summary": "Guidelines for designing audio apps that work with Auto. ",
+ "keywords": ["design", "Auto", "Automotive"],
+ "type": "PDF DOWNLOAD (1.1MB)",
+ "titleFriendly": ""
+ },
+ {
+ "lang": "en",
+ "group": "",
+ "tags": [],
+ "url": "shareables/auto/AndroidAuto-messaging-apps.pdf",
+ "timestamp": null,
+ "image": "auto/images/assets/icons/messaging_app_notifications.png",
+ "title": "Android Auto Messaging Apps UI Guidelines",
+ "summary": "Guidelines for designing messaging apps that work with Auto. ",
+ "keywords": ["design", "Auto", "Automotive"],
+ "type": "PDF DOWNLOAD (628KB)",
+ "titleFriendly": ""
+ },
+ {
+ "lang": "en",
+ "group": "",
+ "tags": [],
+ "url": "shareables/auto/AndroidAuto-custom-colors.pdf",
+ "timestamp": null,
+ "image": "auto/images/assets/icons/auto_app_in_simulator.png",
+ "title": "Android Auto Color Customization UI Guidelines",
+ "summary": "Guidelines for color-customizing apps that work with Auto. ",
+ "keywords": ["design", "Auto", "Automotive"],
+ "type": "PDF DOWNLOAD (779KB)",
+ "titleFriendly": ""
}
-]);
+]);
\ No newline at end of file
diff --git a/docs/html/training/auto/index.jd b/docs/html/training/auto/index.jd
new file mode 100644
index 0000000..26eee32
--- /dev/null
+++ b/docs/html/training/auto/index.jd
@@ -0,0 +1,9 @@
+page.title=Building Apps for Auto
+page.trainingcourse=true
+page.metaDescription=Starting point for building apps for Auto, with guidelines, information, and examples.
+page.image=design/tv/images/focus.png
+@jd:body
+
+
+
+<p>These classes teach you how to build and extend apps to work with Auto devices.</p>
\ No newline at end of file
diff --git a/docs/html/training/auto/start/index.jd b/docs/html/training/auto/start/index.jd
new file mode 100644
index 0000000..b955cef
--- /dev/null
+++ b/docs/html/training/auto/start/index.jd
@@ -0,0 +1,210 @@
+page.title=Getting Started with Auto
+page.tags="auto", "car", "automotive"
+page.article=true
+page.image=auto/images/assets/icons/auto_app_in_simulator.png
+
+@jd:body
+
+<div id="tb-wrapper">
+<div id="tb">
+ <h2>Dependencies and Prerequisites</h2>
+ <ul>
+ <li>Android 5.0 (API level 21) or higher</li>
+ </ul>
+
+ <h2>This class teaches you how to</h2>
+ <ol>
+ <li><a href="#dev-project">Set Up an Auto Project</a></li>
+ <li><a href="#build-it">Build Auto Apps</a></li>
+ <li><a href="#test-it">Run and Test Auto Apps</a></li>
+ </ol>
+
+ <h2>You should also read</h2>
+ <ul>
+ <li><a href="{@docRoot}design/auto/index.html">Designing for Auto</a></li>
+ <li><a href="{@docRoot}training/auto/audio/index.html">Providing Audio Playback with Auto</a></li>
+ <li><a href="{@docRoot}training/auto/messaging/index.html">Providing Messaging for Auto</a></li>
+ </ul>
+</div>
+</div>
+
+<p>Android Auto extends the Android platform into the car. When users connect
+their handheld devices running Android 5.0 or higher to a compatible vehicle,
+the Auto user interface provides a car-optimized Android experience on the
+vehicle's screen. Users interact with compatible apps and services through
+voice actions and the vehicle's input controls (like a touchscreen or dashboard
+buttons).</p>
+
+<p>Auto currently supports two types of apps:</p>
+
+<ul>
+<li><em>Audio apps</em> that allow users to browse and play music and spoken
+audio content in the car.</li>
+<li><em>Messaging apps</em> that receive incoming notifications, read messages
+ aloud via text-to-speech, and send replies via voice input in the car.</li>
+</ul>
+
+<p>You can enable your existing audio and messaging apps developed for
+phones and tablets to work in the car, without having to worry about
+vehicle-specific hardware differences. To enable your app for Auto, your
+app must target Android 5.0 (API level 21) or higher. Your app’s manifest must
+also declare the car capabilities that it uses, such as audio playback or
+messaging services. </p>
+
+<p>This lesson describes how to start building apps for Auto, including
+setting up your development environment and meeting the the minimum requirements
+to enable an app to communicate with Auto.</p>
+
+<p class="note"><strong>Important:</strong> If you are planning to develop
+apps for Auto, you are encouraged to begin enabling and testing your
+apps now. However, Auto-enabled apps cannot be published at this time.
+Join the
+<a href="http://g.co/AndroidAutoDev" class="external-link">Auto
+Developers Google+ community</a> for updates on when you will be able to submit
+your Auto-enabled apps.</p>
+
+<h2 id="dev-project">Set Up an Auto Project</h2>
+<p>This section describes how to create a new app or modify an existing app to
+communicate with Auto.</p>
+
+<h3 id="prerequisites">Prerequisites</h3>
+<p>Before you begin building apps for Auto, you must:</p>
+
+<ul>
+<li><strong><a href="{@docRoot}sdk/installing/create-project.html">Create or
+update your app project</a></strong> - Android 5.0 (API level 21) provides new
+APIs for implementing audio playback and messaging that is compatible with Auto.
+To access the new APIs, create a project or modify an existing project to target
+Android 5.0 (API level 21) or higher. This means you must set the manifest
+<a href="{@docRoot}topics/manifest/uses-sdk-element.html">{@code targetSdkVersion}</a>
+to 21 or higher.
+</li>
+<li><strong><a href="{@docRoot}tools/support-library/setup.html">Install the
+support library</a></strong> - If you are building messaging apps for Auto, you
+need the {@code NotificationCompat.CarExtender} class contained in the
+<a href="{@docRoot}tools/support-library/features.html#v4">v4 support library</a>.
+This class allows you to create notifications that are compatible with Auto
+devices.</li>
+</ul>
+
+<h3 id="auto-metadata">Declare Auto capabilities</h3>
+<p>The Auto features that your app can access are controlled
+by the settings in your app manifest and a separate XML configuration file.
+Before adding Auto features to your app, you must first define the Auto
+XML configuration file and add a manifest entry referencing your XML file.</p>
+
+<h4 id="auto_xml">Define the Auto XML configuration file</h4>
+<p>Specify the car capabilities that your app uses in an XML file that you
+place in your project’s resources directory ({@code res/xml/}). For example, to
+extend an audio application for Auto, create a file called
+{@code automotive_app_desc.xml} and store it under your projects’s
+{@code res/xml/} folder. The {@code automotive_app_desc.xml} file contains the
+following metadata:</p>
+<pre>
+<automotiveApp>
+ <uses name="media" />
+</automotiveApp>
+</pre>
+<p>The {@code <uses>} element declares the Auto capability your app
+intends to use. Multiple {@code <uses>} tags can be added if your
+application uses multiple car capabilities. The {@code name} attribute indicates
+the specific capability your app uses. The values supported are:</p>
+<ul>
+<li>{@code media} - The app uses the Android framework APIs to play music in
+a vehicle. Set this value if you are enabling an audio app for Auto.</li>
+<li>{@code notification} - The app displays message notifications in the car’s
+Overview screen, allows users select a message to be read aloud, and lets them
+respond through voice input. Set this value if you are enabling a messaging
+app for Auto.
+</ul>
+
+<h4 id="auto_xml">Add a manifest entry</h4>
+<p>In your app’s manifest ({@code AndroidManifest.xml}), provide a reference to
+the Auto XML configuration file you created in the previous section. Add a
+{@code "com.google.android.gms.car.application"} metadata entry under the
+<a href="{@docRoot}guide/topics/manifest/application-element.html">{@code <application>}</a>
+element that references your Auto XML configuration file. Omit the {@code .xml}
+file extension when specifying the configuration filename.</p>
+<p>The following code snippet shows how to include this reference in your
+manifest.</p>
+<pre>
+<application>
+
+ ...
+ <meta-data android:name="com.google.android.gms.car.application"
+ android:resource="@xml/automotive_app_desc"/>
+
+</application>
+</pre>
+
+<h2 id="build-it">Add Auto Features to Your Apps</h2>
+<p>After you have completed the steps described above, you're ready to add Auto
+features to your apps. See these additional topics to help you build apps for
+Auto:</p>
+
+<ul>
+<li><a href="{@docRoot}training/auto/audio/index.html">Providing Audio Playback for Auto</a>
+- Create apps that let users browse and play music in the car.</li>
+<li><a href="{@docRoot}training/auto/messaging/index.html">Providing Messaging for Auto</a>
+- Enable users to receive and reply to messages in the car.</li>
+</ul>
+
+<p class="caution"><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>
+
+<h2 id="test-it">Run and Test Auto Apps</h2>
+
+<p>As you prepare to publish your app, make sure that your app looks correct
+when projected on the Auto user interface. Use the Android Media Browser
+simulator and Android Messaging simulators to view and test your audio or
+messaging apps in a screen that looks similar to what is projected on Auto.</p>
+
+<p>To get the simulators, open the
+<a href="{@docRoot}tools/help/sdk-manager.html">SDK Manager</a> and download
+them from <strong>Extras > Android Auto API Simulators</strong>.</p>
+
+<p>Before you begin testing, compile your app in your development environment.
+Install your app and the Android simulator for the features you want to test
+(that is, audio or messaging) on a physical or virtual device running Android
+5.0 (API level 21) or higher. To check the version of Android on the device, go
+to <strong>Settings > About > Android Version</strong>.</p>
+
+<h3 id="testing-audio-apps">Testing audio apps</h3>
+<p>To run and test audio apps:</p>
+
+<ol>
+<li>Install the Android Media Browser simulator
+({@code media-browser-simulator.apk}) on the test device. You can do this using
+the <a href="{@docRoot}tools/help/adb.html#move">adb</a> command line tool.</li>
+<li>Enable <a href="{@docRoot}tools/device.html#device-developer-options">
+developer options</a> on the test device.</li>
+<li>Install your app on the test device.</li>
+<li>Launch the Android Media Browser simulator to see how your audio app
+appears in Auto. If your app does not appear, stop the simulator from
+<strong>Settings > Apps</strong> then restart it.</li>
+</ol>
+
+<h3 id="testing-messaging-apps">Testing messaging apps</h3>
+<p>To run and test messaging apps:</p>
+
+<ol>
+<li>Install the Android Messaging simulator ({@code messaging-simulator.apk})
+on the test device. You can do this using the
+<a href="{@docRoot}tools/help/adb.html#move">adb</a> command line tool.</li>
+<li>Enable the simulator to read notifications posted on the system:
+<ol type="a">
+ <li>Enable <a href="{@docRoot}tools/device.html#device-developer-options">
+developer options</a> on the test device.</li>
+ <li>Click <strong>Settings > Sounds & Notifications > Notification
+ Access</strong> and check the box labeled
+ <strong>Messaging Simulator</strong>.</li>
+</ol>
+<li>Install your app on the test device.</li>
+<li>Launch the Android Messaging Simulator to see how your messaging app appears
+in Auto. If your app does not appear, stop the simulator from
+<strong>Settings > Apps</strong> then restart it.</li>
+</ol>
diff --git a/docs/html/training/training_toc.cs b/docs/html/training/training_toc.cs
index 9f06666..f246a0f 100644
--- a/docs/html/training/training_toc.cs
+++ b/docs/html/training/training_toc.cs
@@ -938,6 +938,25 @@
</li>
<!-- End: Building for TV -->
+ <!-- Start: Building for Auto -->
+ <li class="nav-section">
+ <div class="nav-section-header">
+ <a href="<?cs var:toroot ?>training/auto/index.html">
+ <span class="small">Building Apps for</span><br/>
+ Auto
+ </a>
+ </div>
+ <ul>
+ <li>
+ <a href="<?cs var:toroot ?>training/auto/start/index.html"
+ description="How to start building or extending apps that work
+ with Auto devices.">
+ Getting Started with Auto</a>
+ </li>
+ </ul>
+ </li>
+ <!-- End: Building for Auto -->
+
<li class="nav-section">
<div class="nav-section-header">
