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>


    <style>
.fullpage>#footer,
#jd-content>.content-footer.wrap {
  display:none;
}
</style>

<style>
#footer {
  display: none;
}
.content-footer {
  display: none;
}
#hero-height {
  height:calc(100% - 110px);
}
.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;">
                  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-h1">
            <div class="landing-h1">Extending Android to Cars</div>
          </div>
          <div class="landing-body">
            <div class="landing-subhead">Android Auto brings the Android experience to
            cars with apps like Google Now and Maps.</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_b_now.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_a_maps.png" />
                </div>
              </div>
            </div>

            <p>When users connect their Android phones to compatible vehicles, Android Auto
             shows a standard interface that lets them start enabled apps and services.
             Android Auto locks the handheld device when connected, so drivers
            interact with Auto by using the vehicle's input controls, touch display, and voice.</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">Build for One Platform</div>
            <div class="landing-subhead">Create apps with the Android APIs you're familiar with
            and extend them to cars with the Auto SDK.
            </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="{@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 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>
            <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 landing-gray-background">
        <div class="wrap">
          <div class="landing-section-header">
            <div class="landing-h1">Minimize Distraction</div>
            <div class="landing-subhead">
             Standard UI templates for several app categories let users focus on the road. 
            </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="{@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 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>
            <p>These templates define the user interaction model for all
             apps and let you hook into a standard UI with touch and voice controls. The templates
             meet international best practices for reducing driver
             distraction while still letting you customize and brand them to properly deliver your
             content.
             </p>
          </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>
                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-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/joyride.png"
                   width="160" height="160" class="img-logo" />
            </div>
            <div class="col-4">
              <img src="{@docRoot}auto/images/logos/apps/mlb.png"
                   width="160" height="160" class="img-logo" />
            </div>
            <div class="col-4">
              <img src="{@docRoot}auto/images/logos/apps/pandora.png"
                   width="160" height="160" class="img-logo" />
            </div>
            <div class="col-4">
              <img src="{@docRoot}auto/images/logos/apps/pocketcasts.png"
                   width="160" height="160" class="img-logo" />
            </div>
          </div>
          <div class="cols">
            <div class="col-4">
              <img src="{@docRoot}auto/images/logos/apps/songza.png"
                   width="160" height="160" class="img-logo" />
            </div>
            <div class="col-4">
              <img src="{@docRoot}auto/images/logos/apps/stitcher.png"
                   width="160" height="160" class="img-logo" />
            </div>
            <div class="col-4">
              <img src="{@docRoot}auto/images/logos/apps/tunein.png"
                   width="160" height="160" class="img-logo" />
            </div>
            <div class="col-4">
              <img src="{@docRoot}auto/images/logos/apps/umano.png"
                   width="160" height="160" class="img-logo" />
            </div>
          </div>
          <div class="cols" style="margin-top:40px">
             <div class="col-4">
                <img src="{@docRoot}auto/images/logos/apps/iheartradio.png"
                     width="160" height="160" class="img-logo" />
              </div>
              <div class="col-12">
                <p><em>
                "The Android Auto APIs provide an easy way to integrate the most important features and functionality of iHeartRadio’s robust music service into a safety-minded automotive infotainment solution. The process was seamless, utilizing a flexible construct that allowed us to quickly adapt our existing product without losing any of the core experience our listeners know and love."</em></p>

                <b>Ryan Goff<br>
                Director of Automotive Integrations for Clear Channel Media and Entertainment</b>
              </div>
          </div>
          <div class="cols" style="margin-top:60px">

              <div class="col-4">
                <img src="{@docRoot}auto/images/logos/apps/spotify.png"
                     width="160" height="160" class="img-logo" />
              </div>
              <div class="col-12"><p style="margin-top:20px"><em>
              "Android Auto offers Spotify the exciting opportunity to easily enable safe access to millions of songs while driving. We were able to quickly develop for the platform using the new Android voice and media API extensions. As a result, Android users will soon be able to continue the Spotify experience in their cars, including being able to play any song, artist, album or playlist by voice.</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">
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/acura.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/audi.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/bentley.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/chevrolet.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/chrysler.png"
                   width="120" height="120" class="img-logo" />
            </div>
          </div>
          <div class="cols">
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/datsun.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/fiat.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/honda.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/hyundai.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/infinity.png"
                   width="120" height="120" class="img-logo" />
            </div>
          </div>
          <div class="cols">
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/kia.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/maserati.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/mazda.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/mercedesbenz.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/mitsubishi.png"
                   width="120" height="120" class="img-logo" />
            </div>
          </div>
          <div class="cols">
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/nissan.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/opel.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/renault.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/seat.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/skoda.png"
                   width="120" height="120" class="img-logo" />
            </div>
          </div>
          <div class="cols">
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/subaru.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/suzuki.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/volkswagen.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}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">
              <div class="landing-subhead" style="margin-top:80px">
                Android Auto is also coming soon to aftermarket systems from these manufacturers:
              </div>
          </div>
          <div class="cols">
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/hard/alpine.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/hard/clarion.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/hard/cloudcar.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/hard/delphi.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}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="{@docRoot}auto/images/logos/hard/fujitsuten.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/hard/harman.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/hard/jvc.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/hard/kenwood.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}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="{@docRoot}auto/images/logos/hard/panasonic.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/hard/parrot.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/hard/pioneer.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/hard/renesas.png"
                   width="120" height="120" class="img-logo-thin" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}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="{@docRoot}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="{@docRoot}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>