diff options
Diffstat (limited to 'docs/html/auto/index.jd')
| -rw-r--r-- | docs/html/auto/index.jd | 511 |
1 files changed, 444 insertions, 67 deletions
diff --git a/docs/html/auto/index.jd b/docs/html/auto/index.jd index c7a3a4e..09374ad 100644 --- a/docs/html/auto/index.jd +++ b/docs/html/auto/index.jd @@ -23,6 +23,82 @@ page.type=about #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> @@ -40,13 +116,14 @@ page.type=about <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>Display and control your handheld app in vehicles. + <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;"> + <a href="{@docRoot}auto/overview.html" class="landing-button landing-primary" + style="margin-top:40px;"> Developer Overview </a> </div> @@ -67,21 +144,33 @@ page.type=about <div class="landing-section landing-gray-background" id="android-in-car"> <div class="wrap"> - <div class="landing-section-header"> - <div class="landing-h1">Bringing Android to Your Car</div> + <div class="landing-section-h1"> + <div class="landing-h1">Extending Android to Cars</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 to run. - </p> - <p>Android Auto provides new APIs and tools that your existing Android apps can - leverage to run on any compatible vehicle. Users interact with your apps through the - touch screen and the physical buttons on the vehicle’s dashboard. Your apps can also - respond to voice commands. + <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 --> @@ -89,74 +178,70 @@ page.type=about <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>Android Auto is an extension of the Android platform. You can easily adapt - existing apps for Android Auto and reuse many of the Android APIs and services you - are already familiar with.</p> - <p>The Android Auto platform and SDK let you 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 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"> - <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> - <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 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 style="width:800px;margin:0 auto"> - <img src="{@docRoot}auto/images/carlogos.png" alt="Partners" /> + <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" > + <div class="landing-section landing-gray-background"> <div class="wrap"> <div class="landing-section-header"> - <div class="landing-h1">Developer Stories</div> + <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"> - <p>We're working with developers to bring many popular apps to Android Auto:</p> - <p> - - </p> + <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"> @@ -180,8 +265,7 @@ page.type=about <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"> + <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> @@ -191,6 +275,299 @@ page.type=about </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 --> @@ -205,7 +582,7 @@ page.type=about 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 + restrictions, see the <a href="{@docRoot}license.html">Content License</a>. </div> </div> |