blob: de5ec27a85542236e094ee50972bd50c3df060cb [file] [log] [blame]
Robert Ly20555292014-06-13 23:28:19 -07001fullpage=true
2page.viewport_width=970
3no_footer_links=true
4excludeFromSuggestions=true
5page.metaDescription=Android Auto
6
7@jd:body
8
Ricardo Cervera5fa67542014-06-15 21:23:16 -07009<style>
10.jd-descr {
11 height:auto;
12}
13#copyright {
14 margin-top:-35px;
15}
Ricardo Cervera6d615302014-06-20 18:42:30 -070016.auto-img-container {
17 position:relative;
18}
19.auto-img-frame {
20 z-index:2;
21 position:relative;
22}
23.auto-img-shot {
24 position:absolute;
25 top:9px;
26 left:8px;
27 z-index:1;
28}
29.auto-img-container-cols {
30 position:relative;
31 margin-top:10px;
32}
33.auto-img-frame-cols {
34 z-index:2;
35 position:relative;
36}
37.auto-img-shot-cols {
38 position:absolute;
39 top:0px;
40 left:0px;
41 z-index:1;
42 border:1px solid #;
43 -webkit-border-radius: 7px;
44 -moz-border-radius: 7px;
45 border-radius: 7px;
46}
47.auto-col-2 {
48 width:380px;
49 display: inline;
50 float: left;
51 margin-left: 10px;
52 margin-right: 10px;
53}
54.auto-img-container-single {
55 width:380px;
56 margin:0 auto;
57 margin-top:20px;
58}
Ricardo Cervera5fa67542014-06-15 21:23:16 -070059</style>
60
Robert Ly20555292014-06-13 23:28:19 -070061<div style="width:780px; margin:0 auto;">
62
63<div id="qv-wrapper">
64<div id="qv">
65<h2>In this document</h2>
66<ol>
67 <li><a href="#design">Design</a>
68 <ol>
69 <li><a href="#designprinciples">Design Principles</a></li>
70 <li><a href="#uioverview">UI Overview</a></li>
71 </ol>
72 </li>
73 <li><a href="#architecture">Architecture</a></li>
74 <li><a href="#uitemplates">UI Templates</a>
75 <ol>
76 <li><a href="#launchapp">Launch App</a></li>
77 <li><a href="#useractions">User Actions</a></li>
78 <li><a href="#drawertransitions">Drawer Transitions</a></li>
79 <li><a href="#daynighttransitions">Day and Night Transitions</a></li>
80 <li><a href="#customizetemplates">Customizing Templates</a></li>
81 </ol>
82 </li>
83 <li><a href="#devprocess">Development Process</a></li>
84 <li><a href="#emulator">Testing Your App</a></li>
85 <li><a href="#running">Running Your App</a></li>
86</ol>
87</div>
88</div>
89
90<h1>Android Auto Developer Overview</h1>
91
Ricardo Cervera98375d02014-06-22 14:02:30 -070092<p>Android Auto extends the Android platform into the car. When users connect
93their Android handheld device to a compatible vehicle, Android Auto provides a car-optimized
94Android experience on the vehicle's screen. Users interact with compatible apps and services
95through voice actions and the vehicle's input controls.</p>
96
97<p>The Android Auto SDK lets you easily extend your existing apps to work in the car, without
98having to worry about vehicle-specific hardware differences. You can use many Android APIs and
99services you are already familiar with. Android Auto provides easy to use UI templates and
100supports notifications and voice actions:</p>
Robert Ly20555292014-06-13 23:28:19 -0700101
102<dl>
103<dt style="margin-bottom:10px"><strong>UI Templates</strong></dt>
104<dd style="margin-bottom:20px">
Ricardo Cervera98375d02014-06-22 14:02:30 -0700105Android Auto defines interaction models and UI templates for apps. The
Robert Ly20555292014-06-13 23:28:19 -0700106first version of Android Auto supports media apps, such as music, podcast, live radio, and
Ricardo Cervera98375d02014-06-22 14:02:30 -0700107audio news apps.
Robert Ly20555292014-06-13 23:28:19 -0700108</dd>
109<dt style="margin-bottom:10px"><strong>Notifications</strong></dt>
110<dd style="margin-bottom:20px">
111The platform will integrate with existing Android APIs for notifications. Users will get
Ricardo Cervera98375d02014-06-22 14:02:30 -0700112car appropiate notifications from Android apps on the vehicle's screen.</dd>
Robert Ly20555292014-06-13 23:28:19 -0700113
114<dt style="margin-bottom:10px"><strong>Voice Actions</strong></dt>
115<dd style="margin-bottom:20px">
Ricardo Cervera98375d02014-06-22 14:02:30 -0700116Android Auto supports a set of voice actions to interact with compatible apps and services.
117Apps can respond to the voice actions they're interested in, such as playing a particular song
118or taking a note.</dd>
Robert Ly20555292014-06-13 23:28:19 -0700119
120<dt style="margin-bottom:10px"><strong>Easy Development Workflow</strong></dt>
121<dd style="margin-bottom:20px">
122To extend an existing Android app for Android Auto, you implement a set of interfaces and
123services defined in the platform. You can reuse existing functionality and many Android APIs
124you already know.</dd>
125</dl>
126
127<p>We’ll release the Android Auto SDK in the coming months, which will let you test your
128Android Auto experience on a regular Android device.</p>
129
130
Ricardo Cervera6d615302014-06-20 18:42:30 -0700131<h2 id="design">Design</h2>
Robert Ly20555292014-06-13 23:28:19 -0700132
Ricardo Cervera98375d02014-06-22 14:02:30 -0700133<p>Android Auto extends users' digital ecosystem into their cars, allowing drivers to stay
134connected to their virtual worlds while staying focused on the road ahead.</p>
Robert Ly20555292014-06-13 23:28:19 -0700135
Ricardo Cervera98375d02014-06-22 14:02:30 -0700136<p>Because driving is the primary activity in the car, any digital experiences should be designed
137to complement and augment that activity. They should never demand the user's attention.</p>
Robert Ly20555292014-06-13 23:28:19 -0700138
Ricardo Cervera98375d02014-06-22 14:02:30 -0700139<p>Designing for cars is fundamentally different than designing for phones or tablets, and
140requires rethinking how experiences unfold. Because attention is limited and not all tasks are
141possible in the car, effective apps leverage the entire set of devices that drivers have,
142leveraging the app experience on those devices, outside of the car, to set the stage for simple
143experiences while driving.</p>
144
145<p>Android Auto experiences are:</p>
146
147<p><strong>Glanceable and simple</strong>. Driving requires users' full attention. In-car software
148should not. Android Auto was designed to simplify not only the UI, but to optimize interactions
149and require less thinking, induce lower cognitive load, and ultimately, be safer. Effective apps
150provide just enough information in the minimum amount of time the user needs to glance at it and
151return their attention back to the road. Apps should also reduce the number of features to only
152those that are safe and drive-appropriate.</p>
Robert Ly20555292014-06-13 23:28:19 -0700153
154<p><strong>Predictive, yet predictable</strong>. Android Auto leverages rich, contextual awareness
Ricardo Cervera98375d02014-06-22 14:02:30 -0700155to keep the driver informed about important situations during the drive. Rich, timely help is
156combined with predictable functions. Effective apps make use of the patterns for common tasks and
157show timely information only when relevant.</p>
Robert Ly20555292014-06-13 23:28:19 -0700158
Ricardo Cervera98375d02014-06-22 14:02:30 -0700159<p><strong>Connected</strong>. By leveraging the user's personal ecosystem of apps and services,
160Android Auto promotes a continuous experience from phone to car to other devices. The user's
161music, destinations, and virtual ecosystem are always available to augment the drive. Experiences
162that leverage personal context and other devices are naturally part of Android Auto.</p>
Robert Ly20555292014-06-13 23:28:19 -0700163
Ricardo Cervera98375d02014-06-22 14:02:30 -0700164<p><strong>Naturally integrated</strong>. Android Auto blends the user's apps with the car,
165creating a truly integrated experience that leverages what is unique about each car. By using
166the screens, controls, and capabilities of the vehicle, Android Auto feels like an extension of
167the car.</p>
168
Robert Ly20555292014-06-13 23:28:19 -0700169
Robert Ly20555292014-06-13 23:28:19 -0700170
171
Ricardo Cervera6d615302014-06-20 18:42:30 -0700172<h2 id="architecture">Architecture</h2>
Robert Ly20555292014-06-13 23:28:19 -0700173
Ricardo Cervera98375d02014-06-22 14:02:30 -0700174<p>The Android Auto app shows your app's customized UI on the vehicle's screen. To communicate
Robert Ly20555292014-06-13 23:28:19 -0700175with the Android Auto app, your media app implements a set of media interfaces.</p>
176
177<div style="width:750px;margin:0 auto">
Ricardo Cervera98375d02014-06-22 14:02:30 -0700178<img src="{@docRoot}auto/images/figure01.png" alt="" />
Robert Ly20555292014-06-13 23:28:19 -0700179<p class="img-caption">
180  <strong>Figure 1</strong> - Architecture of Android Auto.
181</p>
182</div>
183
184<p>The architecture consists of the following components:</p>
185
186<p><strong>Media App</strong> - Runs a media service that exposes content through browsing and
187playback APIs. The service provides content to the Android Auto app. This is your Android app.</p>
188
189<p><strong>Android Auto App</strong> - Creates a templated UI and handles user interactions.
190This app uses a media client to request content from the media service running in the media
191app. The client requests data from the media service and monitors service states.</p>
192
193<p><strong>Vehicle Display</strong> - Shows app content and supports user interaction via
194on-screen soft buttons and other components, such as physical buttons or steering
195wheel controls.</p>
196
197<p>Android media apps must implement binders to these APIs:</p>
198
199<ul>
200<li><strong>Browsing</strong> - Enables a media client to browse a hierarchy of a user’s
201media collection, presented as a virtual file system with containers (similar to directories)
202and items (similar to files).</li>
203<li><strong>Playback</strong> - Enables a media client to control media playback and monitor
204playback state through callbacks.</li>
205</ul>
206
207
Ricardo Cervera6d615302014-06-20 18:42:30 -0700208<h2 id="uitemplates">UI Templates</h2>
Robert Ly20555292014-06-13 23:28:19 -0700209
210<p>The Android Auto app uses a templated UI to display content and user interaction
211opportunities. Android Auto provides you with a set of standard UI templates that follow
212international guidelines for minimizing driving distraction. You do not have to test your
213app's UI for for driver distraction, which is a lengthy and expensive process involving
214multiple legislations across the globe and different standards for each vehicle OEM.</p>
215
216<p>The UI templates define interfaces for browsing, searching, and listening to content from
217media apps. Although you cannot change the standard template format or layout, you can customize
218the template colors, action icons, background images, and more.</p>
219
Ricardo Cervera6d615302014-06-20 18:42:30 -0700220<h3 id="launchapp">Launch App Template</h3>
Robert Ly20555292014-06-13 23:28:19 -0700221
222<p>The Launcher template shows all the compatible media apps installed on the user’s
223Android device and lets users select one of them from an scrollable list:</p>
224
Ricardo Cervera6d615302014-06-20 18:42:30 -0700225<div class="auto-img-container-single">
226 <div class="auto-img-container">
227 <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />
228 <img class="auto-img-shot-cols" src="/auto/images/assets/do_01_switcher.png" />
229 </div>
230 <p class="img-caption" style="margin-top:0px">
231  <strong>Figure 2.</strong> The Launcher template.
232 </p>
Robert Ly20555292014-06-13 23:28:19 -0700233</div>
234
Ricardo Cervera6d615302014-06-20 18:42:30 -0700235<h3>Primary App Template</h3>
Robert Ly20555292014-06-13 23:28:19 -0700236
Ricardo Cervera98375d02014-06-22 14:02:30 -0700237<p>After the user selects a media app, the display shows the primary app template.
238You can customize this template to show your own icons, app name, and
239background images. Figure 3 shows an example of a customized template:</p>
Robert Ly20555292014-06-13 23:28:19 -0700240
Ricardo Cervera6d615302014-06-20 18:42:30 -0700241<div class="cols">
242<div class="auto-col-2">
243 <div class="auto-img-container-cols">
244 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
245 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_05_template.png" />
246 </div>
247</div>
248<div class="auto-col-2">
249 <div class="auto-img-container-cols">
250 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
251 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_02_music.png" />
252 </div>
253</div>
254</div>
Robert Ly20555292014-06-13 23:28:19 -0700255<p class="img-caption">
Ricardo Cervera98375d02014-06-22 14:02:30 -0700256  <strong>Figure 3.</strong> A customized template.
Robert Ly20555292014-06-13 23:28:19 -0700257</p>
Robert Ly20555292014-06-13 23:28:19 -0700258
Ricardo Cervera6d615302014-06-20 18:42:30 -0700259
260
261<h3 id="useractions">User Actions</h3>
Robert Ly20555292014-06-13 23:28:19 -0700262
263<p>The primary app template supports four main actions on the action bar, four auxiliary actions
264on the overflow bar, and the <em>Return</em> action. You can use standard controls and customize
Ricardo Cervera98375d02014-06-22 14:02:30 -0700265the actions and icons, as shown in Figure 4.</p>
Robert Ly20555292014-06-13 23:28:19 -0700266
Ricardo Cervera6d615302014-06-20 18:42:30 -0700267<div class="auto-img-container-single">
268 <div class="auto-img-container">
269 <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />
270 <img class="auto-img-shot-cols" src="/auto/images/assets/do_03_more.png" />
271 </div>
272 <p class="img-caption" style="margin-top:0px">
Ricardo Cervera98375d02014-06-22 14:02:30 -0700273  <strong>Figure 4.</strong> Custom extra actions.
Ricardo Cervera6d615302014-06-20 18:42:30 -0700274 </p>
Robert Ly20555292014-06-13 23:28:19 -0700275</div>
276
Ricardo Cervera6d615302014-06-20 18:42:30 -0700277<h3 id="drawertransitions">Drawer Transitions</h3>
Robert Ly20555292014-06-13 23:28:19 -0700278
Ricardo Cervera98375d02014-06-22 14:02:30 -0700279<p>For browse actions, the display shows the drawer transition and template, as shown in
280Figure 5.</p>
Robert Ly20555292014-06-13 23:28:19 -0700281
Ricardo Cervera6d615302014-06-20 18:42:30 -0700282<div class="cols">
283<div class="auto-col-2">
284 <div class="auto-img-container-cols">
285 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
286 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_06_gdrawer.png" />
287 </div>
Robert Ly20555292014-06-13 23:28:19 -0700288</div>
Ricardo Cervera6d615302014-06-20 18:42:30 -0700289<div class="auto-col-2">
290 <div class="auto-img-container-cols">
291 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
292 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_04_mdrawer.png" />
293 </div>
294</div>
295</div>
296<p class="img-caption">
Ricardo Cervera98375d02014-06-22 14:02:30 -0700297  <strong>Figure 5.</strong> Generic and customized drawer templates.
Ricardo Cervera6d615302014-06-20 18:42:30 -0700298</p>
Robert Ly20555292014-06-13 23:28:19 -0700299
Ricardo Cervera98375d02014-06-22 14:02:30 -0700300<p>After the transition from the primary app template to the drawer template, the drawer
301appears on the center. The customized drawer template shows the media containers and
302media files provided by the media service in your app. You can also customize drawers
303with icons for list items.</p>
304
305
Ricardo Cervera6d615302014-06-20 18:42:30 -0700306<h3 id="daynighttransitions">Day and Night Transitions</h3>
Robert Ly20555292014-06-13 23:28:19 -0700307
Ricardo Cervera98375d02014-06-22 14:02:30 -0700308<p>All the templates support different color schemes for day and night.
309The platform provides the state (day or night) and makes adjustments automatically.</p>
Robert Ly20555292014-06-13 23:28:19 -0700310
Ricardo Cervera6d615302014-06-20 18:42:30 -0700311<h3 id="customizetemplates">Customizing Templates</h3>
Robert Ly20555292014-06-13 23:28:19 -0700312
313<p>To customize the templates, provide the following app-specific resources and actions
314to the Android Auto media client.</p>
315
316<ul>
317<li><strong>Resources</strong> - App logo, app name, theme colors, and background images.</li>
318<li><strong>Actions</strong> - Multiple custom actions; for example: <em>Thumbs Up/Down</em>,
319<em>Favorite</em>, and <em>Bookmark</em>. These actions are app-specific.</li>
320</ul>
321
322<p>If provided, the media client automatically uses them in the templated UI.</p>
323
324
Ricardo Cervera6d615302014-06-20 18:42:30 -0700325<h2 id="devprocess">Development Process</h2>
Robert Ly20555292014-06-13 23:28:19 -0700326
327<p class="note"><strong>Note:</strong> When released, the Android Auto SDK will provide
328media service interfaces, an APK for handheld devices that simulates the Android Auto
329app, and other tools for Android Auto development.</p>
330
331<p>To create a media app for Android Auto, you include an Android service in your app
332that implements the media service interfaces provided by the Android Auto SDK. These
333interfaces define functionality for browsing and finding content, playing media,
334customizing the UI template, and performing app-specific actions.</p>
335
336<p>The media service interfaces present the content library as a navigable tree and enable
337clients to play media, get album art, obtain theme resources for the UI template, and
338invoke app-specific actions.</p>
339
340<p>You don’t have to create a new app for Android Auto: you can extend your existing
341Android app with implementations of the media service interfaces. Your service exposes
342your app’s media content, theme resources, and app-specific actions using the methods and
343data types specified by the media service interfaces. This simplifies the development
344cycle because:</p>
345
346<ul>
347<li>You do not have to maintain a separate project for Android Auto</li>
348<li>You can reuse existing functionality from your Android app</li>
349</ul>
350
351<p>The Android Auto client presents the customized UI to users and invokes the
352functionality from your service as needed. This has two additional advantages:</p>
353
354<ul>
355<li>Your app does not implement a UI for Android Auto</li>
356<li>Your app does not manage user interactions directly</li>
357</ul>
358
359<p>This also means that you do not have to worry about vehicle-specific hardware
360differences such as screen resolutions, software interfaces, knobs and touch
361controls.</p>
362
363
Ricardo Cervera6d615302014-06-20 18:42:30 -0700364<h2 id="emulator">Testing Your App on an Android Device</h2>
Robert Ly20555292014-06-13 23:28:19 -0700365
366<p>The Android Auto SDK includes an APK with a media client implementation, which is
367similar to those available in compatible vehicles. To test your app with this
368client:</p>
369
370<ol>
371<li>Get an Android device with a similar form factor to a dashboard screen (like a
372Nexus 7).</li>
373<li>Configure the device for Android development.</li>
374<li>Install the APK for the media client from the Android Auto SDK on the device.</li>
375<li>Install the APK for your app on the device.</li>
376<li>Open the media client app from the Android Auto SDK on the device.</li>
377<li>Select your app from the list of available services.</li>
378</ol>
379
380<p>The customized UI for your app appears on the client. You can navigate the content
381library and play media. If your app provides app-specific actions, these actions appear
382in the UI controls.</p>
383
384
Ricardo Cervera6d615302014-06-20 18:42:30 -0700385<h2 id="running">Running Your App on Android Auto</h2>
Robert Ly20555292014-06-13 23:28:19 -0700386
387<p>Media apps are available on the Google Play Store for compatible Android devices.
388When users connect their Android device to a compatible vehicle, the
389Android Auto media client shows a list of all the Android apps installed on the phone
390that implement the media service interfaces.</p>
391
392<p>When users select one of these apps, the Android Auto media client uses the app’s
393service to respond to user input and invoke the methods in the media service interfaces
394to build the UI, navigate the content library, and play media.</p>
395
396<div style="margin-bottom:40px"> </div>
397</div>