docs/html/auto/overview.jd

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="#uitemplates">UI Templates</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="#customizetemplates">Customizing Templates</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 easy to use UI templates and
supports notifications and voice actions:</p>

<dl>
<dt style="margin-bottom:10px"><strong>UI Templates</strong></dt>
<dd style="margin-bottom:20px">
Android Auto defines interaction models and UI templates 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 a templated 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="uitemplates">UI Templates</h2>

<p>The Android Auto app uses a templated UI to display content and user interaction
opportunities. Android Auto provides you with a set of standard UI templates that follow
international guidelines for minimizing driving distraction. You do not have to test your
app's UI for 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 templates define interfaces for browsing, searching, and listening to content from
media apps. Although you cannot change the standard template format or layout, you can customize
the template colors, action icons, background images, and more.</p>

<h3 id="launchapp">Launch App Template</h3>

<p>The Launcher template shows all the compatible media apps installed on the user’s
Android device and lets users select one of them from an 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 template.
  </p>
</div>

<h3>Primary App Template</h3>

<p>After the user selects a media app, the display shows the primary app template.
You can customize this template to show your own icons, app name, and
background images. Figure 3 shows an example of a customized template:</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 template.
</p>



<h3 id="useractions">User Actions</h3>

<p>The primary app template 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 and template, 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 drawer templates.
</p>

<p>After the transition from the primary app template to the drawer template, the drawer
appears on the center. The customized drawer template 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 templates 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="customizetemplates">Customizing Templates</h3>

<p>To customize the templates, 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 templated 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 template, 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 template, 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>