| page.title=Android Auto |
| page.viewport_width=970 |
| fullpage=true |
| no_footer_links=true |
| page.type=about |
| page.image=/images/cards/android-auto_2x.png |
| nonavpage=true |
| |
| @jd:body |
| |
| <style> |
| .fullpage>#footer, |
| #jd-content>.content-footer.wrap { |
| display:none; |
| } |
| .img-logo { |
| margin:0 auto; |
| display:block; |
| margin-bottom:-28px !important; |
| } |
| .img-logo-thin { |
| margin:0 auto; |
| display:block; |
| margin-bottom:-55px !important; |
| } |
| .col-5 { |
| width:170px; |
| } |
| .auto-img-container-cols { |
| position:relative; |
| margin-bottom:25px; |
| margin-top:25px; |
| } |
| .auto-img-frame-cols { |
| z-index:2; |
| position:relative; |
| width:460px; |
| } |
| .auto-img-shot-cols { |
| width:447px; |
| position:absolute; |
| top:8px; |
| left:7px; |
| z-index:1; |
| } |
| .sdk-link { |
| font-size:16px; |
| padding-left:5px; |
| padding-right:15px; |
| } |
| .sdk-link-title { |
| font-size:18px; |
| padding-left:5px; |
| padding-right:15px; |
| } |
| .sdk-link-desc { |
| font-size:14px; |
| padding-left:5px; |
| padding-right:15px; |
| } |
| .cols-leftp { |
| padding-left:95px; |
| } |
| </style> |
| |
| |
| |
| |
| |
| <div class="landing-body-content"> |
| <div class="landing-hero-container"> |
| |
| <div id="hero-height" class="landing-section auto-hero"> |
| <div class="landing-hero-scrim"></div> |
| <div class="landing-hero-wrap"> |
| <div class="vertical-center-outer"> |
| <div class="vertical-center-inner"> |
| |
| <div class="col-10"> |
| <div class="landing-section-header"> |
| <div class="landing-h1 hero">Android Auto</div> |
| <div class="landing-subhead hero">Audio entertainment and |
| messaging services in the car.</div> |
| <div class="landing-hero-description"> |
| <p style="width:450px">Let drivers listen to and control |
| content in your music and other audio apps. Allow drivers to |
| hear and respond to your messaging service via the |
| car's controls and screen.</p> |
| </div> |
| |
| <div class="landing-body" style="margin-top:40px;"> |
| <a href="{@docRoot}training/auto/index.html" |
| class="landing-button landing-primary"> |
| Get Started |
| </a> |
| <a href="https://www.youtube.com/watch?v=ctiaVxgclsg" class="video-shadowbox-button white" |
| style="margin-left:40px"> |
| Watch the Intro Video |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> <!-- end .wrap --> |
| |
| <div class="landing-scroll-down-affordance"> |
| <a class="landing-down-arrow" href="#android-in-car"> |
| <img src="{@docRoot}wear/images/carrot.png" alt="Scroll down to read more"> |
| </a> |
| </div> |
| </div> <!-- end .landing-section .landing-hero --> |
| </div> <!-- end .landing-hero-container --> |
| |
| <div class="landing-rest-of-page"> |
| |
| <div class="landing-section landing-gray-background" id="android-in-car"> |
| <div class="wrap"> |
| <div class="landing-section-header"> |
| <div class="landing-h1">Extending Android to Cars</div> |
| <div class="landing-subhead">Android Auto brings the Android |
| platform into the car with a user interface that's optimized for driving.</div> |
| </div> |
| |
| <div class="landing-body"> |
| <div class="cols"> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> |
| <img class="auto-img-shot-cols" src="/auto/images/assets/landing/01.gif" /> |
| </div> |
| </div> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> |
| <img class="auto-img-shot-cols" src="/auto/images/assets/landing/02.gif" /> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> <!-- end .wrap --> |
| </div> <!-- end .landing-section --> |
| |
| <div class="landing-section"> |
| <div class="wrap"> |
| <div class="landing-section-header"> |
| <div class="landing-h1">Build for One Platform</div> |
| <div class="landing-subhead">Create apps with the Android APIs |
| you’re familiar with and extend them to cars. |
| </div> |
| </div> |
| |
| <div class="landing-body"> |
| <div class="cols"> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> |
| <img class="auto-img-shot-cols" src="/auto/images/assets/landing/05.png" /> |
| </div> |
| </div> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> |
| <img class="auto-img-shot-cols" src="/auto/images/assets/landing/06.png" /> |
| </div> |
| </div> |
| </div> |
| <p>Write your apps without having to worry about vehicle-specific |
| hardware differences like screen resolution, software interfaces, |
| knobs, and touch controls. Your users get the same experience on any |
| compatible vehicle such as a consistent app launcher and system |
| events such as notifications.</p> |
| </div> |
| </div> <!-- end .wrap --> |
| </div> <!-- end .landing-section --> |
| |
| <div class="landing-section" style="background-color:#f5f5f5" id="developing-for-auto"> |
| <div class="wrap"> |
| <div class="landing-section-header"> |
| <div class="landing-pre-h1">Now Available</div> |
| <div class="landing-h1">Developing for Android Auto</div> |
| <div class="landing-subhead">The APIs for building Auto-enabled apps |
| are available now! When connected to compatible vehicles, apps on |
| handheld devices running Android 5.0 or higher can communicate |
| with Android Auto.</div> |
| </div> |
| |
| <div class="landing-body"> |
| <div class="cols"> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> |
| <img class="auto-img-shot-cols" src="/auto/images/assets/landing/03.gif" /> |
| </div> |
| <div class="landing-h3">Play Music on the Road from Your App</div> |
| <p class="landing-small" style="padding-left:0px; padding-top:15px;"> |
| Extend audio apps such as music, radio, and audiobook players |
| into the car. Build apps that let users browse and play their |
| music in the car.<br><a href="{@docRoot}training/auto/audio/index.html">Learn how to build audio apps</a> |
| </p> |
| </div> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" /> |
| <img class="auto-img-shot-cols" src="/auto/images/assets/landing/04.png" /> |
| </div> |
| <div class="landing-h3">Keep Users Connected with In-Vehicle Messaging</div> |
| <p class="landing-small" style="padding-left:0px; padding-top:15px;"> |
| Create messaging apps that receive incoming notifications, |
| read messages via text-to-speech, and let users reply by voice |
| input in the car.<br><a href="{@docRoot}training/auto/messaging/index.html">Learn how to build messaging apps</a> |
| </p> |
| </div> |
| </div> |
| </div> |
| </div> <!-- end .wrap --> |
| </div> <!-- end .landing-section --> |
| |
| <div class="landing-section landing-gray-background" > |
| <div class="wrap"> |
| <div class="landing-section-header"> |
| <div class="landing-h1">See What Others Have Done</div> |
| <div class="landing-subhead">We're working with developers to bring many popular apps |
| to Android Auto</div> |
| </div> |
| <div class="landing-body"> |
| <div class="cols"> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/iheartradio.png" |
| width="160" height="160" class="img-logo" /> |
| </div> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/joyride.png" |
| width="160" height="160" class="img-logo" /> |
| </div> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/kik.png" |
| width="120" height="120" class="img-logo" style="margin-top:30px" /> |
| </div> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/tunein.png" |
| width="160" height="160" class="img-logo" |
| /> |
| </div> |
| </div> |
| |
| <div class="cols"> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/talkray.png" |
| width="120" height="44" class="img-logo" style="margin-top:40px" |
| /> |
| </div> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/icq.png" |
| width="150" height="53" class="img-logo" style="margin-top:40px" |
| /> |
| </div> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/stitcher.png" |
| width="160" height="160" class="img-logo" style="margin-top:-20px" |
| /> |
| </div> |
| <div class="col-4"> |
| <img src="/auto/images/logos/apps/pocketcasts.png" |
| width="160" height="160" class="img-logo" style="margin-top:-10px" |
| /> |
| </div> |
| </div> |
| |
| <div class="cols"> |
| <div class="col-4"> |
| <img src="/auto/images/logos/apps/threema.png" |
| width="100" height="91" class="img-logo" style="margin-top:30px" |
| /> |
| </div> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/skype.png" |
| width="160" height="70" class="img-logo" style="margin-top:40px" |
| /> |
| </div> |
| <div class="col-4"> |
| <img src="/auto/images/logos/apps/spotify.png" |
| width="160" height="160" class="img-logo" /> |
| </div> |
| <div class="col-4"> |
| <img src="/auto/images/logos/apps/textplus.png" |
| width="120" height="24" class="img-logo" style="margin-top:60px" |
| /> |
| </div> |
| </div> |
| |
| <div class="cols"> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/contacts.png" |
| width="160" height="160" class="img-logo" style="margin-left:140px" |
| /> |
| </div> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/textme.png" |
| width="80" height="80" class="img-logo" style="margin-top:30px;margin-left:200px" |
| /> |
| </div> |
| <div class="col-4"> |
| <img src="{@docRoot}auto/images/logos/apps/whatsapp.png" |
| width="120" height="120" class="img-logo" style="margin-top:10px;margin-left:180px" /> |
| </div> |
| </div> |
| |
| <div class="cols" style="margin-top:60px"> |
| |
| <div class="col-4"> |
| <img src="/auto/images/logos/apps/npr.png" |
| width="100" height="128" class="img-logo" /> |
| </div> |
| <div class="col-8"><p style="margin-top:0px"><em> |
| "Android Auto connects NPR One listeners to a personalized stream |
| of public radio news and stories to catch up on in the car. It's |
| an engaging and driver-safe user experience that was developed |
| using the media APIs provided in Android 5.0. The available |
| development tools made the integration and testing process simple |
| for launching in a short period of time."</em></p> |
| </div> |
| </div> |
| </div> |
| </div> <!-- end .wrap --> |
| </div> <!-- end .landing-section --> |
| |
| |
| <div class="landing-section landing-white-background"> |
| <div class="wrap"> |
| <div class="landing-section-header"> |
| <div class="landing-h1">Building an Ecosystem</div> |
| </div> |
| <div class="landing-body landing-align-center"> |
| <div class="landing-subhead"> |
| Android Auto is coming soon to new cars from these manufacturers |
| </div> |
| </div> |
| |
| <div class="cols cols-leftp"> |
| <div class="col-5"> |
| <a href="http://www.abarth.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/abarth.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.acura.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/acura.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.alfaromeo.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/alpharomeo.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.audi.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/audi.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| </div> |
| |
| <div class="cols cols-leftp"> |
| <div class="col-5"> |
| <a href="http://www.bentleymotors.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/bentley.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.buick.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/buick.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.cadillac.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/cadillac.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.chevrolet.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/chevrolet.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| </div> |
| |
| <div class="cols cols-leftp"> |
| <div class="col-5"> |
| <a href="http://www.chrysler.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/chrysler.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.citroen.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/citroen.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.dodge.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/dodge.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.driveds.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/citroen_ds.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| </div> |
| |
| <div class="cols cols-leftp"> |
| <div class="col-5"> |
| <a href="http://www.fiat.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/fiat.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.ford.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/ford.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.gmc.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/gmc.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.holden.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/holden.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| </div> |
| |
| <div class="cols cols-leftp"> |
| <div class="col-5"> |
| <a href="http://www.honda.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/honda.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.hyundai.com"> |
| <img src="{@docRoot}auto/images/logos/auto/hyundai.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.infiniti.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/infinity.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.jeep.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/jeep.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| </div> |
| |
| <div class="cols cols-leftp"> |
| <div class="col-5"> |
| <a href="http://www.kia.com/worldwide/"> |
| <img src="{@docRoot}auto/images/logos/auto/kia.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.mahindra.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/mahindra.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.maserati.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/maserati.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.mazda.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/mazda.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| </div> |
| |
| <div class="cols cols-leftp"> |
| <div class="col-5"> |
| <a href="http://www.mitsubishi-motors.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/mitsubishi.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.nissan-global.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/nissan.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.opel.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/opel.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.peugeot.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/peugeot.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| </div> |
| |
| <div class="cols cols-leftp"> |
| <div class="col-5"> |
| <a href="http://www.ramtrucks.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/ram.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.renault.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/renault.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.seat.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/seat.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.skoda-auto.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/skoda.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| </div> |
| |
| <div class="cols cols-leftp"> |
| <div class="col-5"> |
| <a href="http://www.smotor.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/ssangyong.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.subaru-global.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/subaru.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.globalsuzuki.com/automobile/"> |
| <img src="{@docRoot}auto/images/logos/auto/suzuki.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.vauxhall.co.uk/"> |
| <img src="{@docRoot}auto/images/logos/auto/vauxhall.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| </div> |
| |
| <div class="cols cols-leftp"> |
| <div class="col-5"></div> |
| <div class="col-5"> |
| <a href="http://www.volkswagen.com/"> |
| <img src="{@docRoot}auto/images/logos/auto/volkswagen.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"> |
| <a href="http://www.volvocars.com/intl"> |
| <img src="{@docRoot}auto/images/logos/auto/volvo.png" |
| width="120" height="120" class="img-logo" /> |
| </a> |
| </div> |
| <div class="col-5"></div> |
| |
| </div> |
| </div> |
| </div> |
| |
| <div class="landing-section landing-red-background"> |
| <div class="wrap"> |
| <div class="landing-section-header"> |
| <div class="landing-h1 landing-align-left">Get Started with Android Auto</div> |
| |
| <div class="landing-subhead landing-subhead-red"> |
| <p> |
| Set up your development environment and start working with the APIs. |
| We’re excited about the experiences you'll create and can't |
| wait to see what you do next.</p> |
| </div> |
| </div> |
| <div class="landing-body"> |
| <a href="{@docRoot}training/auto/index.html" |
| class="landing-button landing-primary" style="margin-top: 20px;"> |
| Get Started |
| </a> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <script> |
| $("a.landing-down-arrow").on("click", function(e) { |
| $("body").animate({ |
| scrollTop: $(".auto-hero").height() + 120 |
| }, 1000, "easeOutQuint"); |
| e.preventDefault(); |
| }); |
| </script> |
| |
| </div> <!-- end landing-body-content --> |