blob: e6fde38342d003fffaedb9c7904afe2a86516223 [file] [log] [blame]
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">
We've partnered with manufacturers around the world to bring
the Android platform to cars.
</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.borgward.com/en/">
<img src="{@docRoot}auto/images/logos/auto/borgward.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>
<div class="cols cols-leftp">
<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 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>
<div class="cols cols-leftp">
<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 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.genesismotors.com/en/index.html">
<img src="{@docRoot}auto/images/logos/auto/genesis.png"
width="120" height="120" class="img-logo" />
</a>
</div>
</div>
<div class="cols cols-leftp">
<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 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>
<div class="cols cols-leftp">
<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.jaguar.com/index.html">
<img src="{@docRoot}auto/images/logos/auto/jaguar.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 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>
<div class="cols cols-leftp">
<div class="col-5">
<a href=" http://koenigsegg.com/">
<img src="/auto/images/logos/auto/koenigsegg.png"
width="120" height="120" class="img-logo" />
</a>
</div>
<div class="col-5">
<a href=" http://www.lada.ru/en/">
<img src="{@docRoot}auto/images/logos/auto/lada.png"
width="120" height="120" class="img-logo" />
</a>
</div>
<div class="col-5">
<a href=" http://www.lamborghini.com/">
<img src="{@docRoot}auto/images/logos/auto/lambo.png"
width="120" height="120" class="img-logo" />
</a>
</div>
<div class="col-5">
<a href=" http://www.landrover.com/">
<img src="{@docRoot}auto/images/logos/auto/landrover.png"
width="120" height="120" class="img-logo" />
</a>
</div>
</div>
<div class="cols cols-leftp">
<div class="col-5">
<a href=" http://www.lincoln.com/">
<img src="{@docRoot}auto/images/logos/auto/lincoln.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.mercedes-benz.com/">
<img src="{@docRoot}auto/images/logos/auto/mbenz.png"
width="120" height="120" class="img-logo" />
</a>
</div>
<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>
<div class="cols cols-leftp">
<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 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.renaultsamsungm.com/ ">
<img src="{@docRoot}auto/images/logos/auto/rsm.png"
width="120" height="120" class="img-logo" />
</a>
</div>
</div>
<div class="cols cols-leftp">
<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 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>
<div class="cols cols-leftp">
<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.tatamotors.com/">
<img src="{@docRoot}auto/images/logos/auto/tata.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 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>
<div class="cols cols-leftp">
<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>
</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 -->