blob: ae1efecc064ba9927a6aa32dd7a1ba0aa9c47fa5 [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 {
Ricardo Cerverac5f20772014-06-23 13:11:30 -070034 width:380px;
Ricardo Cervera6d615302014-06-20 18:42:30 -070035 z-index:2;
36 position:relative;
37}
38.auto-img-shot-cols {
Ricardo Cerverac5f20772014-06-23 13:11:30 -070039 width:369px;
Ricardo Cervera6d615302014-06-20 18:42:30 -070040 position:absolute;
Ricardo Cerverac5f20772014-06-23 13:11:30 -070041 top:7px;
42 left:6px;
Ricardo Cervera6d615302014-06-20 18:42:30 -070043 z-index:1;
Ricardo Cervera6d615302014-06-20 18:42:30 -070044}
45.auto-col-2 {
46 width:380px;
47 display: inline;
48 float: left;
49 margin-left: 10px;
50 margin-right: 10px;
51}
52.auto-img-container-single {
53 width:380px;
54 margin:0 auto;
55 margin-top:20px;
56}
Ricardo Cervera5fa67542014-06-15 21:23:16 -070057</style>
58
Robert Ly20555292014-06-13 23:28:19 -070059<div style="width:780px; margin:0 auto;">
60
61<div id="qv-wrapper">
62<div id="qv">
63<h2>In this document</h2>
64<ol>
65 <li><a href="#design">Design</a>
66 <ol>
67 <li><a href="#designprinciples">Design Principles</a></li>
68 <li><a href="#uioverview">UI Overview</a></li>
69 </ol>
70 </li>
71 <li><a href="#architecture">Architecture</a></li>
Ricardo Cervera3c3daf62014-06-24 10:22:30 -070072 <li><a href="#ui">User Interface</a>
Robert Ly20555292014-06-13 23:28:19 -070073 <ol>
74 <li><a href="#launchapp">Launch App</a></li>
75 <li><a href="#useractions">User Actions</a></li>
76 <li><a href="#drawertransitions">Drawer Transitions</a></li>
77 <li><a href="#daynighttransitions">Day and Night Transitions</a></li>
Ricardo Cervera3c3daf62014-06-24 10:22:30 -070078 <li><a href="#customizeui">Customizing the UI</a></li>
Robert Ly20555292014-06-13 23:28:19 -070079 </ol>
80 </li>
81 <li><a href="#devprocess">Development Process</a></li>
82 <li><a href="#emulator">Testing Your App</a></li>
83 <li><a href="#running">Running Your App</a></li>
84</ol>
85</div>
86</div>
87
88<h1>Android Auto Developer Overview</h1>
89
Ricardo Cervera98375d02014-06-22 14:02:30 -070090<p>Android Auto extends the Android platform into the car. When users connect
91their Android handheld device to a compatible vehicle, Android Auto provides a car-optimized
92Android experience on the vehicle's screen. Users interact with compatible apps and services
93through voice actions and the vehicle's input controls.</p>
94
95<p>The Android Auto SDK lets you easily extend your existing apps to work in the car, without
96having to worry about vehicle-specific hardware differences. You can use many Android APIs and
Ricardo Cervera3c3daf62014-06-24 10:22:30 -070097services you are already familiar with. Android Auto provides an easy to use UI model and
Ricardo Cervera98375d02014-06-22 14:02:30 -070098supports notifications and voice actions:</p>
Robert Ly20555292014-06-13 23:28:19 -070099
100<dl>
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700101<dt style="margin-bottom:10px"><strong>Media UI</strong></dt>
Robert Ly20555292014-06-13 23:28:19 -0700102<dd style="margin-bottom:20px">
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700103Android Auto defines interaction models and car-specific UI patterns for apps. The
Robert Ly20555292014-06-13 23:28:19 -0700104first version of Android Auto supports media apps, such as music, podcast, live radio, and
Ricardo Cervera98375d02014-06-22 14:02:30 -0700105audio news apps.
Robert Ly20555292014-06-13 23:28:19 -0700106</dd>
107<dt style="margin-bottom:10px"><strong>Notifications</strong></dt>
108<dd style="margin-bottom:20px">
109The platform will integrate with existing Android APIs for notifications. Users will get
Ricardo Cervera98375d02014-06-22 14:02:30 -0700110car appropiate notifications from Android apps on the vehicle's screen.</dd>
Robert Ly20555292014-06-13 23:28:19 -0700111
112<dt style="margin-bottom:10px"><strong>Voice Actions</strong></dt>
113<dd style="margin-bottom:20px">
Ricardo Cervera98375d02014-06-22 14:02:30 -0700114Android Auto supports a set of voice actions to interact with compatible apps and services.
115Apps can respond to the voice actions they're interested in, such as playing a particular song
116or taking a note.</dd>
Robert Ly20555292014-06-13 23:28:19 -0700117
118<dt style="margin-bottom:10px"><strong>Easy Development Workflow</strong></dt>
119<dd style="margin-bottom:20px">
120To extend an existing Android app for Android Auto, you implement a set of interfaces and
121services defined in the platform. You can reuse existing functionality and many Android APIs
122you already know.</dd>
123</dl>
124
125<p>Well release the Android Auto SDK in the coming months, which will let you test your
126Android Auto experience on a regular Android device.</p>
127
128
Ricardo Cervera6d615302014-06-20 18:42:30 -0700129<h2 id="design">Design</h2>
Robert Ly20555292014-06-13 23:28:19 -0700130
Ricardo Cervera98375d02014-06-22 14:02:30 -0700131<p>Android Auto extends users' digital ecosystem into their cars, allowing drivers to stay
132connected to their virtual worlds while staying focused on the road ahead.</p>
Robert Ly20555292014-06-13 23:28:19 -0700133
Ricardo Cervera98375d02014-06-22 14:02:30 -0700134<p>Because driving is the primary activity in the car, any digital experiences should be designed
135to complement and augment that activity. They should never demand the user's attention.</p>
Robert Ly20555292014-06-13 23:28:19 -0700136
Ricardo Cervera98375d02014-06-22 14:02:30 -0700137<p>Designing for cars is fundamentally different than designing for phones or tablets, and
138requires rethinking how experiences unfold. Because attention is limited and not all tasks are
139possible in the car, effective apps leverage the entire set of devices that drivers have,
140leveraging the app experience on those devices, outside of the car, to set the stage for simple
141experiences while driving.</p>
142
143<p>Android Auto experiences are:</p>
144
145<p><strong>Glanceable and simple</strong>. Driving requires users' full attention. In-car software
146should not. Android Auto was designed to simplify not only the UI, but to optimize interactions
147and require less thinking, induce lower cognitive load, and ultimately, be safer. Effective apps
148provide just enough information in the minimum amount of time the user needs to glance at it and
149return their attention back to the road. Apps should also reduce the number of features to only
150those that are safe and drive-appropriate.</p>
Robert Ly20555292014-06-13 23:28:19 -0700151
152<p><strong>Predictive, yet predictable</strong>. Android Auto leverages rich, contextual awareness
Ricardo Cervera98375d02014-06-22 14:02:30 -0700153to keep the driver informed about important situations during the drive. Rich, timely help is
154combined with predictable functions. Effective apps make use of the patterns for common tasks and
155show timely information only when relevant.</p>
Robert Ly20555292014-06-13 23:28:19 -0700156
Ricardo Cervera98375d02014-06-22 14:02:30 -0700157<p><strong>Connected</strong>. By leveraging the user's personal ecosystem of apps and services,
158Android Auto promotes a continuous experience from phone to car to other devices. The user's
159music, destinations, and virtual ecosystem are always available to augment the drive. Experiences
160that leverage personal context and other devices are naturally part of Android Auto.</p>
Robert Ly20555292014-06-13 23:28:19 -0700161
Ricardo Cervera98375d02014-06-22 14:02:30 -0700162<p><strong>Naturally integrated</strong>. Android Auto blends the user's apps with the car,
163creating a truly integrated experience that leverages what is unique about each car. By using
164the screens, controls, and capabilities of the vehicle, Android Auto feels like an extension of
165the car.</p>
166
Robert Ly20555292014-06-13 23:28:19 -0700167
Robert Ly20555292014-06-13 23:28:19 -0700168
169
Ricardo Cervera6d615302014-06-20 18:42:30 -0700170<h2 id="architecture">Architecture</h2>
Robert Ly20555292014-06-13 23:28:19 -0700171
Ricardo Cervera98375d02014-06-22 14:02:30 -0700172<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 -0700173with the Android Auto app, your media app implements a set of media interfaces.</p>
174
175<div style="width:750px;margin:0 auto">
Ricardo Cervera98375d02014-06-22 14:02:30 -0700176<img src="{@docRoot}auto/images/figure01.png" alt="" />
Robert Ly20555292014-06-13 23:28:19 -0700177<p class="img-caption">
178  <strong>Figure 1</strong> - Architecture of Android Auto.
179</p>
180</div>
181
182<p>The architecture consists of the following components:</p>
183
184<p><strong>Media App</strong> - Runs a media service that exposes content through browsing and
185playback APIs. The service provides content to the Android Auto app. This is your Android app.</p>
186
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700187<p><strong>Android Auto App</strong> - Creates the UI and handles user interactions.
Robert Ly20555292014-06-13 23:28:19 -0700188This app uses a media client to request content from the media service running in the media
189app. The client requests data from the media service and monitors service states.</p>
190
191<p><strong>Vehicle Display</strong> - Shows app content and supports user interaction via
192on-screen soft buttons and other components, such as physical buttons or steering
193wheel controls.</p>
194
195<p>Android media apps must implement binders to these APIs:</p>
196
197<ul>
198<li><strong>Browsing</strong> - Enables a media client to browse a hierarchy of a users
199media collection, presented as a virtual file system with containers (similar to directories)
200and items (similar to files).</li>
201<li><strong>Playback</strong> - Enables a media client to control media playback and monitor
202playback state through callbacks.</li>
203</ul>
204
205
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700206<h2 id="ui">User Interface</h2>
Robert Ly20555292014-06-13 23:28:19 -0700207
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700208<p>The Android Auto app uses a car-specific UI model to display content and user interaction
209opportunities. Android Auto provides you with a standard UI designed to minimize driver
Luan Nguyen1ad503d2014-10-03 15:48:17 -0700210distraction. You do not have to test a custom UI for driver distraction, which is a
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700211lengthy and expensive process involving multiple legislations across the globe and different
212standards for each vehicle OEM.</p>
Robert Ly20555292014-06-13 23:28:19 -0700213
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700214<p>The UI defines interfaces for browsing, searching, and listening to content from
215media apps. You can customize the UI colors, action icons, background images, and more.</p>
Robert Ly20555292014-06-13 23:28:19 -0700216
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700217<h3 id="launchapp">Launcher</h3>
Robert Ly20555292014-06-13 23:28:19 -0700218
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700219<p>The launcher shows all the compatible media apps installed on the users
Luan Nguyen1ad503d2014-10-03 15:48:17 -0700220Android device and lets users select one of them from a scrollable list:</p>
Robert Ly20555292014-06-13 23:28:19 -0700221
Ricardo Cervera6d615302014-06-20 18:42:30 -0700222<div class="auto-img-container-single">
223 <div class="auto-img-container">
224 <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />
225 <img class="auto-img-shot-cols" src="/auto/images/assets/do_01_switcher.png" />
226 </div>
227 <p class="img-caption" style="margin-top:0px">
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700228  <strong>Figure 2.</strong> The launcher.
Ricardo Cervera6d615302014-06-20 18:42:30 -0700229 </p>
Robert Ly20555292014-06-13 23:28:19 -0700230</div>
231
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700232<h3>Primary App UI</h3>
Robert Ly20555292014-06-13 23:28:19 -0700233
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700234<p>After the user selects a media app, the display shows the primary app UI.
235You can customize this UI to show your own icons, app name, and
236background images. Figure 3 shows an example of a customized UI:</p>
Robert Ly20555292014-06-13 23:28:19 -0700237
Ricardo Cervera6d615302014-06-20 18:42:30 -0700238<div class="cols">
239<div class="auto-col-2">
240 <div class="auto-img-container-cols">
241 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
242 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_05_template.png" />
243 </div>
244</div>
245<div class="auto-col-2">
246 <div class="auto-img-container-cols">
247 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
248 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_02_music.png" />
249 </div>
250</div>
251</div>
Robert Ly20555292014-06-13 23:28:19 -0700252<p class="img-caption">
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700253  <strong>Figure 3.</strong> A customized UI.
Robert Ly20555292014-06-13 23:28:19 -0700254</p>
Robert Ly20555292014-06-13 23:28:19 -0700255
Ricardo Cervera6d615302014-06-20 18:42:30 -0700256
257
258<h3 id="useractions">User Actions</h3>
Robert Ly20555292014-06-13 23:28:19 -0700259
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700260<p>The primary app UI supports four main actions on the action bar, four auxiliary actions
Robert Ly20555292014-06-13 23:28:19 -0700261on the overflow bar, and the <em>Return</em> action. You can use standard controls and customize
Ricardo Cervera98375d02014-06-22 14:02:30 -0700262the actions and icons, as shown in Figure 4.</p>
Robert Ly20555292014-06-13 23:28:19 -0700263
Ricardo Cervera6d615302014-06-20 18:42:30 -0700264<div class="auto-img-container-single">
265 <div class="auto-img-container">
266 <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" />
267 <img class="auto-img-shot-cols" src="/auto/images/assets/do_03_more.png" />
268 </div>
269 <p class="img-caption" style="margin-top:0px">
Ricardo Cervera98375d02014-06-22 14:02:30 -0700270  <strong>Figure 4.</strong> Custom extra actions.
Ricardo Cervera6d615302014-06-20 18:42:30 -0700271 </p>
Robert Ly20555292014-06-13 23:28:19 -0700272</div>
273
Ricardo Cervera6d615302014-06-20 18:42:30 -0700274<h3 id="drawertransitions">Drawer Transitions</h3>
Robert Ly20555292014-06-13 23:28:19 -0700275
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700276<p>For browse actions, the display shows the drawer transition as shown in Figure 5.</p>
Robert Ly20555292014-06-13 23:28:19 -0700277
Ricardo Cervera6d615302014-06-20 18:42:30 -0700278<div class="cols">
279<div class="auto-col-2">
280 <div class="auto-img-container-cols">
281 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
282 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_06_gdrawer.png" />
283 </div>
Robert Ly20555292014-06-13 23:28:19 -0700284</div>
Ricardo Cervera6d615302014-06-20 18:42:30 -0700285<div class="auto-col-2">
286 <div class="auto-img-container-cols">
287 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
288 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_04_mdrawer.png" />
289 </div>
290</div>
291</div>
292<p class="img-caption">
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700293  <strong>Figure 5.</strong> Generic and customized drawers.
Ricardo Cervera6d615302014-06-20 18:42:30 -0700294</p>
Robert Ly20555292014-06-13 23:28:19 -0700295
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700296<p>After the transition from the primary app UI to the drawer UI, the drawer
297appears on the center. The customized drawer UI shows the media containers and
Ricardo Cervera98375d02014-06-22 14:02:30 -0700298media files provided by the media service in your app. You can also customize drawers
299with icons for list items.</p>
300
301
Ricardo Cervera6d615302014-06-20 18:42:30 -0700302<h3 id="daynighttransitions">Day and Night Transitions</h3>
Robert Ly20555292014-06-13 23:28:19 -0700303
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700304<p>All the UIs support different color schemes for day and night.
Ricardo Cervera98375d02014-06-22 14:02:30 -0700305The platform provides the state (day or night) and makes adjustments automatically.</p>
Robert Ly20555292014-06-13 23:28:19 -0700306
Ricardo Cervera245528732014-06-23 17:04:53 -0700307<div class="cols">
308<div class="auto-col-2">
309 <div class="auto-img-container-cols">
310 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
311 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_02_music.png" />
312 </div>
313</div>
314<div class="auto-col-2">
315 <div class="auto-img-container-cols">
316 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" />
317 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/do_02_music_night.png" />
318 </div>
319</div>
320</div>
321<p class="img-caption">
322  <strong>Figure 6.</strong> Day and night modes.
323</p>
324
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700325<h3 id="customizeui">Customizing UIs</h3>
Robert Ly20555292014-06-13 23:28:19 -0700326
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700327<p>To customize the UI, you provide the following app-specific resources and actions
328to the Android Auto media client:</p>
Robert Ly20555292014-06-13 23:28:19 -0700329
330<ul>
331<li><strong>Resources</strong> - App logo, app name, theme colors, and background images.</li>
332<li><strong>Actions</strong> - Multiple custom actions; for example: <em>Thumbs Up/Down</em>,
333<em>Favorite</em>, and <em>Bookmark</em>. These actions are app-specific.</li>
334</ul>
335
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700336<p>If provided, the media client automatically uses them in the UI.</p>
Robert Ly20555292014-06-13 23:28:19 -0700337
338
Ricardo Cervera6d615302014-06-20 18:42:30 -0700339<h2 id="devprocess">Development Process</h2>
Robert Ly20555292014-06-13 23:28:19 -0700340
341<p class="note"><strong>Note:</strong> When released, the Android Auto SDK will provide
342media service interfaces, an APK for handheld devices that simulates the Android Auto
343app, and other tools for Android Auto development.</p>
344
345<p>To create a media app for Android Auto, you include an Android service in your app
346that implements the media service interfaces provided by the Android Auto SDK. These
347interfaces define functionality for browsing and finding content, playing media,
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700348customizing the UI, and performing app-specific actions.</p>
Robert Ly20555292014-06-13 23:28:19 -0700349
350<p>The media service interfaces present the content library as a navigable tree and enable
Ricardo Cervera3c3daf62014-06-24 10:22:30 -0700351clients to play media, get album art, obtain theme resources for the UI, and
Robert Ly20555292014-06-13 23:28:19 -0700352invoke app-specific actions.</p>
353
354<p>You dont have to create a new app for Android Auto: you can extend your existing
355Android app with implementations of the media service interfaces. Your service exposes
356your apps media content, theme resources, and app-specific actions using the methods and
357data types specified by the media service interfaces. This simplifies the development
358cycle because:</p>
359
360<ul>
361<li>You do not have to maintain a separate project for Android Auto</li>
362<li>You can reuse existing functionality from your Android app</li>
363</ul>
364
365<p>The Android Auto client presents the customized UI to users and invokes the
366functionality from your service as needed. This has two additional advantages:</p>
367
368<ul>
369<li>Your app does not implement a UI for Android Auto</li>
370<li>Your app does not manage user interactions directly</li>
371</ul>
372
373<p>This also means that you do not have to worry about vehicle-specific hardware
374differences such as screen resolutions, software interfaces, knobs and touch
375controls.</p>
376
377
Ricardo Cervera6d615302014-06-20 18:42:30 -0700378<h2 id="emulator">Testing Your App on an Android Device</h2>
Robert Ly20555292014-06-13 23:28:19 -0700379
380<p>The Android Auto SDK includes an APK with a media client implementation, which is
381similar to those available in compatible vehicles. To test your app with this
382client:</p>
383
384<ol>
385<li>Get an Android device with a similar form factor to a dashboard screen (like a
386Nexus 7).</li>
387<li>Configure the device for Android development.</li>
388<li>Install the APK for the media client from the Android Auto SDK on the device.</li>
389<li>Install the APK for your app on the device.</li>
390<li>Open the media client app from the Android Auto SDK on the device.</li>
391<li>Select your app from the list of available services.</li>
392</ol>
393
394<p>The customized UI for your app appears on the client. You can navigate the content
395library and play media. If your app provides app-specific actions, these actions appear
396in the UI controls.</p>
397
398
Ricardo Cervera6d615302014-06-20 18:42:30 -0700399<h2 id="running">Running Your App on Android Auto</h2>
Robert Ly20555292014-06-13 23:28:19 -0700400
401<p>Media apps are available on the Google Play Store for compatible Android devices.
402When users connect their Android device to a compatible vehicle, the
403Android Auto media client shows a list of all the Android apps installed on the phone
404that implement the media service interfaces.</p>
405
406<p>When users select one of these apps, the Android Auto media client uses the apps
407service to respond to user input and invoke the methods in the media service interfaces
408to build the UI, navigate the content library, and play media.</p>
409
410<div style="margin-bottom:40px"> </div>
411</div>