docs/html/auto/index.jd

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>