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;
}
#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;
  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">
                <a href="{@docRoot}training/auto/index.html"
                   class="landing-button landing-primary"
                   style="margin-top:40px;">
                  Get Started
                </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 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>
          <p>Before you start building, check out the
              <a href="http://youtu.be/ctiaVxgclsg" class="external-link">Introduction to Android Auto</a> video to understand how
              users see and interact with your app in Android Auto.
          </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.
            </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="/auto/images/logos/apps/kik.png"
                   width="120" height="120" class="img-logo" style="margin-top:20px"/>
            </div>
            <div class="col-4">
              <img src="/auto/images/logos/apps/textplus.png"
                   width="120" height="24" class="img-logo" style="margin-top:70px" />
            </div>
            <div class="col-4">
              <img src="/auto/images/logos/apps/iheartradio.png"
                   width="160" height="160" class="img-logo" />
            </div>
            <div class="col-4">
              <img src="/auto/images/logos/apps/spotify.png"
                   width="160" height="160" class="img-logo" />
            </div>
          </div>
          <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="/auto/images/logos/apps/whatsapp.png"
                     width="120" height="120" class="img-logo" />
              </div>
              <div class="col-8">
                <p><em>
                "We were able to get messaging functionality for text
                implemented easily on Android Auto, with minimal development
                effort. We're excited to participate in Android Auto which
                provides a notification interface for the car that is both
                user-friendly and highly safety-minded."</em></p>
              </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">
              <img src="{@docRoot}auto/images/logos/auto/abarth.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/alpharomeo.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <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>
          <div class="cols cols-leftp">
            <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 class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/dodge.png"
                   width="120" height="120" class="img-logo" />
            </div>
          </div>
          <div class="cols cols-leftp">
            <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/ford.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>
          <div class="cols cols-leftp">
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/infinity.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/jeep.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <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>
          <div class="cols cols-leftp">
            <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/mitsubishi.png"
                   width="120" height="120" class="img-logo" />
            </div>
            <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>
          <div class="cols cols-leftp">
            <div class="col-5">
              <img src="{@docRoot}auto/images/logos/auto/ram.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 cols-leftp">
            <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>
        </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>
  <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement"
    style="border-top: none;">

    <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-hero-container -->

  <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 -->