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 | } |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 16 | .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 Cervera | c5f2077 | 2014-06-23 13:11:30 -0700 | [diff] [blame] | 34 | width:380px; |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 35 | z-index:2; |
| 36 | position:relative; |
| 37 | } |
| 38 | .auto-img-shot-cols { |
Ricardo Cervera | c5f2077 | 2014-06-23 13:11:30 -0700 | [diff] [blame] | 39 | width:369px; |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 40 | position:absolute; |
Ricardo Cervera | c5f2077 | 2014-06-23 13:11:30 -0700 | [diff] [blame] | 41 | top:7px; |
| 42 | left:6px; |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 43 | z-index:1; |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 44 | } |
| 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 Cervera | 5fa6754 | 2014-06-15 21:23:16 -0700 | [diff] [blame] | 57 | </style> |
| 58 | |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 59 | <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 Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 72 | <li><a href="#ui">User Interface</a> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 73 | <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 Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 78 | <li><a href="#customizeui">Customizing the UI</a></li> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 79 | </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 Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 90 | <p>Android Auto extends the Android platform into the car. When users connect |
| 91 | their Android handheld device to a compatible vehicle, Android Auto provides a car-optimized |
| 92 | Android experience on the vehicle's screen. Users interact with compatible apps and services |
| 93 | through 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 |
| 96 | having to worry about vehicle-specific hardware differences. You can use many Android APIs and |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 97 | services you are already familiar with. Android Auto provides an easy to use UI model and |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 98 | supports notifications and voice actions:</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 99 | |
| 100 | <dl> |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 101 | <dt style="margin-bottom:10px"><strong>Media UI</strong></dt> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 102 | <dd style="margin-bottom:20px"> |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 103 | Android Auto defines interaction models and car-specific UI patterns for apps. The |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 104 | first version of Android Auto supports media apps, such as music, podcast, live radio, and |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 105 | audio news apps. |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 106 | </dd> |
| 107 | <dt style="margin-bottom:10px"><strong>Notifications</strong></dt> |
| 108 | <dd style="margin-bottom:20px"> |
| 109 | The platform will integrate with existing Android APIs for notifications. Users will get |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 110 | car appropiate notifications from Android apps on the vehicle's screen.</dd> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 111 | |
| 112 | <dt style="margin-bottom:10px"><strong>Voice Actions</strong></dt> |
| 113 | <dd style="margin-bottom:20px"> |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 114 | Android Auto supports a set of voice actions to interact with compatible apps and services. |
| 115 | Apps can respond to the voice actions they're interested in, such as playing a particular song |
| 116 | or taking a note.</dd> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 117 | |
| 118 | <dt style="margin-bottom:10px"><strong>Easy Development Workflow</strong></dt> |
| 119 | <dd style="margin-bottom:20px"> |
| 120 | To extend an existing Android app for Android Auto, you implement a set of interfaces and |
| 121 | services defined in the platform. You can reuse existing functionality and many Android APIs |
| 122 | you already know.</dd> |
| 123 | </dl> |
| 124 | |
| 125 | <p>We’ll release the Android Auto SDK in the coming months, which will let you test your |
| 126 | Android Auto experience on a regular Android device.</p> |
| 127 | |
| 128 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 129 | <h2 id="design">Design</h2> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 130 | |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 131 | <p>Android Auto extends users' digital ecosystem into their cars, allowing drivers to stay |
| 132 | connected to their virtual worlds while staying focused on the road ahead.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 133 | |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 134 | <p>Because driving is the primary activity in the car, any digital experiences should be designed |
| 135 | to complement and augment that activity. They should never demand the user's attention.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 136 | |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 137 | <p>Designing for cars is fundamentally different than designing for phones or tablets, and |
| 138 | requires rethinking how experiences unfold. Because attention is limited and not all tasks are |
| 139 | possible in the car, effective apps leverage the entire set of devices that drivers have, |
| 140 | leveraging the app experience on those devices, outside of the car, to set the stage for simple |
| 141 | experiences 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 |
| 146 | should not. Android Auto was designed to simplify not only the UI, but to optimize interactions |
| 147 | and require less thinking, induce lower cognitive load, and ultimately, be safer. Effective apps |
| 148 | provide just enough information in the minimum amount of time the user needs to glance at it and |
| 149 | return their attention back to the road. Apps should also reduce the number of features to only |
| 150 | those that are safe and drive-appropriate.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 151 | |
| 152 | <p><strong>Predictive, yet predictable</strong>. Android Auto leverages rich, contextual awareness |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 153 | to keep the driver informed about important situations during the drive. Rich, timely help is |
| 154 | combined with predictable functions. Effective apps make use of the patterns for common tasks and |
| 155 | show timely information only when relevant.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 156 | |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 157 | <p><strong>Connected</strong>. By leveraging the user's personal ecosystem of apps and services, |
| 158 | Android Auto promotes a continuous experience from phone to car to other devices. The user's |
| 159 | music, destinations, and virtual ecosystem are always available to augment the drive. Experiences |
| 160 | that leverage personal context and other devices are naturally part of Android Auto.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 161 | |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 162 | <p><strong>Naturally integrated</strong>. Android Auto blends the user's apps with the car, |
| 163 | creating a truly integrated experience that leverages what is unique about each car. By using |
| 164 | the screens, controls, and capabilities of the vehicle, Android Auto feels like an extension of |
| 165 | the car.</p> |
| 166 | |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 167 | |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 168 | |
| 169 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 170 | <h2 id="architecture">Architecture</h2> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 171 | |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 172 | <p>The Android Auto app shows your app's customized UI on the vehicle's screen. To communicate |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 173 | with the Android Auto app, your media app implements a set of media interfaces.</p> |
| 174 | |
| 175 | <div style="width:750px;margin:0 auto"> |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 176 | <img src="{@docRoot}auto/images/figure01.png" alt="" /> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 177 | <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 |
| 185 | playback APIs. The service provides content to the Android Auto app. This is your Android app.</p> |
| 186 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 187 | <p><strong>Android Auto App</strong> - Creates the UI and handles user interactions. |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 188 | This app uses a media client to request content from the media service running in the media |
| 189 | app. 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 |
| 192 | on-screen soft buttons and other components, such as physical buttons or steering |
| 193 | wheel 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 user’s |
| 199 | media collection, presented as a virtual file system with containers (similar to directories) |
| 200 | and items (similar to files).</li> |
| 201 | <li><strong>Playback</strong> - Enables a media client to control media playback and monitor |
| 202 | playback state through callbacks.</li> |
| 203 | </ul> |
| 204 | |
| 205 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 206 | <h2 id="ui">User Interface</h2> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 207 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 208 | <p>The Android Auto app uses a car-specific UI model to display content and user interaction |
| 209 | opportunities. Android Auto provides you with a standard UI designed to minimize driver |
Luan Nguyen | 1ad503d | 2014-10-03 15:48:17 -0700 | [diff] [blame] | 210 | distraction. You do not have to test a custom UI for driver distraction, which is a |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 211 | lengthy and expensive process involving multiple legislations across the globe and different |
| 212 | standards for each vehicle OEM.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 213 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 214 | <p>The UI defines interfaces for browsing, searching, and listening to content from |
| 215 | media apps. You can customize the UI colors, action icons, background images, and more.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 216 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 217 | <h3 id="launchapp">Launcher</h3> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 218 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 219 | <p>The launcher shows all the compatible media apps installed on the user’s |
Luan Nguyen | 1ad503d | 2014-10-03 15:48:17 -0700 | [diff] [blame] | 220 | Android device and lets users select one of them from a scrollable list:</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 221 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 222 | <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 Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 228 | <strong>Figure 2.</strong> The launcher. |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 229 | </p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 230 | </div> |
| 231 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 232 | <h3>Primary App UI</h3> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 233 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 234 | <p>After the user selects a media app, the display shows the primary app UI. |
| 235 | You can customize this UI to show your own icons, app name, and |
| 236 | background images. Figure 3 shows an example of a customized UI:</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 237 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 238 | <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 Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 252 | <p class="img-caption"> |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 253 | <strong>Figure 3.</strong> A customized UI. |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 254 | </p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 255 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 256 | |
| 257 | |
| 258 | <h3 id="useractions">User Actions</h3> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 259 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 260 | <p>The primary app UI supports four main actions on the action bar, four auxiliary actions |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 261 | on the overflow bar, and the <em>Return</em> action. You can use standard controls and customize |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 262 | the actions and icons, as shown in Figure 4.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 263 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 264 | <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 Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 270 | <strong>Figure 4.</strong> Custom extra actions. |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 271 | </p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 272 | </div> |
| 273 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 274 | <h3 id="drawertransitions">Drawer Transitions</h3> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 275 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 276 | <p>For browse actions, the display shows the drawer transition as shown in Figure 5.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 277 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 278 | <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 Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 284 | </div> |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 285 | <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 Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 293 | <strong>Figure 5.</strong> Generic and customized drawers. |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 294 | </p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 295 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 296 | <p>After the transition from the primary app UI to the drawer UI, the drawer |
| 297 | appears on the center. The customized drawer UI shows the media containers and |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 298 | media files provided by the media service in your app. You can also customize drawers |
| 299 | with icons for list items.</p> |
| 300 | |
| 301 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 302 | <h3 id="daynighttransitions">Day and Night Transitions</h3> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 303 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 304 | <p>All the UIs support different color schemes for day and night. |
Ricardo Cervera | 98375d0 | 2014-06-22 14:02:30 -0700 | [diff] [blame] | 305 | The platform provides the state (day or night) and makes adjustments automatically.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 306 | |
Ricardo Cervera | 24552873 | 2014-06-23 17:04:53 -0700 | [diff] [blame] | 307 | <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 Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 325 | <h3 id="customizeui">Customizing UIs</h3> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 326 | |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 327 | <p>To customize the UI, you provide the following app-specific resources and actions |
| 328 | to the Android Auto media client:</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 329 | |
| 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 Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 336 | <p>If provided, the media client automatically uses them in the UI.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 337 | |
| 338 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 339 | <h2 id="devprocess">Development Process</h2> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 340 | |
| 341 | <p class="note"><strong>Note:</strong> When released, the Android Auto SDK will provide |
| 342 | media service interfaces, an APK for handheld devices that simulates the Android Auto |
| 343 | app, 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 |
| 346 | that implements the media service interfaces provided by the Android Auto SDK. These |
| 347 | interfaces define functionality for browsing and finding content, playing media, |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 348 | customizing the UI, and performing app-specific actions.</p> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 349 | |
| 350 | <p>The media service interfaces present the content library as a navigable tree and enable |
Ricardo Cervera | 3c3daf6 | 2014-06-24 10:22:30 -0700 | [diff] [blame] | 351 | clients to play media, get album art, obtain theme resources for the UI, and |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 352 | invoke app-specific actions.</p> |
| 353 | |
| 354 | <p>You don’t have to create a new app for Android Auto: you can extend your existing |
| 355 | Android app with implementations of the media service interfaces. Your service exposes |
| 356 | your app’s media content, theme resources, and app-specific actions using the methods and |
| 357 | data types specified by the media service interfaces. This simplifies the development |
| 358 | cycle 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 |
| 366 | functionality 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 |
| 374 | differences such as screen resolutions, software interfaces, knobs and touch |
| 375 | controls.</p> |
| 376 | |
| 377 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 378 | <h2 id="emulator">Testing Your App on an Android Device</h2> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 379 | |
| 380 | <p>The Android Auto SDK includes an APK with a media client implementation, which is |
| 381 | similar to those available in compatible vehicles. To test your app with this |
| 382 | client:</p> |
| 383 | |
| 384 | <ol> |
| 385 | <li>Get an Android device with a similar form factor to a dashboard screen (like a |
| 386 | Nexus 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 |
| 395 | library and play media. If your app provides app-specific actions, these actions appear |
| 396 | in the UI controls.</p> |
| 397 | |
| 398 | |
Ricardo Cervera | 6d61530 | 2014-06-20 18:42:30 -0700 | [diff] [blame] | 399 | <h2 id="running">Running Your App on Android Auto</h2> |
Robert Ly | 2055529 | 2014-06-13 23:28:19 -0700 | [diff] [blame] | 400 | |
| 401 | <p>Media apps are available on the Google Play Store for compatible Android devices. |
| 402 | When users connect their Android device to a compatible vehicle, the |
| 403 | Android Auto media client shows a list of all the Android apps installed on the phone |
| 404 | that implement the media service interfaces.</p> |
| 405 | |
| 406 | <p>When users select one of these apps, the Android Auto media client uses the app’s |
| 407 | service to respond to user input and invoke the methods in the media service interfaces |
| 408 | to build the UI, navigate the content library, and play media.</p> |
| 409 | |
| 410 | <div style="margin-bottom:40px"> </div> |
| 411 | </div> |