| page.title=Android Auto |
| page.viewport_width=970 |
| fullpage=true |
| no_footer_links=true |
| page.type=about |
| |
| @jd:body |
| |
| <style> |
| .fullpage>#footer, |
| #jd-content>.content-footer.wrap { |
| display:none; |
| } |
| </style> |
| |
| <style> |
| #footer { |
| display: none; |
| } |
| .content-footer { |
| display: none; |
| } |
| #hero-height { |
| height:calc(100% - 100px); |
| } |
| .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; |
| } |
| .auto-img-shot-cols { |
| position:absolute; |
| top:5px; |
| left:2px; |
| z-index:1; |
| } |
| </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">Entertainment and services on your dashboard</div> |
| <div class="landing-hero-description"> |
| <p style="width:450px">Display and control your handheld app in vehicles. |
| Build apps with easy-to-use UI templates that |
| let users keep their eyes on the road.</p> |
| </div> |
| |
| <div class="landing-body"> |
| <a href="{@docRoot}auto/overview.html" class="landing-button landing-primary" |
| style="margin-top:40px;font-weight:300"> |
| Developer Overview |
| </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">Create Experiences for the Car</div> |
| </div> |
| |
| <div class="landing-body"> |
| <p>Android Auto provides APIs and tools that your existing apps can leverage to run |
| on any compatible vehicle.</p> |
| </div> |
| |
| <div class="cols"> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> |
| <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/01_a_maps.png" /> |
| </div> |
| </div> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> |
| <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/01_b_now.png" /> |
| </div> |
| </div> |
| </div> |
| |
| <div class="landing-body"> |
| <p>When users connect their Android phone to an Android Auto enabled vehicle, the |
| system shows an interface that lets users select compatible apps and services.</p> |
| </p> |
| </div> |
| |
| </div> <!-- end .wrap --> |
| </div> <!-- end .landing-section --> |
| |
| |
| <div class="landing-section"> |
| <div class="wrap"> |
| <div class="landing-section-header"> |
| <div class="landing-h1">One Platform</div> |
| </div> |
| |
| <div class="landing-body"> |
| <p>You can easily adapt existing apps for Android Auto and use many of the APIs you |
| already know.</p> |
| </div> |
| |
| <div class="cols"> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> |
| <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/02_a_notif.gif" /> |
| </div> |
| </div> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> |
| <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/02_b_switcher.gif" /> |
| </div> |
| </div> |
| </div> |
| |
| <div class="landing-body"> |
| <p>Write your apps only once, without having |
| to worry about vehicle-specific hardware differences like screen resolution, software |
| interfaces, knobs and touch controls. Your app runs the same on any compatible |
| vehicle.</p> |
| </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">Minimizing Distraction</div> |
| </div> |
| |
| <div class="landing-body"> |
| <p>We designed Android Auto to minimize driver distraction. Android Auto provides UI |
| templates for several app categories. These templates define the user interaction model |
| for any app and follow international best practices for reducing driver distraction.</p> |
| </div> |
| |
| <div class="cols"> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> |
| <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/03_a_musict.png" /> |
| </div> |
| </div> |
| <div class="col-8"> |
| <div class="auto-img-container-cols"> |
| <img class="auto-img-frame-cols" src="{@docRoot}auto/images/assets/00_frame.png" /> |
| <img class="auto-img-shot-cols" src="{@docRoot}auto/images/assets/03_b_voice.gif" /> |
| </div> |
| </div> |
| </div> |
| |
| <div class="landing-body"> |
| <p>You can customize these templates to fit your brand and link them to your app’s |
| content and functionality, instead of building new UIs and testing them for driver |
| distraction, which is a lengthy and costly process.</p> |
| <p>Android Auto locks any device that users connect to a compatible vehicle, so drivers |
| interact with the device using voice actions and the vehicle’s input controls.</p> |
| </div> |
| |
| </div> <!-- end .wrap --> |
| </div> <!-- end .landing-section --> |
| |
| |
| <div class="landing-section" > |
| <div class="wrap"> |
| <div class="landing-section-header"> |
| <div class="landing-h1">Developer Stories</div> |
| </div> |
| |
| <div class="landing-body"> |
| <p>We're working with developers to bring many popular apps to Android Auto:</p> |
| <p> |
| |
| </p> |
| </div> |
| |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/apps/iheartradio.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/apps/joyride.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/apps/mlb.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/apps/pandora.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/apps/pocketcasts.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| </div> |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/apps/songza.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/apps/spotify.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/apps/stitcher.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/apps/tunein.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/apps/umano.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| </div> |
| |
| </div> <!-- end .wrap --> |
| </div> <!-- end .landing-section --> |
| |
| |
| <div class="landing-section" style="background-color:#f5f5f5"> |
| <div class="wrap"> |
| <div class="landing-section-header"> |
| <div class="landing-pre-h1">Coming soon</div> |
| <div class="landing-h1">Android Auto SDK</div> |
| <div style="text-align:center;margin-top:20px;font-size:14pt;margin-bottom:-5px"> |
| <a href="https://docs.google.com/a/google.com/forms/d/1ANgYOoYLkfyZ2JRPSU34Nep5yNaU-Ha2syXJ9b4xLrA/viewform">Sign up for updates</a> |
| </div> |
| </div> |
| |
| <div class="landing-body"> |
| <p>In the coming months, we’ll be releasing the Android Auto SDK, which includes APIs |
| and tools to make your existing apps compatible with Android Auto. The first version |
| of the SDK will provide templates and APIs for music, podcast, live radio, and audio |
| news apps, as well as limited voice actions.</p> |
| <p style="margin-bottom:40px"> |
| Future versions of the Android Auto SDK will include support for a selection of |
| Android notifications, additional voice actions, and templates and APIs for |
| messaging, communication, local search, and more.</p> |
| |
| <a target="_blank" href="http://g.co/androidautodev"> |
| <img class="landing-social-image" src="//www.google.com/images/icons/product/gplus-128.png" alt="+Android Auto Developers"> |
| </a> |
| <p style="margin-bottom:5px">G+ Community</p> |
| <p class="landing-small"> |
| Join the Android Auto developer community on Google+ to stay involved, get the |
| latest updates, and exchange experiences with other developers. |
| <a target="_blank" href="http://g.co/androidautodev">+Android Auto Developers</a> |
| </p> |
| </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"> |
| <p style="margin-bottom:20px"> |
| Android Auto is coming soon to new cars from these manufacturers: |
| </p> |
| </div> |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/acura.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/audi.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/bentley.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/chevrolet.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/chrysler.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| </div> |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/datsun.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/fiat.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/honda.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/hyundai.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/infinity.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| </div> |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/kia.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/maserati.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/mazda.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/mercedesbenz.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/mitsubishi.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| </div> |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/nissan.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/opel.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/renault.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/seat.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/skoda.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| </div> |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/subaru.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/suzuki.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/volkswagen.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/auto/volvo.png" |
| width="120" height="120" class="img-logo" /> |
| </div> |
| <div class="col-5"> |
| <!--<img src="/auto/images/logos/auto/skoda.png" |
| width="120" height="120" class="img-logo" />--> |
| </div> |
| </div> |
| |
| <div class="landing-body landing-align-center"> |
| <p style="margin-top:80px;margin-bottom:20px"> |
| Android Auto is also coming soon to aftermarket systems from these manufacturers: |
| </p> |
| </div> |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/alpine.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/clarion.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/cloudcar.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/delphi.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/freescale.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| </div> |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/fujitsuten.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/harman.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/jvc.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/kenwood.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/lg.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| </div> |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/panasonic.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/parrot.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/pioneer.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/renesas.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/symphonyteleca.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| </div> |
| <div class="cols"> |
| <div class="col-5"> |
| <img src="/auto/images/logos/hard/texasinstruments.png" |
| width="120" height="120" class="img-logo-thin" /> |
| </div> |
| <div class="col-5"> |
| <!--<img src="/auto/images/logos/hard/.png" |
| width="120" height="120" class="img-logo-thin" />--> |
| </div> |
| <div class="col-5"> |
| <!--<img src="/auto/images/logos/hard/.png" |
| width="120" height="120" class="img-logo-thin" />--> |
| </div> |
| <div class="col-5"> |
| <!--<img src="/auto/images/logos/hard/.png" |
| width="120" height="120" class="img-logo-thin" />--> |
| </div> |
| <div class="col-5"> |
| <!--<img src="/auto/images/logos/hard/.png" |
| width="120" height="120" class="img-logo-thin" />--> |
| </div> |
| </div> |
| </div> <!-- end .wrap --> |
| </div> <!-- end .landing-section --> |
| |
| </div> <!-- end .landing-rest-of-page --> |
| |
| |
| <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement"> |
| <div class="layout-content-col col-16" style="padding-top:4px"> |
| <style>#___plusone_0 {float:right !important;}</style> |
| <div class="g-plusone" data-size="medium"></div> |
| </div> |
| </div> |
| <div id="footer" class="wrap" style="width:940px;position:relative;top:-35px;z-index:-1"> |
| <div id="copyright"> |
| Except as noted, this content is |
| licensed under <a href="http://creativecommons.org/licenses/by/2.5/"> |
| Creative Commons Attribution 2.5</a>. For details and |
| restrictions, see the <a href="/license.html">Content |
| License</a>. |
| </div> |
| </div> |
| |
| |
| </div> <!-- end landing-body-content --> |
| |
| <script> |
| $("a.landing-down-arrow").on("click", function(e) { |
| $("body").animate({ |
| scrollTop: $(".auto-hero").height() + 120 |
| }, 1000, "easeOutQuint"); |
| e.preventDefault(); |
| }); |
| </script> |