Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 1 | fullpage=true |
| 2 | page.viewport_width=970 |
| 3 | no_footer_links=true |
| 4 | excludeFromSuggestions=true |
| 5 | page.metaDescription=Android Auto |
| 6 | |
| 7 | @jd:body |
| 8 | |
Ricardo Cervera | 5fa6754 | 2014-06-15 21:23:16 -0700 | [diff] [blame] | 9 | <style> |
| 10 | .jd-descr { |
| 11 | height:auto; |
| 12 | } |
| 13 | #copyright { |
| 14 | margin-top:-35px; |
| 15 | } |
| 16 | </style> |
| 17 | |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 18 | <div style="width:780px; margin:0 auto;"> |
| 19 | |
| 20 | <div id="qv-wrapper"> |
| 21 | <div id="qv"> |
| 22 | <h2>In this document</h2> |
| 23 | <ol> |
| 24 | <li><a href="#design">Design</a> |
| 25 | <ol> |
| 26 | <li><a href="#designprinciples">Design Principles</a></li> |
| 27 | <li><a href="#uioverview">UI Overview</a></li> |
| 28 | </ol> |
| 29 | </li> |
| 30 | <li><a href="#architecture">Architecture</a></li> |
| 31 | <li><a href="#uitemplates">UI Templates</a> |
| 32 | <ol> |
| 33 | <li><a href="#launchapp">Launch App</a></li> |
| 34 | <li><a href="#useractions">User Actions</a></li> |
| 35 | <li><a href="#drawertransitions">Drawer Transitions</a></li> |
| 36 | <li><a href="#daynighttransitions">Day and Night Transitions</a></li> |
| 37 | <li><a href="#customizetemplates">Customizing Templates</a></li> |
| 38 | </ol> |
| 39 | </li> |
| 40 | <li><a href="#devprocess">Development Process</a></li> |
| 41 | <li><a href="#emulator">Testing Your App</a></li> |
| 42 | <li><a href="#running">Running Your App</a></li> |
| 43 | </ol> |
| 44 | </div> |
| 45 | </div> |
| 46 | |
| 47 | <h1>Android Auto Developer Overview</h1> |
| 48 | |
| 49 | <p>Android Auto extends the Android platform to car entertainment systems. When users connect |
| 50 | their Android handheld device to a compatible vehicle, Android Auto lets users project apps on |
| 51 | the vehicle’s touchscreen and interact with them using the vehicle’s controls.</p> |
| 52 | |
| 53 | <dl> |
| 54 | <dt style="margin-bottom:10px"><strong>UI Templates</strong></dt> |
| 55 | <dd style="margin-bottom:20px"> |
| 56 | Android Auto defines interaction models and UI templates for several app categories. The |
| 57 | first version of Android Auto supports media apps, such as music, podcast, live radio, and |
| 58 | audio news apps. Future versions will support messaging, communication, local search apps, |
| 59 | and more. |
| 60 | </dd> |
| 61 | <dt style="margin-bottom:10px"><strong>Notifications</strong></dt> |
| 62 | <dd style="margin-bottom:20px"> |
| 63 | The platform will integrate with existing Android APIs for notifications. Users will get |
| 64 | some notifications from Android apps on the vehicle’s screen.</dd> |
| 65 | |
| 66 | <dt style="margin-bottom:10px"><strong>Voice Actions</strong></dt> |
| 67 | <dd style="margin-bottom:20px"> |
| 68 | Android Auto supports voice search and voice actions for media apps. Future versions |
| 69 | will support additional voice actions.</dd> |
| 70 | |
| 71 | <dt style="margin-bottom:10px"><strong>Easy Development Workflow</strong></dt> |
| 72 | <dd style="margin-bottom:20px"> |
| 73 | To extend an existing Android app for Android Auto, you implement a set of interfaces and |
| 74 | services defined in the platform. You can reuse existing functionality and many Android APIs |
| 75 | you already know.</dd> |
| 76 | </dl> |
| 77 | |
| 78 | <p>We’ll release the Android Auto SDK in the coming months, which will let you test your |
| 79 | Android Auto experience on a regular Android device.</p> |
| 80 | |
| 81 | |
| 82 | <h2 id="design" style="margin-top:30px">Design</h2> |
| 83 | |
| 84 | <p>Digital experiences for cars should complement and augment driving, not demand the driver's |
| 85 | attention. Designing these experiences for cars is fundamentally different than in the case of |
| 86 | phones and tablets. It requires rethinking how these experiences unfold.</p> |
| 87 | |
| 88 | <h3 id="designprinciples" style="margin-top:25px">Design Principles</h3> |
| 89 | |
| 90 | <p><strong>Glanceable</strong>. We designed Android Auto to reduce UI complexity, optimize user |
| 91 | interactions, and lower cognitive load. Effective apps show just enough information |
| 92 | and only provide features that do not require excessive menu interaction and navigation.</p> |
| 93 | |
| 94 | <p><strong>Predictive, yet predictable</strong>. Android Auto leverages rich, contextual awareness |
| 95 | to keep the driver informed about important situations. Timely help is combined with predictable |
| 96 | functions. Effective apps use patterns for common tasks and show timely information only when |
| 97 | relevant.</p> |
| 98 | |
| 99 | <p><strong>Connected</strong>. Android Auto works with apps that drivers already use in other |
| 100 | devices. Android Auto promotes a continuous app experience from phones and tablets to cars, |
| 101 | providing access to user's existing settings, subscriptions, and digital libraries. Experiences |
| 102 | that bring personal content and context from other devices are part of Android Auto.</p> |
| 103 | |
| 104 | <p><strong>Integrated</strong>. Android Auto blends your apps with the vehicle's entertainment |
| 105 | system, creating a truly integrated experience in every car. By using the vehicle's screen and |
| 106 | controls, apps feel tailored to each car.</p> |
| 107 | |
| 108 | <h3 id="uioverview" style="margin-top:25px">UI Overview</h3> |
| 109 | |
| 110 | <p>Android Auto is a new environment that leverages existing UI models where appropiate and adds |
| 111 | new models based on constrains and context. There are three primary concepts for Android Auto: |
| 112 | <strong>Suggest</strong>, a unified place for predictive content; <strong>Demand</strong>, a |
| 113 | pervasive way to interact with voice; and the <strong>Facets</strong>, organized spaces for |
| 114 | primary activities, apps and content.</p> |
| 115 | |
| 116 | <dl> |
| 117 | <dt style="margin-bottom:10px"><strong>Suggest: The Google Facet</strong></dt> |
| 118 | <dd style="margin-bottom:20px"> |
| 119 | Core of continuity and extensibility is contextual stream of Now-like cards, powered by your |
| 120 | apps and notifications. Relevant, timely, and dynamic, the stream organizes likely people, media, |
| 121 | places, and information so drivers can quickly continue their activities or start something new. |
| 122 | Google Now and notifications enable drivers to use the apps and services they know when they are |
| 123 | most relevant. |
| 124 | </dd> |
| 125 | <dt style="margin-bottom:10px"><strong>Demand: The Voice Layer</strong></dt> |
| 126 | <dd style="margin-bottom:20px"> |
| 127 | Voice-enabled tasks lets drivers accomplish their goals without taking their eyes off the road. |
| 128 | Android Auto defines actions and intents that your app can register for. |
| 129 | These are accessible through both persistent UI elements and dedicated hardware controls. |
| 130 | </dd> |
| 131 | <dt style="margin-bottom:10px"><strong>Facets and Templates: App-powered activities</strong></dt> |
| 132 | <dd style="margin-bottom:20px"> |
| 133 | In the car, pages of app icons and different UIs create a distracting and dangerous situation. |
| 134 | Instead, Android Auto apps power templates which help provide simple but customizable UIs |
| 135 | for common interactions such as media or communications. Templates incorporate common behaviors, |
| 136 | such as play/pause or reply to a message, while still letting your app promote its value |
| 137 | and its brand. Apps are organized into facets (or activities) to enable quick access. |
| 138 | </dd> |
| 139 | </dl> |
| 140 | |
| 141 | <p>Android Auto uses the input and output mechanisms in each vehicle to tailor the interactions. |
| 142 | Some vehicles have dedicated hardware controls, while others have primarily touch-based systems. |
| 143 | Android Auto maps common actions and intents across these diverse sets of controls and outputs to |
| 144 | enable you to concentrate on your unique app experience.</p> |
| 145 | |
| 146 | |
| 147 | <h2 id="architecture" style="margin-top:30px">Architecture</h2> |
| 148 | |
| 149 | <p>The Android Auto app projects your app's customized UI on the vehicle's screen. To communicate |
| 150 | with the Android Auto app, your media app implements a set of media interfaces.</p> |
| 151 | |
| 152 | <div style="width:750px;margin:0 auto"> |
| 153 | <img src="/auto/images/figure01.png" alt="" id="figure1" /> |
| 154 | <p class="img-caption"> |
| 155 | <strong>Figure 1</strong> - Architecture of Android Auto. |
| 156 | </p> |
| 157 | </div> |
| 158 | |
| 159 | <p>The architecture consists of the following components:</p> |
| 160 | |
| 161 | <p><strong>Media App</strong> - Runs a media service that exposes content through browsing and |
| 162 | playback APIs. The service provides content to the Android Auto app. This is your Android app.</p> |
| 163 | |
| 164 | <p><strong>Android Auto App</strong> - Creates a templated UI and handles user interactions. |
| 165 | This app uses a media client to request content from the media service running in the media |
| 166 | app. The client requests data from the media service and monitors service states.</p> |
| 167 | |
| 168 | <p><strong>Vehicle Display</strong> - Shows app content and supports user interaction via |
| 169 | on-screen soft buttons and other components, such as physical buttons or steering |
| 170 | wheel controls.</p> |
| 171 | |
| 172 | <p>Android media apps must implement binders to these APIs:</p> |
| 173 | |
| 174 | <ul> |
| 175 | <li><strong>Browsing</strong> - Enables a media client to browse a hierarchy of a user’s |
| 176 | media collection, presented as a virtual file system with containers (similar to directories) |
| 177 | and items (similar to files).</li> |
| 178 | <li><strong>Playback</strong> - Enables a media client to control media playback and monitor |
| 179 | playback state through callbacks.</li> |
| 180 | </ul> |
| 181 | |
| 182 | |
| 183 | <h2 id="uitemplates" style="margin-top:30px">UI Templates</h2> |
| 184 | |
| 185 | <p>The Android Auto app uses a templated UI to display content and user interaction |
| 186 | opportunities. Android Auto provides you with a set of standard UI templates that follow |
| 187 | international guidelines for minimizing driving distraction. You do not have to test your |
| 188 | app's UI for for driver distraction, which is a lengthy and expensive process involving |
| 189 | multiple legislations across the globe and different standards for each vehicle OEM.</p> |
| 190 | |
| 191 | <p>The UI templates define interfaces for browsing, searching, and listening to content from |
| 192 | media apps. Although you cannot change the standard template format or layout, you can customize |
| 193 | the template colors, action icons, background images, and more.</p> |
| 194 | |
| 195 | <h3 id="launchapp" style="margin-top:25px">Launch App Template</h3> |
| 196 | |
| 197 | <p>The Launcher template shows all the compatible media apps installed on the user’s |
| 198 | Android device and lets users select one of them from an scrollable list:</p> |
| 199 | |
| 200 | <div style="width:500px;margin:0 auto"> |
| 201 | <img src="/auto/images/figure02.png" alt="" id="figure2" /> |
| 202 | <p class="img-caption"> |
| 203 | <strong>Figure 2.</strong> The Launcher template. |
| 204 | </p> |
| 205 | </div> |
| 206 | |
| 207 | <h3 style="margin-top:25px">Primary App Template</h3> |
| 208 | |
| 209 | <p>After the user selects a media app, the display shows the primary app template. Figure |
| 210 | 3 shows the elements of this template that you can customize:</p> |
| 211 | |
| 212 | <div style="width:428px;margin:0 auto"> |
| 213 | <img src="/auto/images/figure03.png" alt="" id="figure3" /> |
| 214 | <p class="img-caption"> |
| 215 | <strong>Figure 3.</strong> The main application template. |
| 216 | </p> |
| 217 | </div> |
| 218 | |
| 219 | <p>You can customize the primary app template to show your own icons, app name, and |
| 220 | background images. Figure 4 shows an example of a customized template:</p> |
| 221 | |
| 222 | <div style="width:787px;margin:0 auto"> |
| 223 | <img src="/auto/images/figure04.png" alt="" id="figure4" /> |
| 224 | <p class="img-caption"> |
| 225 | <strong>Figure 4.</strong> A customized template. |
| 226 | </p> |
| 227 | </div> |
| 228 | |
| 229 | <h3 id="useractions" style="margin-top:25px">User Actions</h3> |
| 230 | |
| 231 | <p>The primary app template supports four main actions on the action bar, four auxiliary actions |
| 232 | on the overflow bar, and the <em>Return</em> action. You can use standard controls and customize |
| 233 | the actions and icons, as shown in Figure 5.</p> |
| 234 | |
| 235 | <div style="width:500px;margin:0 auto"> |
| 236 | <img src="/auto/images/figure05.png" alt="" id="figure5" /> |
| 237 | <p class="img-caption"> |
| 238 | <strong>Figure 5.</strong> Custom icons for auxiliary actions. |
| 239 | </p> |
| 240 | </div> |
| 241 | |
| 242 | <h3 id="drawertransitions" style="margin-top:25px">Drawer Transitions</h3> |
| 243 | |
| 244 | <p>For browse actions, the display shows the drawer transition and template:</p> |
| 245 | |
| 246 | <div style="width:750px;margin:0 auto"> |
| 247 | <img src="/auto/images/figure06.png" alt="" id="figure6" /> |
| 248 | <p class="img-caption"> |
| 249 | <strong>Figure 6.</strong> The drawer transition. |
| 250 | </p> |
| 251 | </div> |
| 252 | |
| 253 | <p>After the transition from the primary app template to the drawer template, the drawer |
| 254 | appears on the center. The customized drawer template shows the media containers and |
| 255 | media files provided by the media service in your app. You can also customize drawers |
| 256 | with icons for list items.</p> |
| 257 | |
| 258 | <div style="width:500px;margin:0 auto"> |
| 259 | <img src="/auto/images/figure07.png" alt="" id="figure7" /> |
| 260 | <p class="img-caption"> |
| 261 | <strong>Figure 7.</strong> A customized drawer template. |
| 262 | </p> |
| 263 | </div> |
| 264 | |
| 265 | <h3 id="daynighttransitions" style="margin-top:25px">Day and Night Transitions</h3> |
| 266 | |
| 267 | <p>All the templates support different color schemes for day and night, as shown in |
| 268 | Figure 8. The platform provides the state (day or night) and makes adjustments automatically.</p> |
| 269 | |
| 270 | <div style="width:780px;margin:0 auto"> |
| 271 | <img src="/auto/images/figure08.png" alt="" id="figure8" /> |
| 272 | <p class="img-caption"> |
| 273 | <strong>Figure 8.</strong> Day and night transitions. |
| 274 | </p> |
| 275 | </div> |
| 276 | |
| 277 | <h3 id="customizetemplates" style="margin-top:25px">Customizing Templates</h3> |
| 278 | |
| 279 | <p>To customize the templates, provide the following app-specific resources and actions |
| 280 | to the Android Auto media client.</p> |
| 281 | |
| 282 | <ul> |
| 283 | <li><strong>Resources</strong> - App logo, app name, theme colors, and background images.</li> |
| 284 | <li><strong>Actions</strong> - Multiple custom actions; for example: <em>Thumbs Up/Down</em>, |
| 285 | <em>Favorite</em>, and <em>Bookmark</em>. These actions are app-specific.</li> |
| 286 | </ul> |
| 287 | |
| 288 | <p>If provided, the media client automatically uses them in the templated UI.</p> |
| 289 | |
| 290 | |
| 291 | <h2 id="devprocess" style="margin-top:30px">Development Process</h2> |
| 292 | |
| 293 | <p class="note"><strong>Note:</strong> When released, the Android Auto SDK will provide |
| 294 | media service interfaces, an APK for handheld devices that simulates the Android Auto |
| 295 | app, and other tools for Android Auto development.</p> |
| 296 | |
| 297 | <p>To create a media app for Android Auto, you include an Android service in your app |
| 298 | that implements the media service interfaces provided by the Android Auto SDK. These |
| 299 | interfaces define functionality for browsing and finding content, playing media, |
| 300 | customizing the UI template, and performing app-specific actions.</p> |
| 301 | |
| 302 | <p>The media service interfaces present the content library as a navigable tree and enable |
| 303 | clients to play media, get album art, obtain theme resources for the UI template, and |
| 304 | invoke app-specific actions.</p> |
| 305 | |
| 306 | <p>You don’t have to create a new app for Android Auto: you can extend your existing |
| 307 | Android app with implementations of the media service interfaces. Your service exposes |
| 308 | your app’s media content, theme resources, and app-specific actions using the methods and |
| 309 | data types specified by the media service interfaces. This simplifies the development |
| 310 | cycle because:</p> |
| 311 | |
| 312 | <ul> |
| 313 | <li>You do not have to maintain a separate project for Android Auto</li> |
| 314 | <li>You can reuse existing functionality from your Android app</li> |
| 315 | </ul> |
| 316 | |
| 317 | <p>The Android Auto client presents the customized UI to users and invokes the |
| 318 | functionality from your service as needed. This has two additional advantages:</p> |
| 319 | |
| 320 | <ul> |
| 321 | <li>Your app does not implement a UI for Android Auto</li> |
| 322 | <li>Your app does not manage user interactions directly</li> |
| 323 | </ul> |
| 324 | |
| 325 | <p>This also means that you do not have to worry about vehicle-specific hardware |
| 326 | differences such as screen resolutions, software interfaces, knobs and touch |
| 327 | controls.</p> |
| 328 | |
| 329 | |
| 330 | <h2 id="emulator" style="margin-top:30px">Testing Your App on an Android Device</h2> |
| 331 | |
| 332 | <p>The Android Auto SDK includes an APK with a media client implementation, which is |
| 333 | similar to those available in compatible vehicles. To test your app with this |
| 334 | client:</p> |
| 335 | |
| 336 | <ol> |
| 337 | <li>Get an Android device with a similar form factor to a dashboard screen (like a |
| 338 | Nexus 7).</li> |
| 339 | <li>Configure the device for Android development.</li> |
| 340 | <li>Install the APK for the media client from the Android Auto SDK on the device.</li> |
| 341 | <li>Install the APK for your app on the device.</li> |
| 342 | <li>Open the media client app from the Android Auto SDK on the device.</li> |
| 343 | <li>Select your app from the list of available services.</li> |
| 344 | </ol> |
| 345 | |
| 346 | <p>The customized UI for your app appears on the client. You can navigate the content |
| 347 | library and play media. If your app provides app-specific actions, these actions appear |
| 348 | in the UI controls.</p> |
| 349 | |
| 350 | |
| 351 | <h2 id="running" style="margin-top:30px">Running Your App on Android Auto</h2> |
| 352 | |
| 353 | <p>Media apps are available on the Google Play Store for compatible Android devices. |
| 354 | When users connect their Android device to a compatible vehicle, the |
| 355 | Android Auto media client shows a list of all the Android apps installed on the phone |
| 356 | that implement the media service interfaces.</p> |
| 357 | |
| 358 | <p>When users select one of these apps, the Android Auto media client uses the app’s |
| 359 | service to respond to user input and invoke the methods in the media service interfaces |
| 360 | to build the UI, navigate the content library, and play media.</p> |
| 361 | |
| 362 | <div style="margin-bottom:40px"> </div> |
| 363 | </div> |