1page.title=Android Auto 2page.viewport_width=970 3fullpage=true 4no_footer_links=true 5page.type=about 6 7@jd:body 8 9<style> 10.fullpage>#footer, 11#jd-content>.content-footer.wrap { 12 display:none; 13} 14#hero-height { 15 height:calc(100% - 100px); 16} 17.img-logo { 18 margin:0 auto; 19 display:block; 20 margin-bottom:-28px !important; 21} 22.img-logo-thin { 23 margin:0 auto; 24 display:block; 25 margin-bottom:-55px !important; 26} 27.col-5 { 28 width:170px; 29} 30.auto-img-container-cols { 31 position:relative; 32 margin-bottom:25px; 33 margin-top:25px; 34} 35.auto-img-frame-cols { 36 z-index:2; 37 position:relative; 38 width:460px; 39} 40.auto-img-shot-cols { 41 width:447px; 42 position:absolute; 43 top:8px; 44 left:7px; 45 z-index:1; 46} 47.sdk-link { 48 font-size:16px; 49 padding-left:5px; 50 padding-right:15px; 51} 52.sdk-link-title { 53 font-size:18px; 54 padding-left:5px; 55 padding-right:15px; 56} 57.sdk-link-desc { 58 font-size:14px; 59 padding-left:5px; 60 padding-right:15px; 61} 62.cols-leftp { 63 padding-left:95px; 64} 65</style> 66 67 68<div class="landing-body-content"> 69 <div class="landing-hero-container"> 70 71 <div id="hero-height" class="landing-section auto-hero"> 72 <div class="landing-hero-scrim"></div> 73 <div class="landing-hero-wrap"> 74 <div class="vertical-center-outer"> 75 <div class="vertical-center-inner"> 76 77 <div class="col-10"> 78 <div class="landing-section-header"> 79 <div class="landing-h1 hero">Android Auto</div> 80 <div class="landing-subhead hero">Entertainment and services on your dashboard</div> 81 <div class="landing-hero-description"> 82 <p style="width:450px">Display and control your Android app in vehicles. 83 Integrate your content with easy-to-use APIs and let Android Auto take 84 care of the rest.</p> 85 </div> 86 87 <div class="landing-body"> 88 <a href="{@docRoot}auto/overview.html" class="landing-button landing-primary" 89 style="margin-top:40px;"> 90 Developer Overview 91 </a> 92 </div> 93 </div> 94 </div> 95 </div> 96 </div> <!-- end .wrap --> 97 98 <div class="landing-scroll-down-affordance"> 99 <a class="landing-down-arrow" href="#android-in-car"> 100 <img src="{@docRoot}wear/images/carrot.png" alt="Scroll down to read more"> 101 </a> 102 </div> 103 </div> <!-- end .landing-section .landing-hero --> 104 </div> <!-- end .landing-hero-container --> 105 106 <div class="landing-rest-of-page"> 107 108 <div class="landing-section landing-gray-background" id="android-in-car"> 109 <div class="wrap"> 110 <div class="landing-section-h1"> 111 <div class="landing-h1">Extending Android to Cars</div> 112 </div> 113 <div class="landing-body"> 114 <div class="landing-subhead">Android Auto brings the Android experience to 115 cars with apps like Google Now and Maps.</div> 116 <div class="cols"> 117 <div class="col-8"> 118 <div class="auto-img-container-cols"> 119 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> 120 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/01_b_now.png" /> 121 </div> 122 </div> 123 <div class="col-8"> 124 <div class="auto-img-container-cols"> 125 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> 126 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/01_a_maps.png" /> 127 </div> 128 </div> 129 </div> 130 131 <p>When users connect their Android phones to compatible vehicles, Android Auto 132 shows a standard interface that lets them start enabled apps and services. 133 Android Auto locks the handheld device when connected, so drivers 134 interact with Auto by using the vehicle's input controls, touch display, and voice.</p> 135 </p> 136 </div> 137 </div> <!-- end .wrap --> 138 </div> <!-- end .landing-section --> 139 140 141 <div class="landing-section"> 142 <div class="wrap"> 143 <div class="landing-section-header"> 144 <div class="landing-h1">Build for One Platform</div> 145 <div class="landing-subhead">Create apps with the Android APIs you're familiar with 146 and extend them to cars with the Auto SDK. 147 </div> 148 </div> 149 150 <div class="landing-body"> 151 152 <div class="cols"> 153 <div class="col-8"> 154 <div class="auto-img-container-cols"> 155 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> 156 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/02_b_switcher.gif" /> 157 </div> 158 </div> 159 <div class="col-8"> 160 <div class="auto-img-container-cols"> 161 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> 162 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/02_a_notif.gif" /> 163 </div> 164 </div> 165 </div> 166 <p>Write your apps without having 167 to worry about vehicle-specific hardware differences like screen resolution, software 168 interfaces, knobs, and touch controls. Your users get the same experience on any compatible 169 vehicle such as a consistent app launcher and system events such as notifications.</p> 170 </div> 171 </div> <!-- end .wrap --> 172 </div> <!-- end .landing-section --> 173 174 175 <div class="landing-section landing-gray-background"> 176 <div class="wrap"> 177 <div class="landing-section-header"> 178 <div class="landing-h1">Minimize Distraction</div> 179 <div class="landing-subhead"> 180 Android Auto displays different UIs for several app categories that let users focus on the road. 181 </div> 182 </div> 183 <div class="landing-body"> 184 <div class="cols"> 185 <div class="col-8"> 186 <div class="auto-img-container-cols"> 187 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> 188 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/03_b_voice.gif" /> 189 </div> 190 </div> 191 <div class="col-8"> 192 <div class="auto-img-container-cols"> 193 <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> 194 <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/03_a_musict.png" /> 195 </div> 196 </div> 197 </div> 198 <p>Android Auto defines the user interaction model for all 199 apps and let you hook into a standard UI with touch and voice controls. The interface 200 is designed to reduce driver distraction while still letting you customize and brand them to properly deliver your content. 201 </p> 202 </div> 203 </div> <!-- end .wrap --> 204 </div> <!-- end .landing-section --> 205 206 <div class="landing-section" style="background-color:#f5f5f5"> 207 <div class="wrap"> 208 <div class="landing-section-header"> 209 <div class="landing-pre-h1">Coming soon</div> 210 <div class="landing-h1">Android Auto SDK</div> 211 </div> 212 213 <div class="landing-body"> 214 <p>In the coming months, we’ll be releasing the Android Auto SDK, which includes APIs 215 and tools to make your existing apps compatible with Android Auto. The first version 216 of the SDK will provide APIs for music, podcast, live radio, and audio 217 news apps, as well as limited voice actions.</p> 218 219 <div class="cols" style="margin-top:40px"> 220 <div class="col-3-wide"> 221 <p class="sdk-link-title">Updates</p> 222 <p class="sdk-link-desc"> 223 Register to receive more information and be notified when the SDK is available. 224 </p> 225 <a class="sdk-link" href="https://docs.google.com/a/google.com/forms/d/1ANgYOoYLkfyZ2JRPSU34Nep5yNaU-Ha2syXJ9b4xLrA/viewform">Sign up for updates</a> 226 </div> 227 <div class="col-3-wide"> 228 <p class="sdk-link-title">Google+ Community</p> 229 <p class="sdk-link-desc"> 230 Stay involved, get updates, and exchange experiences with other developers. 231 </p> 232 <a class="sdk-link" href="http://g.co/androidautodev">Discuss on Google+</a> 233 </div> 234 <div class="col-3-wide"> 235 <p class="sdk-link-title">Developer Overview</p> 236 <p class="sdk-link-desc"> 237 Learn more about developing apps for Android Auto when the SDK is available. 238 </p> 239 <a class="sdk-link" href="{@docRoot}auto/overview.html">Learn about the platform</a> 240 </div> 241 </div> 242 </div> 243 244 </div> <!-- end .wrap --> 245 </div> <!-- end .landing-section --> 246 247 248 249 <div class="landing-section landing-gray-background" > 250 <div class="wrap"> 251 <div class="landing-section-header"> 252 <div class="landing-h1">See What Others Have Done</div> 253 <div class="landing-subhead">We're working with developers to bring many popular apps 254 to Android Auto</div> 255 </div> 256 <div class="landing-body"> 257 <div class="cols"> 258 259 <div class="col-4"> 260 <img src="{@docRoot}auto/images/logos/apps/joyride.png" 261 width="160" height="160" class="img-logo" /> 262 </div> 263 <div class="col-4"> 264 <img src="{@docRoot}auto/images/logos/apps/mlb.png" 265 width="160" height="160" class="img-logo" /> 266 </div> 267 <div class="col-4"> 268 <img src="{@docRoot}auto/images/logos/apps/pandora.png" 269 width="160" height="160" class="img-logo" /> 270 </div> 271 <div class="col-4"> 272 <img src="{@docRoot}auto/images/logos/apps/pocketcasts.png" 273 width="160" height="160" class="img-logo" /> 274 </div> 275 </div> 276 <div class="cols"> 277 <div class="col-4"> 278 <img src="{@docRoot}auto/images/logos/apps/songza.png" 279 width="160" height="160" class="img-logo" /> 280 </div> 281 <div class="col-4"> 282 <img src="{@docRoot}auto/images/logos/apps/stitcher.png" 283 width="160" height="160" class="img-logo" /> 284 </div> 285 <div class="col-4"> 286 <img src="{@docRoot}auto/images/logos/apps/tunein.png" 287 width="160" height="160" class="img-logo" /> 288 </div> 289 <div class="col-4"> 290 <img src="{@docRoot}auto/images/logos/apps/umano.png" 291 width="160" height="160" class="img-logo" /> 292 </div> 293 </div> 294 <div class="cols" style="margin-top:40px"> 295 <div class="col-4"> 296 <img src="{@docRoot}auto/images/logos/apps/iheartradio.png" 297 width="160" height="160" class="img-logo" /> 298 </div> 299 <div class="col-12"> 300 <p><em> 301 "The Android Auto APIs provide an easy way to integrate the most important features and functionality of iHeartRadio’s robust music service into a safety-minded automotive infotainment solution. The process was seamless, utilizing a flexible construct that allowed us to quickly adapt our existing product without losing any of the core experience our listeners know and love."</em></p> 302 </div> 303 </div> 304 <div class="cols" style="margin-top:60px"> 305 306 <div class="col-4"> 307 <img src="{@docRoot}auto/images/logos/apps/spotify.png" 308 width="160" height="160" class="img-logo" /> 309 </div> 310 <div class="col-12"><p style="margin-top:20px"><em> 311 "Android Auto offers Spotify the exciting opportunity to easily enable safe access to millions of songs while driving. We were able to quickly develop for the platform using the new Android voice and media API extensions. As a result, Android users will soon be able to continue the Spotify experience in their cars, including being able to play any song, artist, album or playlist by voice.</em></p> 312 </div> 313 </div> 314 </div> 315 </div> <!-- end .wrap --> 316 </div> <!-- end .landing-section --> 317 318 319 320 321 <div class="landing-section landing-white-background"> 322 <div class="wrap"> 323 <div class="landing-section-header"> 324 <div class="landing-h1">Building an Ecosystem</div> 325 </div> 326 <div class="landing-body landing-align-center"> 327 <div class="landing-subhead"> 328 Android Auto is coming soon to new cars from these manufacturers 329 </div> 330 </div> 331 <div class="cols cols-leftp"> 332 <div class="col-5"> 333 <img src="{@docRoot}auto/images/logos/auto/abarth.png" 334 width="120" height="120" class="img-logo" /> 335 </div> 336 <div class="col-5"> 337 <img src="{@docRoot}auto/images/logos/auto/alpharomeo.png" 338 width="120" height="120" class="img-logo" /> 339 </div> 340 <div class="col-5"> 341 <img src="{@docRoot}auto/images/logos/auto/acura.png" 342 width="120" height="120" class="img-logo" /> 343 </div> 344 <div class="col-5"> 345 <img src="{@docRoot}auto/images/logos/auto/audi.png" 346 width="120" height="120" class="img-logo" /> 347 </div> 348 </div> 349 <div class="cols cols-leftp"> 350 <div class="col-5"> 351 <img src="{@docRoot}auto/images/logos/auto/bentley.png" 352 width="120" height="120" class="img-logo" /> 353 </div> 354 <div class="col-5"> 355 <img src="{@docRoot}auto/images/logos/auto/chevrolet.png" 356 width="120" height="120" class="img-logo" /> 357 </div> 358 <div class="col-5"> 359 <img src="{@docRoot}auto/images/logos/auto/chrysler.png" 360 width="120" height="120" class="img-logo" /> 361 </div> 362 <div class="col-5"> 363 <img src="{@docRoot}auto/images/logos/auto/dodge.png" 364 width="120" height="120" class="img-logo" /> 365 </div> 366 </div> 367 <div class="cols cols-leftp"> 368 <div class="col-5"> 369 <img src="{@docRoot}auto/images/logos/auto/fiat.png" 370 width="120" height="120" class="img-logo" /> 371 </div> 372 <div class="col-5"> 373 <img src="{@docRoot}auto/images/logos/auto/ford.png" 374 width="120" height="120" class="img-logo" /> 375 </div> 376 <div class="col-5"> 377 <img src="{@docRoot}auto/images/logos/auto/honda.png" 378 width="120" height="120" class="img-logo" /> 379 </div> 380 <div class="col-5"> 381 <img src="{@docRoot}auto/images/logos/auto/hyundai.png" 382 width="120" height="120" class="img-logo" /> 383 </div> 384 </div> 385 <div class="cols cols-leftp"> 386 <div class="col-5"> 387 <img src="{@docRoot}auto/images/logos/auto/infinity.png" 388 width="120" height="120" class="img-logo" /> 389 </div> 390 <div class="col-5"> 391 <img src="{@docRoot}auto/images/logos/auto/jeep.png" 392 width="120" height="120" class="img-logo" /> 393 </div> 394 <div class="col-5"> 395 <img src="{@docRoot}auto/images/logos/auto/kia.png" 396 width="120" height="120" class="img-logo" /> 397 </div> 398 <div class="col-5"> 399 <img src="{@docRoot}auto/images/logos/auto/maserati.png" 400 width="120" height="120" class="img-logo" /> 401 </div> 402 </div> 403 <div class="cols cols-leftp"> 404 <div class="col-5"> 405 <img src="{@docRoot}auto/images/logos/auto/mazda.png" 406 width="120" height="120" class="img-logo" /> 407 </div> 408 <div class="col-5"> 409 <img src="{@docRoot}auto/images/logos/auto/mitsubishi.png" 410 width="120" height="120" class="img-logo" /> 411 </div> 412 <div class="col-5"> 413 <img src="{@docRoot}auto/images/logos/auto/nissan.png" 414 width="120" height="120" class="img-logo" /> 415 </div> 416 <div class="col-5"> 417 <img src="{@docRoot}auto/images/logos/auto/opel.png" 418 width="120" height="120" class="img-logo" /> 419 </div> 420 </div> 421 <div class="cols cols-leftp"> 422 <div class="col-5"> 423 <img src="{@docRoot}auto/images/logos/auto/ram.png" 424 width="120" height="120" class="img-logo" /> 425 </div> 426 <div class="col-5"> 427 <img src="{@docRoot}auto/images/logos/auto/renault.png" 428 width="120" height="120" class="img-logo" /> 429 </div> 430 <div class="col-5"> 431 <img src="{@docRoot}auto/images/logos/auto/seat.png" 432 width="120" height="120" class="img-logo" /> 433 </div> 434 <div class="col-5"> 435 <img src="{@docRoot}auto/images/logos/auto/skoda.png" 436 width="120" height="120" class="img-logo" /> 437 </div> 438 </div> 439 <div class="cols cols-leftp"> 440 <div class="col-5"> 441 <img src="{@docRoot}auto/images/logos/auto/subaru.png" 442 width="120" height="120" class="img-logo" /> 443 </div> 444 <div class="col-5"> 445 <img src="{@docRoot}auto/images/logos/auto/suzuki.png" 446 width="120" height="120" class="img-logo" /> 447 </div> 448 <div class="col-5"> 449 <img src="{@docRoot}auto/images/logos/auto/volkswagen.png" 450 width="120" height="120" class="img-logo" /> 451 </div> 452 <div class="col-5"> 453 <img src="{@docRoot}auto/images/logos/auto/volvo.png" 454 width="120" height="120" class="img-logo" /> 455 </div> 456 </div> 457 </div> 458 </div> 459 </div> <!-- end .landing-rest-of-page --> 460 <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement" 461 style="border-top: none;"> 462 <div class="layout-content-col col-16" style="padding-top:4px"> 463 <style>#___plusone_0 {float:right !important;}</style> 464 <div class="g-plusone" data-size="medium"></div> 465 </div> 466 </div> 467 <div id="footer" class="wrap" style="width:940px;position:relative;top:-35px;z-index:-1"> 468 <div id="copyright"> 469 Except as noted, this content is 470 licensed under <a href="http://creativecommons.org/licenses/by/2.5/"> 471 Creative Commons Attribution 2.5</a>. For details and 472 restrictions, see the <a href="{@docRoot}license.html">Content 473 License</a>. 474 </div> 475 </div> 476 </div> <!-- end .landing-hero-container --> 477 478 <script> 479 $("a.landing-down-arrow").on("click", function(e) { 480 $("body").animate({ 481 scrollTop: $(".auto-hero").height() + 120 482 }, 1000, "easeOutQuint"); 483 e.preventDefault(); 484 }); 485 </script> 486 487</div> <!-- end landing-body-content --> 488
