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 {
  z-index:2;
  position:relative;
}
.auto-img-shot-cols {
  position:absolute;
  top:0px;
  left:0px;
  z-index:1;
  border:1px solid #;
  -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
  border-radius: 7px;
}
.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 to car entertainment systems. When users connect
their Android handheld device to a compatible vehicle, Android Auto lets users project apps on
the vehicle’s touchscreen and interact with them using the vehicle’s controls.</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 several app categories. The
first version of Android Auto supports media apps, such as music, podcast, live radio, and
audio news apps. Future versions will support messaging, communication, local search apps,
and more.
</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
some 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 voice search and voice actions for media apps. Future versions
will support additional voice actions.</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>Digital experiences for cars should complement and augment driving, not demand the driver's
attention. Designing these experiences for cars is fundamentally different than in the case of
phones and tablets. It requires rethinking how these experiences unfold.</p>

<h3 id="designprinciples">Design Principles</h3>

<p><strong>Glanceable</strong>. We designed Android Auto to reduce UI complexity, optimize user
interactions, and lower cognitive load. Effective apps show just enough information
and only provide features that do not require excessive menu interaction and navigation.</p>

<p><strong>Predictive, yet predictable</strong>. Android Auto leverages rich, contextual awareness
to keep the driver informed about important situations. Timely help is combined with predictable
functions. Effective apps use patterns for common tasks and show timely information only when
relevant.</p>

<p><strong>Connected</strong>. Android Auto works with apps that drivers already use in other
devices. Android Auto promotes a continuous app experience from phones and tablets to cars,
providing access to user's existing settings, subscriptions, and digital libraries. Experiences
that bring personal content and context from other devices are part of Android Auto.</p>

<p><strong>Integrated</strong>. Android Auto blends your apps with the vehicle's entertainment
system, creating a truly integrated experience in every car. By using the vehicle's screen and
controls, apps feel tailored to each car.</p>



<h2 id="architecture">Architecture</h2>

<p>The Android Auto app projects 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="" id="figure1" />
<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. Figure
3 shows the elements of this template that you can customize:</p>

<p>You can customize the primary app template to show your own icons, app name, and
background images. Figure 4 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 4.</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 5.</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 5.</strong> Custom extra actions.
  </p>
</div>

<h3 id="drawertransitions">Drawer Transitions</h3>

<p>For browse actions, the display shows the drawer transition and template:</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>

<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 4.</strong> Generic and customized drawer templates.
</p>

<h3 id="daynighttransitions">Day and Night Transitions</h3>

<p>All the templates support different color schemes for day and night, as shown in
Figure 8. The platform provides the state (day or night) and makes adjustments automatically.</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>