1 page.title=Android Auto 2 page.viewport_width=970 3 fullpage=true 4 no_footer_links=true 5 page.type=about 6 page.image=/images/cards/android-auto_2x.png 7 8 @jd:body 9 10 <style> 11 .fullpage>#footer, 12 #jd-content>.content-footer.wrap { 13 display:none; 14 } 15 .img-logo { 16 margin:0 auto; 17 display:block; 18 margin-bottom:-28px !important; 19 } 20 .img-logo-thin { 21 margin:0 auto; 22 display:block; 23 margin-bottom:-55px !important; 24 } 25 .col-5 { 26 width:170px; 27 } 28 .auto-img-container-cols { 29 position:relative; 30 margin-bottom:25px; 31 margin-top:25px; 32 } 33 .auto-img-frame-cols { 34 z-index:2; 35 position:relative; 36 width:460px; 37 } 38 .auto-img-shot-cols { 39 width:447px; 40 position:absolute; 41 top:8px; 42 left:7px; 43 z-index:1; 44 } 45 .sdk-link { 46 font-size:16px; 47 padding-left:5px; 48 padding-right:15px; 49 } 50 .sdk-link-title { 51 font-size:18px; 52 padding-left:5px; 53 padding-right:15px; 54 } 55 .sdk-link-desc { 56 font-size:14px; 57 padding-left:5px; 58 padding-right:15px; 59 } 60 .cols-leftp { 61 padding-left:95px; 62 } 63 </style> 64 65 66 67 68 69 <div class="landing-body-content"> 70 <div class="landing-hero-container"> 71 72 <div id="hero-height" class="landing-section auto-hero"> 73 <div class="landing-hero-scrim"></div> 74 <div class="landing-hero-wrap"> 75 <div class="vertical-center-outer"> 76 <div class="vertical-center-inner"> 77 78 <div class="col-10"> 79 <div class="landing-section-header"> 80 <div class="landing-h1 hero">Android Auto</div> 81 <div class="landing-subhead hero">Audio entertainment and 82 messaging services in the car.</div> 83 <div class="landing-hero-description"> 84 <p style="width:450px">Let drivers listen to and control 85 content in your music and other audio apps. Allow drivers to 86 hear and respond to your messaging service via the 87 car's controls and screen.</p> 88 </div> 89 90 <div class="landing-body" style="margin-top:40px;"> 91 <a href="{@docRoot}training/auto/index.html" 92 class="landing-button landing-primary"> 93 Get Started 94 </a> 95 <a href="https://www.youtube.com/watch?v=ctiaVxgclsg" class="video-shadowbox-button white" 96 style="margin-left:40px"> 97 Watch the Intro Video 98 </a> 99 </div> 100 </div> 101 </div> 102 </div> 103 </div> <!-- end .wrap --> 104 105 <div class="landing-scroll-down-affordance"> 106 <a class="landing-down-arrow" href="#android-in-car"> 107 <img src="{@docRoot}wear/images/carrot.png" alt="Scroll down to read more"> 108 </a> 109 </div> 110 </div> <!-- end .landing-section .landing-hero --> 111 </div> <!-- end .landing-hero-container --> 112 113 <div class="landing-rest-of-page"> 114 115 <div class="landing-section landing-gray-background" id="android-in-car"> 116 <div class="wrap"> 117 <div class="landing-section-header"> 118 <div class="landing-h1">Extending Android to Cars</div> 119 <div class="landing-subhead">Android Auto brings the Android 120 platform into the car with a user interface that's optimized for driving.</div> 121 </div> 122 123 <div class="landing-body"> 124 <div class="cols"> 125 <div class="col-8"> 126 <div class="auto-img-container-cols"> 127 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 128 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/01.gif" /> 129 </div> 130 </div> 131 <div class="col-8"> 132 <div class="auto-img-container-cols"> 133 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 134 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/02.gif" /> 135 </div> 136 </div> 137 </div> 138 </div> 139 </div> <!-- end .wrap --> 140 </div> <!-- end .landing-section --> 141 142 <div class="landing-section"> 143 <div class="wrap"> 144 <div class="landing-section-header"> 145 <div class="landing-h1">Build for One Platform</div> 146 <div class="landing-subhead">Create apps with the Android APIs 147 youre familiar with and extend them to cars. 148 </div> 149 </div> 150 151 <div class="landing-body"> 152 <div class="cols"> 153 <div class="col-8"> 154 <div class="auto-img-container-cols"> 155 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 156 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/05.png" /> 157 </div> 158 </div> 159 <div class="col-8"> 160 <div class="auto-img-container-cols"> 161 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 162 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/06.png" /> 163 </div> 164 </div> 165 </div> 166 <p>Write your apps without having to worry about vehicle-specific 167 hardware differences like screen resolution, software interfaces, 168 knobs, and touch controls. Your users get the same experience on any 169 compatible vehicle such as a consistent app launcher and system 170 events such as notifications.</p> 171 </div> 172 </div> <!-- end .wrap --> 173 </div> <!-- end .landing-section --> 174 175 <div class="landing-section" style="background-color:#f5f5f5" id="developing-for-auto"> 176 <div class="wrap"> 177 <div class="landing-section-header"> 178 <div class="landing-pre-h1">Now Available</div> 179 <div class="landing-h1">Developing for Android Auto</div> 180 <div class="landing-subhead">The APIs for building Auto-enabled apps 181 are available now! When connected to compatible vehicles, apps on 182 handheld devices running Android 5.0 or higher can communicate 183 with Android Auto.</div> 184 </div> 185 186 <div class="landing-body"> 187 <div class="cols"> 188 <div class="col-8"> 189 <div class="auto-img-container-cols"> 190 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 191 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/03.gif" /> 192 </div> 193 <div class="landing-h3">Play Music on the Road from Your App</div> 194 <p class="landing-small" style="padding-left:0px; padding-top:15px;"> 195 Extend audio apps such as music, radio, and audiobook players 196 into the car. Build apps that let users browse and play their 197 music in the car.<br><a href="{@docRoot}training/auto/audio/index.html">Learn how to build audio apps</a> 198 </p> 199 </div> 200 <div class="col-8"> 201 <div class="auto-img-container-cols"> 202 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 203 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/04.png" /> 204 </div> 205 <div class="landing-h3">Keep Users Connected with In-Vehicle Messaging</div> 206 <p class="landing-small" style="padding-left:0px; padding-top:15px;"> 207 Create messaging apps that receive incoming notifications, 208 read messages via text-to-speech, and let users reply by voice 209 input in the car.<br><a href="{@docRoot}training/auto/messaging/index.html">Learn how to build messaging apps</a> 210 </p> 211 </div> 212 </div> 213 </div> 214 </div> <!-- end .wrap --> 215 </div> <!-- end .landing-section --> 216 217 <div class="landing-section landing-gray-background" > 218 <div class="wrap"> 219 <div class="landing-section-header"> 220 <div class="landing-h1">See What Others Have Done</div> 221 <div class="landing-subhead">We're working with developers to bring many popular apps 222 to Android Auto</div> 223 </div> 224 <div class="landing-body"> 225 <div class="cols"> 226 <div class="col-4"> 227 <img src="{@docRoot}auto/images/logos/apps/iheartradio.png" 228 width="160" height="160" class="img-logo" /> 229 </div> 230 <div class="col-4"> 231 <img src="{@docRoot}auto/images/logos/apps/joyride.png" 232 width="160" height="160" class="img-logo" /> 233 </div> 234 <div class="col-4"> 235 <img src="{@docRoot}auto/images/logos/apps/kik.png" 236 width="120" height="120" class="img-logo" style="margin-top:30px" /> 237 </div> 238 <div class="col-4"> 239 <img src="{@docRoot}auto/images/logos/apps/tunein.png" 240 width="160" height="160" class="img-logo" 241 /> 242 </div> 243 </div> 244 245 <div class="cols"> 246 <div class="col-4"> 247 <img src="{@docRoot}auto/images/logos/apps/talkray.png" 248 width="120" height="44" class="img-logo" style="margin-top:40px" 249 /> 250 </div> 251 <div class="col-4"> 252 <img src="{@docRoot}auto/images/logos/apps/icq.png" 253 width="150" height="53" class="img-logo" style="margin-top:40px" 254 /> 255 </div> 256 <div class="col-4"> 257 <img src="{@docRoot}auto/images/logos/apps/stitcher.png" 258 width="160" height="160" class="img-logo" style="margin-top:-20px" 259 /> 260 </div> 261 <div class="col-4"> 262 <img src="/auto/images/logos/apps/pocketcasts.png" 263 width="160" height="160" class="img-logo" style="margin-top:-10px" 264 /> 265 </div> 266 </div> 267 268 <div class="cols"> 269 <div class="col-4"> 270 <img src="/auto/images/logos/apps/threema.png" 271 width="100" height="91" class="img-logo" style="margin-top:30px" 272 /> 273 </div> 274 <div class="col-4"> 275 <img src="{@docRoot}auto/images/logos/apps/skype.png" 276 width="160" height="70" class="img-logo" style="margin-top:40px" 277 /> 278 </div> 279 <div class="col-4"> 280 <img src="/auto/images/logos/apps/spotify.png" 281 width="160" height="160" class="img-logo" /> 282 </div> 283 <div class="col-4"> 284 <img src="/auto/images/logos/apps/textplus.png" 285 width="120" height="24" class="img-logo" style="margin-top:60px" 286 /> 287 </div> 288 </div> 289 290 <div class="cols"> 291 <div class="col-4"> 292 <img src="{@docRoot}auto/images/logos/apps/contacts.png" 293 width="160" height="160" class="img-logo" style="margin-left:140px" 294 /> 295 </div> 296 <div class="col-4"> 297 <img src="{@docRoot}auto/images/logos/apps/textme.png" 298 width="80" height="80" class="img-logo" style="margin-top:30px;margin-left:200px" 299 /> 300 </div> 301 <div class="col-4"> 302 <img src="{@docRoot}auto/images/logos/apps/whatsapp.png" 303 width="120" height="120" class="img-logo" style="margin-top:10px;margin-left:180px" /> 304 </div> 305 </div> 306 307 <div class="cols" style="margin-top:60px"> 308 309 <div class="col-4"> 310 <img src="/auto/images/logos/apps/npr.png" 311 width="100" height="128" class="img-logo" /> 312 </div> 313 <div class="col-8"><p style="margin-top:0px"><em> 314 "Android Auto connects NPR One listeners to a personalized stream 315 of public radio news and stories to catch up on in the car. It's 316 an engaging and driver-safe user experience that was developed 317 using the media APIs provided in Android 5.0. The available 318 development tools made the integration and testing process simple 319 for launching in a short period of time."</em></p> 320 </div> 321 </div> 322 </div> 323 </div> <!-- end .wrap --> 324 </div> <!-- end .landing-section --> 325 326 327 <div class="landing-section landing-white-background"> 328 <div class="wrap"> 329 <div class="landing-section-header"> 330 <div class="landing-h1">Building an Ecosystem</div> 331 </div> 332 <div class="landing-body landing-align-center"> 333 <div class="landing-subhead"> 334 Android Auto is coming soon to new cars from these manufacturers 335 </div> 336 </div> 337 338 <div class="cols cols-leftp"> 339 <div class="col-5"> 340 <a href="http://www.abarth.com/"> 341 <img src="{@docRoot}auto/images/logos/auto/abarth.png" 342 width="120" height="120" class="img-logo" /> 343 </a> 344 </div> 345 <div class="col-5"> 346 <a href="http://www.acura.com/"> 347 <img src="{@docRoot}auto/images/logos/auto/acura.png" 348 width="120" height="120" class="img-logo" /> 349 </a> 350 </div> 351 <div class="col-5"> 352 <a href="http://www.alfaromeo.com/"> 353 <img src="{@docRoot}auto/images/logos/auto/alpharomeo.png" 354 width="120" height="120" class="img-logo" /> 355 </a> 356 </div> 357 <div class="col-5"> 358 <a href="http://www.audi.com/"> 359 <img src="{@docRoot}auto/images/logos/auto/audi.png" 360 width="120" height="120" class="img-logo" /> 361 </a> 362 </div> 363 </div> 364 365 <div class="cols cols-leftp"> 366 <div class="col-5"> 367 <a href="http://www.bentleymotors.com/"> 368 <img src="{@docRoot}auto/images/logos/auto/bentley.png" 369 width="120" height="120" class="img-logo" /> 370 </a> 371 </div> 372 <div class="col-5"> 373 <a href="http://www.buick.com/"> 374 <img src="{@docRoot}auto/images/logos/auto/buick.png" 375 width="120" height="120" class="img-logo" /> 376 </a> 377 </div> 378 <div class="col-5"> 379 <a href="http://www.cadillac.com/"> 380 <img src="{@docRoot}auto/images/logos/auto/cadillac.png" 381 width="120" height="120" class="img-logo" /> 382 </a> 383 </div> 384 <div class="col-5"> 385 <a href="http://www.chevrolet.com/"> 386 <img src="{@docRoot}auto/images/logos/auto/chevrolet.png" 387 width="120" height="120" class="img-logo" /> 388 </a> 389 </div> 390 </div> 391 392 <div class="cols cols-leftp"> 393 <div class="col-5"> 394 <a href="http://www.chrysler.com/"> 395 <img src="{@docRoot}auto/images/logos/auto/chrysler.png" 396 width="120" height="120" class="img-logo" /> 397 </a> 398 </div> 399 <div class="col-5"> 400 <a href="http://www.citroen.com/"> 401 <img src="{@docRoot}auto/images/logos/auto/citroen.png" 402 width="120" height="120" class="img-logo" /> 403 </a> 404 </div> 405 <div class="col-5"> 406 <a href="http://www.dodge.com/"> 407 <img src="{@docRoot}auto/images/logos/auto/dodge.png" 408 width="120" height="120" class="img-logo" /> 409 </a> 410 </div> 411 <div class="col-5"> 412 <a href="http://www.driveds.com/"> 413 <img src="{@docRoot}auto/images/logos/auto/citroen_ds.png" 414 width="120" height="120" class="img-logo" /> 415 </a> 416 </div> 417 </div> 418 419 <div class="cols cols-leftp"> 420 <div class="col-5"> 421 <a href="http://www.fiat.com/"> 422 <img src="{@docRoot}auto/images/logos/auto/fiat.png" 423 width="120" height="120" class="img-logo" /> 424 </a> 425 </div> 426 <div class="col-5"> 427 <a href="http://www.ford.com/"> 428 <img src="{@docRoot}auto/images/logos/auto/ford.png" 429 width="120" height="120" class="img-logo" /> 430 </a> 431 </div> 432 <div class="col-5"> 433 <a href="http://www.gmc.com/"> 434 <img src="{@docRoot}auto/images/logos/auto/gmc.png" 435 width="120" height="120" class="img-logo" /> 436 </a> 437 </div> 438 <div class="col-5"> 439 <a href="http://www.holden.com/"> 440 <img src="{@docRoot}auto/images/logos/auto/holden.png" 441 width="120" height="120" class="img-logo" /> 442 </a> 443 </div> 444 </div> 445 446 <div class="cols cols-leftp"> 447 <div class="col-5"> 448 <a href="http://www.honda.com/"> 449 <img src="{@docRoot}auto/images/logos/auto/honda.png" 450 width="120" height="120" class="img-logo" /> 451 </a> 452 </div> 453 <div class="col-5"> 454 <a href="http://www.hyundai.com"> 455 <img src="{@docRoot}auto/images/logos/auto/hyundai.png" 456 width="120" height="120" class="img-logo" /> 457 </a> 458 </div> 459 <div class="col-5"> 460 <a href="http://www.infiniti.com/"> 461 <img src="{@docRoot}auto/images/logos/auto/infinity.png" 462 width="120" height="120" class="img-logo" /> 463 </a> 464 </div> 465 <div class="col-5"> 466 <a href="http://www.jeep.com/"> 467 <img src="{@docRoot}auto/images/logos/auto/jeep.png" 468 width="120" height="120" class="img-logo" /> 469 </a> 470 </div> 471 </div> 472 473 <div class="cols cols-leftp"> 474 <div class="col-5"> 475 <a href="http://www.kia.com/worldwide/"> 476 <img src="{@docRoot}auto/images/logos/auto/kia.png" 477 width="120" height="120" class="img-logo" /> 478 </a> 479 </div> 480 <div class="col-5"> 481 <a href="http://www.mahindra.com/"> 482 <img src="{@docRoot}auto/images/logos/auto/mahindra.png" 483 width="120" height="120" class="img-logo" /> 484 </a> 485 </div> 486 <div class="col-5"> 487 <a href="http://www.maserati.com/"> 488 <img src="{@docRoot}auto/images/logos/auto/maserati.png" 489 width="120" height="120" class="img-logo" /> 490 </a> 491 </div> 492 <div class="col-5"> 493 <a href="http://www.mazda.com/"> 494 <img src="{@docRoot}auto/images/logos/auto/mazda.png" 495 width="120" height="120" class="img-logo" /> 496 </a> 497 </div> 498 </div> 499 500 <div class="cols cols-leftp"> 501 <div class="col-5"> 502 <a href="http://www.mitsubishi-motors.com/"> 503 <img src="{@docRoot}auto/images/logos/auto/mitsubishi.png" 504 width="120" height="120" class="img-logo" /> 505 </a> 506 </div> 507 <div class="col-5"> 508 <a href="http://www.nissan-global.com/"> 509 <img src="{@docRoot}auto/images/logos/auto/nissan.png" 510 width="120" height="120" class="img-logo" /> 511 </a> 512 </div> 513 <div class="col-5"> 514 <a href="http://www.opel.com/"> 515 <img src="{@docRoot}auto/images/logos/auto/opel.png" 516 width="120" height="120" class="img-logo" /> 517 </a> 518 </div> 519 <div class="col-5"> 520 <a href="http://www.peugeot.com/"> 521 <img src="{@docRoot}auto/images/logos/auto/peugeot.png" 522 width="120" height="120" class="img-logo" /> 523 </a> 524 </div> 525 </div> 526 527 <div class="cols cols-leftp"> 528 <div class="col-5"> 529 <a href="http://www.ramtrucks.com/"> 530 <img src="{@docRoot}auto/images/logos/auto/ram.png" 531 width="120" height="120" class="img-logo" /> 532 </a> 533 </div> 534 <div class="col-5"> 535 <a href="http://www.renault.com/"> 536 <img src="{@docRoot}auto/images/logos/auto/renault.png" 537 width="120" height="120" class="img-logo" /> 538 </a> 539 </div> 540 <div class="col-5"> 541 <a href="http://www.seat.com/"> 542 <img src="{@docRoot}auto/images/logos/auto/seat.png" 543 width="120" height="120" class="img-logo" /> 544 </a> 545 </div> 546 <div class="col-5"> 547 <a href="http://www.skoda-auto.com/"> 548 <img src="{@docRoot}auto/images/logos/auto/skoda.png" 549 width="120" height="120" class="img-logo" /> 550 </a> 551 </div> 552 </div> 553 554 <div class="cols cols-leftp"> 555 <div class="col-5"> 556 <a href="http://www.smotor.com/"> 557 <img src="{@docRoot}auto/images/logos/auto/ssangyong.png" 558 width="120" height="120" class="img-logo" /> 559 </a> 560 </div> 561 <div class="col-5"> 562 <a href="http://www.subaru-global.com/"> 563 <img src="{@docRoot}auto/images/logos/auto/subaru.png" 564 width="120" height="120" class="img-logo" /> 565 </a> 566 </div> 567 <div class="col-5"> 568 <a href="http://www.globalsuzuki.com/automobile/"> 569 <img src="{@docRoot}auto/images/logos/auto/suzuki.png" 570 width="120" height="120" class="img-logo" /> 571 </a> 572 </div> 573 <div class="col-5"> 574 <a href="http://www.vauxhall.co.uk/"> 575 <img src="{@docRoot}auto/images/logos/auto/vauxhall.png" 576 width="120" height="120" class="img-logo" /> 577 </a> 578 </div> 579 </div> 580 581 <div class="cols cols-leftp"> 582 <div class="col-5"></div> 583 <div class="col-5"> 584 <a href="http://www.volkswagen.com/"> 585 <img src="{@docRoot}auto/images/logos/auto/volkswagen.png" 586 width="120" height="120" class="img-logo" /> 587 </a> 588 </div> 589 <div class="col-5"> 590 <a href="http://www.volvocars.com/intl"> 591 <img src="{@docRoot}auto/images/logos/auto/volvo.png" 592 width="120" height="120" class="img-logo" /> 593 </a> 594 </div> 595 <div class="col-5"></div> 596 597 </div> 598 </div> 599 </div> 600 601 <div class="landing-section landing-red-background"> 602 <div class="wrap"> 603 <div class="landing-section-header"> 604 <div class="landing-h1 landing-align-left">Get Started with Android Auto</div> 605 606 <div class="landing-subhead landing-subhead-red"> 607 <p> 608 Set up your development environment and start working with the APIs. 609 Were excited about the experiences you'll create and can't 610 wait to see what you do next.</p> 611 </div> 612 </div> 613 <div class="landing-body"> 614 <a href="{@docRoot}training/auto/index.html" 615 class="landing-button landing-primary" style="margin-top: 20px;"> 616 Get Started 617 </a> 618 </div> 619 </div> 620 </div> 621 </div> 622 <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement" 623 style="border-top: none;"> 624 625 <div class="layout-content-col col-16" style="padding-top:4px"> 626 <style>#___plusone_0 {float:right !important;}</style> 627 <div class="g-plusone" data-size="medium"></div> 628 </div> 629 </div> 630 631 <div id="footer" class="wrap" style="width:940px;position:relative;top:-35px;z-index:-1"> 632 <div id="copyright"> 633 Except as noted, this content is 634 licensed under <a href="http://creativecommons.org/licenses/by/2.5/"> 635 Creative Commons Attribution 2.5</a>. For details and 636 restrictions, see the <a href="{@docRoot}license.html">Content 637 License</a>. 638 </div> 639 </div> 640 </div> <!-- end .landing-hero-container --> 641 642 <script> 643 $("a.landing-down-arrow").on("click", function(e) { 644 $("body").animate({ 645 scrollTop: $(".auto-hero").height() + 120 646 }, 1000, "easeOutQuint"); 647 e.preventDefault(); 648 }); 649 </script> 650 651 </div> <!-- end landing-body-content --> 652