diff options
Diffstat (limited to 'docs/html/auto')
29 files changed, 140 insertions, 534 deletions
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 Binary files differnew file mode 100644 index 0000000..085b82b --- /dev/null +++ b/docs/html/auto/images/assets/icons/auto_app_in_simulator.png 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 Binary files differnew file mode 100644 index 0000000..483f418 --- /dev/null +++ b/docs/html/auto/images/assets/icons/gp-auto-quality.png.png diff --git a/docs/html/auto/images/assets/icons/media_app_playback.png b/docs/html/auto/images/assets/icons/media_app_playback.png Binary files differnew file mode 100644 index 0000000..3de04bf --- /dev/null +++ b/docs/html/auto/images/assets/icons/media_app_playback.png diff --git a/docs/html/auto/images/assets/icons/messaging_app_notifications.png b/docs/html/auto/images/assets/icons/messaging_app_notifications.png Binary files differnew file mode 100644 index 0000000..3236fdf --- /dev/null +++ b/docs/html/auto/images/assets/icons/messaging_app_notifications.png diff --git a/docs/html/auto/images/assets/landing/01.gif b/docs/html/auto/images/assets/landing/01.gif Binary files differnew file mode 100644 index 0000000..34c9fa8 --- /dev/null +++ b/docs/html/auto/images/assets/landing/01.gif diff --git a/docs/html/auto/images/assets/landing/02.gif b/docs/html/auto/images/assets/landing/02.gif Binary files differnew file mode 100644 index 0000000..d50e06b --- /dev/null +++ b/docs/html/auto/images/assets/landing/02.gif diff --git a/docs/html/auto/images/assets/landing/03.gif b/docs/html/auto/images/assets/landing/03.gif Binary files differnew file mode 100644 index 0000000..7992021 --- /dev/null +++ b/docs/html/auto/images/assets/landing/03.gif diff --git a/docs/html/auto/images/assets/landing/04.png b/docs/html/auto/images/assets/landing/04.png Binary files differnew file mode 100644 index 0000000..a0e75f3 --- /dev/null +++ b/docs/html/auto/images/assets/landing/04.png diff --git a/docs/html/auto/images/assets/landing/05.png b/docs/html/auto/images/assets/landing/05.png Binary files differnew file mode 100644 index 0000000..f3d2ab8 --- /dev/null +++ b/docs/html/auto/images/assets/landing/05.png diff --git a/docs/html/auto/images/assets/landing/06.png b/docs/html/auto/images/assets/landing/06.png Binary files differnew file mode 100644 index 0000000..b19a6bb --- /dev/null +++ b/docs/html/auto/images/assets/landing/06.png diff --git a/docs/html/auto/images/assets/landing/07.png b/docs/html/auto/images/assets/landing/07.png Binary files differnew file mode 100644 index 0000000..380e8da --- /dev/null +++ b/docs/html/auto/images/assets/landing/07.png diff --git a/docs/html/auto/images/assets/landing/08.png b/docs/html/auto/images/assets/landing/08.png Binary files differnew file mode 100644 index 0000000..9889b39 --- /dev/null +++ b/docs/html/auto/images/assets/landing/08.png diff --git a/docs/html/auto/images/assets/landing/FrameA.png b/docs/html/auto/images/assets/landing/FrameA.png Binary files differnew file mode 100644 index 0000000..2a78380 --- /dev/null +++ b/docs/html/auto/images/assets/landing/FrameA.png diff --git a/docs/html/auto/images/assets/landing/FrameB.png b/docs/html/auto/images/assets/landing/FrameB.png Binary files differnew file mode 100644 index 0000000..cb7a3c4 --- /dev/null +++ b/docs/html/auto/images/assets/landing/FrameB.png diff --git a/docs/html/auto/images/logos/apps/kik.png b/docs/html/auto/images/logos/apps/kik.png Binary files differnew file mode 100644 index 0000000..056ef7e --- /dev/null +++ b/docs/html/auto/images/logos/apps/kik.png diff --git a/docs/html/auto/images/logos/apps/npr.png b/docs/html/auto/images/logos/apps/npr.png Binary files differnew file mode 100644 index 0000000..5234201 --- /dev/null +++ b/docs/html/auto/images/logos/apps/npr.png diff --git a/docs/html/auto/images/logos/apps/textplus.png b/docs/html/auto/images/logos/apps/textplus.png Binary files differnew file mode 100644 index 0000000..2a640c4 --- /dev/null +++ b/docs/html/auto/images/logos/apps/textplus.png diff --git a/docs/html/auto/images/logos/apps/whatsapp.png b/docs/html/auto/images/logos/apps/whatsapp.png Binary files differnew file mode 100644 index 0000000..fb5866e --- /dev/null +++ b/docs/html/auto/images/logos/apps/whatsapp.png diff --git a/docs/html/auto/images/ui/gearhead_custom_UI.png b/docs/html/auto/images/ui/gearhead_custom_UI.png Binary files differnew file mode 100644 index 0000000..345db12 --- /dev/null +++ b/docs/html/auto/images/ui/gearhead_custom_UI.png diff --git a/docs/html/auto/images/ui/gearhead_custom_user_actions.png b/docs/html/auto/images/ui/gearhead_custom_user_actions.png Binary files differnew file mode 100644 index 0000000..6cc0dcb --- /dev/null +++ b/docs/html/auto/images/ui/gearhead_custom_user_actions.png diff --git a/docs/html/auto/images/ui/gearhead_day.png b/docs/html/auto/images/ui/gearhead_day.png Binary files differnew file mode 100644 index 0000000..81ead75 --- /dev/null +++ b/docs/html/auto/images/ui/gearhead_day.png diff --git a/docs/html/auto/images/ui/gearhead_drawer_generic.png b/docs/html/auto/images/ui/gearhead_drawer_generic.png Binary files differnew file mode 100644 index 0000000..d203aed --- /dev/null +++ b/docs/html/auto/images/ui/gearhead_drawer_generic.png diff --git a/docs/html/auto/images/ui/gearhead_drawers_customized.png b/docs/html/auto/images/ui/gearhead_drawers_customized.png Binary files differnew file mode 100644 index 0000000..44915b5 --- /dev/null +++ b/docs/html/auto/images/ui/gearhead_drawers_customized.png diff --git a/docs/html/auto/images/ui/gearhead_generic_UI.png b/docs/html/auto/images/ui/gearhead_generic_UI.png Binary files differnew file mode 100644 index 0000000..beb0701 --- /dev/null +++ b/docs/html/auto/images/ui/gearhead_generic_UI.png diff --git a/docs/html/auto/images/ui/gearhead_lens_switching.png b/docs/html/auto/images/ui/gearhead_lens_switching.png Binary files differnew file mode 100644 index 0000000..9dbfe6c --- /dev/null +++ b/docs/html/auto/images/ui/gearhead_lens_switching.png diff --git a/docs/html/auto/images/ui/gearhead_night.png b/docs/html/auto/images/ui/gearhead_night.png Binary files differnew file mode 100644 index 0000000..3f8c593 --- /dev/null +++ b/docs/html/auto/images/ui/gearhead_night.png diff --git a/docs/html/auto/images/ui/gearhead_overview.png b/docs/html/auto/images/ui/gearhead_overview.png Binary files differnew file mode 100644 index 0000000..4332ddf --- /dev/null +++ b/docs/html/auto/images/ui/gearhead_overview.png 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 @@ page.type=about <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 @@ page.type=about </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 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 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> + <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> - - <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> - </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" /> + <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/02_a_notif.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/06.png" /> </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> + <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="landing-section" style="background-color:#f5f5f5" id="developing-for-auto"> <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 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"> <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/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> </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/04.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> - </div> - </div> <!-- end .wrap --> - </div> <!-- end .landing-section --> - - <div class="landing-section" style="background-color:#f5f5f5"> - <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> - - <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="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="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. - </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 @@ page.type=about <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 @@ page.type=about </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 @@ page.type=about </div> <!-- end .landing-section --> - - <div class="landing-section landing-white-background"> <div class="wrap"> <div class="landing-section-header"> @@ -456,24 +450,47 @@ page.type=about </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> |
