1 page.title=Android Auto 2 page.viewport_width=970 3 fullpage=true 4 no_footer_links=true 5 page.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 69 70 71 <div class="landing-body-content"> 72 <div class="landing-hero-container"> 73 74 <div id="hero-height" class="landing-section auto-hero"> 75 <div class="landing-hero-scrim"></div> 76 <div class="landing-hero-wrap"> 77 <div class="vertical-center-outer"> 78 <div class="vertical-center-inner"> 79 80 <div class="col-10"> 81 <div class="landing-section-header"> 82 <div class="landing-h1 hero">Android Auto</div> 83 <div class="landing-subhead hero">Audio entertainment and 84 messaging services in the car.</div> 85 <div class="landing-hero-description"> 86 <p style="width:450px">Let drivers listen to and control 87 content in your music and other audio apps. Allow drivers to 88 hear and respond to your messaging service via the 89 car's controls and screen.</p> 90 </div> 91 92 <div class="landing-body" style="margin-top:40px;"> 93 <a href="{@docRoot}training/auto/index.html" 94 class="landing-button landing-primary"> 95 Get Started 96 </a> 97 <a href="https://www.youtube.com/watch?v=ctiaVxgclsg" class="video-shadowbox-button white" 98 style="margin-left:40px"> 99 Watch the Intro Video 100 </a> 101 </div> 102 </div> 103 </div> 104 </div> 105 </div> <!-- end .wrap --> 106 107 <div class="landing-scroll-down-affordance"> 108 <a class="landing-down-arrow" href="#android-in-car"> 109 <img src="{@docRoot}wear/images/carrot.png" alt="Scroll down to read more"> 110 </a> 111 </div> 112 </div> <!-- end .landing-section .landing-hero --> 113 </div> <!-- end .landing-hero-container --> 114 115 <div class="landing-rest-of-page"> 116 117 <div class="landing-section landing-gray-background" id="android-in-car"> 118 <div class="wrap"> 119 <div class="landing-section-header"> 120 <div class="landing-h1">Extending Android to Cars</div> 121 <div class="landing-subhead">Android Auto brings the Android 122 platform into the car with a user interface that's optimized for driving.</div> 123 </div> 124 125 <div class="landing-body"> 126 <div class="cols"> 127 <div class="col-8"> 128 <div class="auto-img-container-cols"> 129 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 130 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/01.gif" /> 131 </div> 132 </div> 133 <div class="col-8"> 134 <div class="auto-img-container-cols"> 135 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 136 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/02.gif" /> 137 </div> 138 </div> 139 </div> 140 </div> 141 </div> <!-- end .wrap --> 142 </div> <!-- end .landing-section --> 143 144 <div class="landing-section"> 145 <div class="wrap"> 146 <div class="landing-section-header"> 147 <div class="landing-h1">Build for One Platform</div> 148 <div class="landing-subhead">Create apps with the Android APIs 149 youre familiar with and extend them to cars. 150 </div> 151 </div> 152 153 <div class="landing-body"> 154 <div class="cols"> 155 <div class="col-8"> 156 <div class="auto-img-container-cols"> 157 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 158 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/05.png" /> 159 </div> 160 </div> 161 <div class="col-8"> 162 <div class="auto-img-container-cols"> 163 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 164 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/06.png" /> 165 </div> 166 </div> 167 </div> 168 <p>Write your apps without having to worry about vehicle-specific 169 hardware differences like screen resolution, software interfaces, 170 knobs, and touch controls. Your users get the same experience on any 171 compatible vehicle such as a consistent app launcher and system 172 events such as notifications.</p> 173 </div> 174 </div> <!-- end .wrap --> 175 </div> <!-- end .landing-section --> 176 177 <div class="landing-section" style="background-color:#f5f5f5" id="developing-for-auto"> 178 <div class="wrap"> 179 <div class="landing-section-header"> 180 <div class="landing-pre-h1">Now Available</div> 181 <div class="landing-h1">Developing for Android Auto</div> 182 <div class="landing-subhead">The APIs for building Auto-enabled apps 183 are available now! When connected to compatible vehicles, apps on 184 handheld devices running Android 5.0 or higher can communicate 185 with Android Auto.</div> 186 </div> 187 188 <div class="landing-body"> 189 <div class="cols"> 190 <div class="col-8"> 191 <div class="auto-img-container-cols"> 192 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 193 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/03.gif" /> 194 </div> 195 <div class="landing-h3">Play Music on the Road from Your App</div> 196 <p class="landing-small" style="padding-left:0px; padding-top:15px;"> 197 Extend audio apps such as music, radio, and audiobook players 198 into the car. Build apps that let users browse and play their 199 music in the car.<br><a href="{@docRoot}training/auto/audio/index.html">Learn how to build audio apps</a> 200 </p> 201 </div> 202 <div class="col-8"> 203 <div class="auto-img-container-cols"> 204 <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> 205 <img class="auto-img-shot-cols" src="/auto/images/assets/landing/04.png" /> 206 </div> 207 <div class="landing-h3">Keep Users Connected with In-Vehicle Messaging</div> 208 <p class="landing-small" style="padding-left:0px; padding-top:15px;"> 209 Create messaging apps that receive incoming notifications, 210 read messages via text-to-speech, and let users reply by voice 211 input in the car.<br><a href="{@docRoot}training/auto/messaging/index.html">Learn how to build messaging apps</a> 212 </p> 213 </div> 214 </div> 215 </div> 216 </div> <!-- end .wrap --> 217 </div> <!-- end .landing-section --> 218 219 <div class="landing-section landing-gray-background" > 220 <div class="wrap"> 221 <div class="landing-section-header"> 222 <div class="landing-h1">See What Others Have Done</div> 223 <div class="landing-subhead">We're working with developers to bring many popular apps 224 to Android Auto</div> 225 </div> 226 <div class="landing-body"> 227 <div class="cols"> 228 <div class="col-4"> 229 <img src="{@docRoot}auto/images/logos/apps/iheartradio.png" 230 width="160" height="160" class="img-logo" /> 231 </div> 232 <div class="col-4"> 233 <img src="{@docRoot}auto/images/logos/apps/joyride.png" 234 width="160" height="160" class="img-logo" /> 235 </div> 236 <div class="col-4"> 237 <img src="{@docRoot}auto/images/logos/apps/kik.png" 238 width="120" height="120" class="img-logo" style="margin-top:30px" /> 239 </div> 240 <div class="col-4"> 241 <img src="{@docRoot}auto/images/logos/apps/mlb.png" 242 width="160" height="160" class="img-logo" /> 243 </div> 244 </div> 245 246 <div class="cols"> 247 <div class="col-4"> 248 <img src="{@docRoot}auto/images/logos/apps/pandora.png" 249 width="160" height="160" class="img-logo" /> 250 </div> 251 <div class="col-4"> 252 <img src="{@docRoot}auto/images/logos/apps/pocketcasts.png" 253 width="160" height="160" class="img-logo" /> 254 </div> 255 <div class="col-4"> 256 <img src="{@docRoot}auto/images/logos/apps/songza.png" 257 width="160" height="160" class="img-logo" /> 258 </div> 259 <div class="col-4"> 260 <img src="/auto/images/logos/apps/soundcloud.png" 261 width="100" height="100" class="img-logo" 262 style="margin-top:30px" /> 263 </div> 264 </div> 265 266 <div class="cols"> 267 <div class="col-4"> 268 <img src="/auto/images/logos/apps/spotify.png" 269 width="160" height="160" class="img-logo" /> 270 </div> 271 <div class="col-4"> 272 <img src="{@docRoot}auto/images/logos/apps/stitcher.png" 273 width="160" height="160" class="img-logo" /> 274 </div> 275 <div class="col-4"> 276 <img src="/auto/images/logos/apps/TextMe.png" 277 width="100" height="100" class="img-logo" style="margin-top:30px" /> 278 </div> 279 <div class="col-4"> 280 <img src="/auto/images/logos/apps/textplus.png" 281 width="120" height="24" class="img-logo" style="margin-top:70px" /> 282 </div> 283 </div> 284 285 <div class="cols"> 286 <div class="col-4"> 287 <img src="{@docRoot}auto/images/logos/apps/tunein.png" 288 width="160" height="160" class="img-logo" style="margin-left:160px" /> 289 </div> 290 <div class="col-4"> 291 <img src="{@docRoot}auto/images/logos/apps/umano.png" 292 width="160" height="160" class="img-logo" style="margin-left:370px" /> 293 </div> 294 </div> 295 296 <div class="cols" style="margin-top:40px"> 297 <div class="col-4"> 298 <img src="/auto/images/logos/apps/whatsapp.png" 299 width="120" height="120" class="img-logo" /> 300 </div> 301 <div class="col-8"> 302 <p><em> 303 "We were able to get messaging functionality for text 304 implemented easily on Android Auto, with minimal development 305 effort. We're excited to participate in Android Auto which 306 provides a notification interface for the car that is both 307 user-friendly and highly safety-minded."</em></p> 308 </div> 309 </div> 310 311 <div class="cols" style="margin-top:60px"> 312 313 <div class="col-4"> 314 <img src="/auto/images/logos/apps/npr.png" 315 width="100" height="128" class="img-logo" /> 316 </div> 317 <div class="col-8"><p style="margin-top:0px"><em> 318 "Android Auto connects NPR One listeners to a personalized stream 319 of public radio news and stories to catch up on in the car. It's 320 an engaging and driver-safe user experience that was developed 321 using the media APIs provided in Android 5.0. The available 322 development tools made the integration and testing process simple 323 for launching in a short period of time."</em></p> 324 </div> 325 </div> 326 </div> 327 </div> <!-- end .wrap --> 328 </div> <!-- end .landing-section --> 329 330 331 <div class="landing-section landing-white-background"> 332 <div class="wrap"> 333 <div class="landing-section-header"> 334 <div class="landing-h1">Building an Ecosystem</div> 335 </div> 336 <div class="landing-body landing-align-center"> 337 <div class="landing-subhead"> 338 Android Auto is coming soon to new cars from these manufacturers 339 </div> 340 </div> 341 <div class="cols cols-leftp"> 342 <div class="col-5"> 343 <img src="{@docRoot}auto/images/logos/auto/abarth.png" 344 width="120" height="120" class="img-logo" /> 345 </div> 346 <div class="col-5"> 347 <img src="{@docRoot}auto/images/logos/auto/alpharomeo.png" 348 width="120" height="120" class="img-logo" /> 349 </div> 350 <div class="col-5"> 351 <img src="{@docRoot}auto/images/logos/auto/acura.png" 352 width="120" height="120" class="img-logo" /> 353 </div> 354 <div class="col-5"> 355 <img src="{@docRoot}auto/images/logos/auto/audi.png" 356 width="120" height="120" class="img-logo" /> 357 </div> 358 </div> 359 <div class="cols cols-leftp"> 360 <div class="col-5"> 361 <img src="{@docRoot}auto/images/logos/auto/bentley.png" 362 width="120" height="120" class="img-logo" /> 363 </div> 364 <div class="col-5"> 365 <img src="{@docRoot}auto/images/logos/auto/chevrolet.png" 366 width="120" height="120" class="img-logo" /> 367 </div> 368 <div class="col-5"> 369 <img src="{@docRoot}auto/images/logos/auto/chrysler.png" 370 width="120" height="120" class="img-logo" /> 371 </div> 372 <div class="col-5"> 373 <img src="{@docRoot}auto/images/logos/auto/dodge.png" 374 width="120" height="120" class="img-logo" /> 375 </div> 376 </div> 377 <div class="cols cols-leftp"> 378 <div class="col-5"> 379 <img src="{@docRoot}auto/images/logos/auto/fiat.png" 380 width="120" height="120" class="img-logo" /> 381 </div> 382 <div class="col-5"> 383 <img src="{@docRoot}auto/images/logos/auto/ford.png" 384 width="120" height="120" class="img-logo" /> 385 </div> 386 <div class="col-5"> 387 <img src="{@docRoot}auto/images/logos/auto/honda.png" 388 width="120" height="120" class="img-logo" /> 389 </div> 390 <div class="col-5"> 391 <img src="{@docRoot}auto/images/logos/auto/hyundai.png" 392 width="120" height="120" class="img-logo" /> 393 </div> 394 </div> 395 <div class="cols cols-leftp"> 396 <div class="col-5"> 397 <img src="{@docRoot}auto/images/logos/auto/infinity.png" 398 width="120" height="120" class="img-logo" /> 399 </div> 400 <div class="col-5"> 401 <img src="{@docRoot}auto/images/logos/auto/jeep.png" 402 width="120" height="120" class="img-logo" /> 403 </div> 404 <div class="col-5"> 405 <img src="{@docRoot}auto/images/logos/auto/kia.png" 406 width="120" height="120" class="img-logo" /> 407 </div> 408 <div class="col-5"> 409 <img src="{@docRoot}auto/images/logos/auto/maserati.png" 410 width="120" height="120" class="img-logo" /> 411 </div> 412 </div> 413 <div class="cols cols-leftp"> 414 <div class="col-5"> 415 <img src="{@docRoot}auto/images/logos/auto/mazda.png" 416 width="120" height="120" class="img-logo" /> 417 </div> 418 <div class="col-5"> 419 <img src="{@docRoot}auto/images/logos/auto/mitsubishi.png" 420 width="120" height="120" class="img-logo" /> 421 </div> 422 <div class="col-5"> 423 <img src="{@docRoot}auto/images/logos/auto/nissan.png" 424 width="120" height="120" class="img-logo" /> 425 </div> 426 <div class="col-5"> 427 <img src="{@docRoot}auto/images/logos/auto/opel.png" 428 width="120" height="120" class="img-logo" /> 429 </div> 430 </div> 431 <div class="cols cols-leftp"> 432 <div class="col-5"> 433 <img src="{@docRoot}auto/images/logos/auto/ram.png" 434 width="120" height="120" class="img-logo" /> 435 </div> 436 <div class="col-5"> 437 <img src="{@docRoot}auto/images/logos/auto/renault.png" 438 width="120" height="120" class="img-logo" /> 439 </div> 440 <div class="col-5"> 441 <img src="{@docRoot}auto/images/logos/auto/seat.png" 442 width="120" height="120" class="img-logo" /> 443 </div> 444 <div class="col-5"> 445 <img src="{@docRoot}auto/images/logos/auto/skoda.png" 446 width="120" height="120" class="img-logo" /> 447 </div> 448 </div> 449 <div class="cols cols-leftp"> 450 <div class="col-5"> 451 <img src="{@docRoot}auto/images/logos/auto/subaru.png" 452 width="120" height="120" class="img-logo" /> 453 </div> 454 <div class="col-5"> 455 <img src="{@docRoot}auto/images/logos/auto/suzuki.png" 456 width="120" height="120" class="img-logo" /> 457 </div> 458 <div class="col-5"> 459 <img src="{@docRoot}auto/images/logos/auto/volkswagen.png" 460 width="120" height="120" class="img-logo" /> 461 </div> 462 <div class="col-5"> 463 <img src="{@docRoot}auto/images/logos/auto/volvo.png" 464 width="120" height="120" class="img-logo" /> 465 </div> 466 </div> 467 </div> 468 </div> 469 470 <div class="landing-section landing-red-background"> 471 <div class="wrap"> 472 <div class="landing-section-header"> 473 <div class="landing-h1 landing-align-left">Get Started with Android Auto</div> 474 475 <div class="landing-subhead landing-subhead-red"> 476 <p> 477 Set up your development environment and start working with the APIs. 478 Were excited about the experiences you'll create and can't 479 wait to see what you do next.</p> 480 </div> 481 </div> 482 <div class="landing-body"> 483 <a href="{@docRoot}training/auto/index.html" 484 class="landing-button landing-primary" style="margin-top: 20px;"> 485 Get Started 486 </a> 487 </div> 488 </div> 489 </div> 490 </div> 491 <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement" 492 style="border-top: none;"> 493 494 <div class="layout-content-col col-16" style="padding-top:4px"> 495 <style>#___plusone_0 {float:right !important;}</style> 496 <div class="g-plusone" data-size="medium"></div> 497 </div> 498 </div> 499 500 <div id="footer" class="wrap" style="width:940px;position:relative;top:-35px;z-index:-1"> 501 <div id="copyright"> 502 Except as noted, this content is 503 licensed under <a href="http://creativecommons.org/licenses/by/2.5/"> 504 Creative Commons Attribution 2.5</a>. For details and 505 restrictions, see the <a href="{@docRoot}license.html">Content 506 License</a>. 507 </div> 508 </div> 509 </div> <!-- end .landing-hero-container --> 510 511 <script> 512 $("a.landing-down-arrow").on("click", function(e) { 513 $("body").animate({ 514 scrollTop: $(".auto-hero").height() + 120 515 }, 1000, "easeOutQuint"); 516 e.preventDefault(); 517 }); 518 </script> 519 520 </div> <!-- end landing-body-content --> 521
