diff options
author | Ricardo Cervera <rcervera@google.com> | 2014-06-20 18:42:30 -0700 |
---|---|---|
committer | Ricardo Cervera <rcervera@google.com> | 2014-06-21 14:12:41 -0700 |
commit | 6d61530f13d72ea8ee587970fb3eddd5d8be67b1 (patch) | |
tree | d97af5b0cf0a39416512a9d767cba70df23a9870 | |
parent | 371d68ccb03e4c3827f8b548ebb128cddd8c4bd3 (diff) | |
download | frameworks_base-6d61530f13d72ea8ee587970fb3eddd5d8be67b1.zip frameworks_base-6d61530f13d72ea8ee587970fb3eddd5d8be67b1.tar.gz frameworks_base-6d61530f13d72ea8ee587970fb3eddd5d8be67b1.tar.bz2 |
docs: Further work on the Android Auto dev site
Added partner logos (car OEMs, aftermarket, apps)
Added platform screenshots to the hero page
Change-Id: I41669dd4ec29569f300b64ed9689c0a8dd78fda4
75 files changed, 461 insertions, 117 deletions
diff --git a/docs/html/auto/images/assets/00_frame.png b/docs/html/auto/images/assets/00_frame.png Binary files differnew file mode 100644 index 0000000..2a78380 --- /dev/null +++ b/docs/html/auto/images/assets/00_frame.png diff --git a/docs/html/auto/images/assets/01_a_maps.png b/docs/html/auto/images/assets/01_a_maps.png Binary files differnew file mode 100644 index 0000000..0d1b219 --- /dev/null +++ b/docs/html/auto/images/assets/01_a_maps.png diff --git a/docs/html/auto/images/assets/01_b_now.png b/docs/html/auto/images/assets/01_b_now.png Binary files differnew file mode 100644 index 0000000..043ec74 --- /dev/null +++ b/docs/html/auto/images/assets/01_b_now.png diff --git a/docs/html/auto/images/assets/02_a_notif.gif b/docs/html/auto/images/assets/02_a_notif.gif Binary files differnew file mode 100644 index 0000000..6a830ae --- /dev/null +++ b/docs/html/auto/images/assets/02_a_notif.gif diff --git a/docs/html/auto/images/assets/02_b_switcher.gif b/docs/html/auto/images/assets/02_b_switcher.gif Binary files differnew file mode 100644 index 0000000..626f94b --- /dev/null +++ b/docs/html/auto/images/assets/02_b_switcher.gif diff --git a/docs/html/auto/images/assets/03_a_musict.png b/docs/html/auto/images/assets/03_a_musict.png Binary files differnew file mode 100644 index 0000000..4e11243 --- /dev/null +++ b/docs/html/auto/images/assets/03_a_musict.png diff --git a/docs/html/auto/images/assets/03_b_voice.gif b/docs/html/auto/images/assets/03_b_voice.gif Binary files differnew file mode 100644 index 0000000..ddd13e4 --- /dev/null +++ b/docs/html/auto/images/assets/03_b_voice.gif diff --git a/docs/html/auto/images/assets/do_01_switcher.png b/docs/html/auto/images/assets/do_01_switcher.png Binary files differnew file mode 100644 index 0000000..b654a13 --- /dev/null +++ b/docs/html/auto/images/assets/do_01_switcher.png diff --git a/docs/html/auto/images/assets/do_02_music.png b/docs/html/auto/images/assets/do_02_music.png Binary files differnew file mode 100644 index 0000000..59fc8df --- /dev/null +++ b/docs/html/auto/images/assets/do_02_music.png diff --git a/docs/html/auto/images/assets/do_03_more.png b/docs/html/auto/images/assets/do_03_more.png Binary files differnew file mode 100644 index 0000000..17040d1 --- /dev/null +++ b/docs/html/auto/images/assets/do_03_more.png diff --git a/docs/html/auto/images/assets/do_04_mdrawer.png b/docs/html/auto/images/assets/do_04_mdrawer.png Binary files differnew file mode 100644 index 0000000..de94c22 --- /dev/null +++ b/docs/html/auto/images/assets/do_04_mdrawer.png diff --git a/docs/html/auto/images/assets/do_05_template.png b/docs/html/auto/images/assets/do_05_template.png Binary files differnew file mode 100644 index 0000000..4e11243 --- /dev/null +++ b/docs/html/auto/images/assets/do_05_template.png diff --git a/docs/html/auto/images/assets/do_06_gdrawer.png b/docs/html/auto/images/assets/do_06_gdrawer.png Binary files differnew file mode 100644 index 0000000..b02c0e6 --- /dev/null +++ b/docs/html/auto/images/assets/do_06_gdrawer.png diff --git a/docs/html/auto/images/assets/do_07_notif.png b/docs/html/auto/images/assets/do_07_notif.png Binary files differnew file mode 100644 index 0000000..50ea565 --- /dev/null +++ b/docs/html/auto/images/assets/do_07_notif.png diff --git a/docs/html/auto/images/carlogos.png b/docs/html/auto/images/carlogos.png Binary files differdeleted file mode 100644 index 3522aa3..0000000 --- a/docs/html/auto/images/carlogos.png +++ /dev/null diff --git a/docs/html/auto/images/figure02.png b/docs/html/auto/images/figure02.png Binary files differdeleted file mode 100644 index 1b87224..0000000 --- a/docs/html/auto/images/figure02.png +++ /dev/null diff --git a/docs/html/auto/images/figure03.png b/docs/html/auto/images/figure03.png Binary files differdeleted file mode 100644 index 0c4e20d..0000000 --- a/docs/html/auto/images/figure03.png +++ /dev/null diff --git a/docs/html/auto/images/figure04.png b/docs/html/auto/images/figure04.png Binary files differdeleted file mode 100644 index 3e9c894..0000000 --- a/docs/html/auto/images/figure04.png +++ /dev/null diff --git a/docs/html/auto/images/figure05.png b/docs/html/auto/images/figure05.png Binary files differdeleted file mode 100644 index 9c1d9b8..0000000 --- a/docs/html/auto/images/figure05.png +++ /dev/null diff --git a/docs/html/auto/images/figure06.png b/docs/html/auto/images/figure06.png Binary files differdeleted file mode 100644 index 8140f0c..0000000 --- a/docs/html/auto/images/figure06.png +++ /dev/null diff --git a/docs/html/auto/images/figure07.png b/docs/html/auto/images/figure07.png Binary files differdeleted file mode 100644 index 82c1c76..0000000 --- a/docs/html/auto/images/figure07.png +++ /dev/null diff --git a/docs/html/auto/images/figure08.png b/docs/html/auto/images/figure08.png Binary files differdeleted file mode 100644 index f11e3a8..0000000 --- a/docs/html/auto/images/figure08.png +++ /dev/null diff --git a/docs/html/auto/images/hero.jpg b/docs/html/auto/images/hero.jpg Binary files differindex 3f9114f..34b5b5d 100644 --- a/docs/html/auto/images/hero.jpg +++ b/docs/html/auto/images/hero.jpg diff --git a/docs/html/auto/images/logos/apps/iheartradio.png b/docs/html/auto/images/logos/apps/iheartradio.png Binary files differnew file mode 100644 index 0000000..8feb38d --- /dev/null +++ b/docs/html/auto/images/logos/apps/iheartradio.png diff --git a/docs/html/auto/images/logos/apps/joyride.png b/docs/html/auto/images/logos/apps/joyride.png Binary files differnew file mode 100644 index 0000000..8c2897e --- /dev/null +++ b/docs/html/auto/images/logos/apps/joyride.png diff --git a/docs/html/auto/images/logos/apps/mlb.png b/docs/html/auto/images/logos/apps/mlb.png Binary files differnew file mode 100644 index 0000000..ddde4cd --- /dev/null +++ b/docs/html/auto/images/logos/apps/mlb.png diff --git a/docs/html/auto/images/logos/apps/pandora.png b/docs/html/auto/images/logos/apps/pandora.png Binary files differnew file mode 100644 index 0000000..13fa1d3 --- /dev/null +++ b/docs/html/auto/images/logos/apps/pandora.png diff --git a/docs/html/auto/images/logos/apps/pocketcasts.png b/docs/html/auto/images/logos/apps/pocketcasts.png Binary files differnew file mode 100644 index 0000000..5227937 --- /dev/null +++ b/docs/html/auto/images/logos/apps/pocketcasts.png diff --git a/docs/html/auto/images/logos/apps/songza.png b/docs/html/auto/images/logos/apps/songza.png Binary files differnew file mode 100644 index 0000000..3bd7107 --- /dev/null +++ b/docs/html/auto/images/logos/apps/songza.png diff --git a/docs/html/auto/images/logos/apps/spotify.png b/docs/html/auto/images/logos/apps/spotify.png Binary files differnew file mode 100644 index 0000000..d039fd3 --- /dev/null +++ b/docs/html/auto/images/logos/apps/spotify.png diff --git a/docs/html/auto/images/logos/apps/stitcher.png b/docs/html/auto/images/logos/apps/stitcher.png Binary files differnew file mode 100644 index 0000000..b77da12 --- /dev/null +++ b/docs/html/auto/images/logos/apps/stitcher.png diff --git a/docs/html/auto/images/logos/apps/tunein.png b/docs/html/auto/images/logos/apps/tunein.png Binary files differnew file mode 100644 index 0000000..137ba81 --- /dev/null +++ b/docs/html/auto/images/logos/apps/tunein.png diff --git a/docs/html/auto/images/logos/apps/umano.png b/docs/html/auto/images/logos/apps/umano.png Binary files differnew file mode 100644 index 0000000..7b59f95 --- /dev/null +++ b/docs/html/auto/images/logos/apps/umano.png diff --git a/docs/html/auto/images/logos/auto/acura.png b/docs/html/auto/images/logos/auto/acura.png Binary files differnew file mode 100644 index 0000000..4ba69cc --- /dev/null +++ b/docs/html/auto/images/logos/auto/acura.png diff --git a/docs/html/auto/images/logos/auto/audi.png b/docs/html/auto/images/logos/auto/audi.png Binary files differnew file mode 100644 index 0000000..9b99efe --- /dev/null +++ b/docs/html/auto/images/logos/auto/audi.png diff --git a/docs/html/auto/images/logos/auto/bentley.png b/docs/html/auto/images/logos/auto/bentley.png Binary files differnew file mode 100644 index 0000000..ed8cf47 --- /dev/null +++ b/docs/html/auto/images/logos/auto/bentley.png diff --git a/docs/html/auto/images/logos/auto/chevrolet.png b/docs/html/auto/images/logos/auto/chevrolet.png Binary files differnew file mode 100644 index 0000000..e0980b0 --- /dev/null +++ b/docs/html/auto/images/logos/auto/chevrolet.png diff --git a/docs/html/auto/images/logos/auto/chrysler.png b/docs/html/auto/images/logos/auto/chrysler.png Binary files differnew file mode 100644 index 0000000..f366cba --- /dev/null +++ b/docs/html/auto/images/logos/auto/chrysler.png diff --git a/docs/html/auto/images/logos/auto/datsun.png b/docs/html/auto/images/logos/auto/datsun.png Binary files differnew file mode 100644 index 0000000..059ffd8 --- /dev/null +++ b/docs/html/auto/images/logos/auto/datsun.png diff --git a/docs/html/auto/images/logos/auto/fiat.png b/docs/html/auto/images/logos/auto/fiat.png Binary files differnew file mode 100644 index 0000000..aaa5cf3 --- /dev/null +++ b/docs/html/auto/images/logos/auto/fiat.png diff --git a/docs/html/auto/images/logos/auto/honda.png b/docs/html/auto/images/logos/auto/honda.png Binary files differnew file mode 100644 index 0000000..62ee38f --- /dev/null +++ b/docs/html/auto/images/logos/auto/honda.png diff --git a/docs/html/auto/images/logos/auto/hyundai.png b/docs/html/auto/images/logos/auto/hyundai.png Binary files differnew file mode 100644 index 0000000..4744641 --- /dev/null +++ b/docs/html/auto/images/logos/auto/hyundai.png diff --git a/docs/html/auto/images/logos/auto/infinity.png b/docs/html/auto/images/logos/auto/infinity.png Binary files differnew file mode 100644 index 0000000..ad77351 --- /dev/null +++ b/docs/html/auto/images/logos/auto/infinity.png diff --git a/docs/html/auto/images/logos/auto/kia.png b/docs/html/auto/images/logos/auto/kia.png Binary files differnew file mode 100644 index 0000000..f8046d9 --- /dev/null +++ b/docs/html/auto/images/logos/auto/kia.png diff --git a/docs/html/auto/images/logos/auto/maserati.png b/docs/html/auto/images/logos/auto/maserati.png Binary files differnew file mode 100644 index 0000000..22bcf6a --- /dev/null +++ b/docs/html/auto/images/logos/auto/maserati.png diff --git a/docs/html/auto/images/logos/auto/mazda.png b/docs/html/auto/images/logos/auto/mazda.png Binary files differnew file mode 100644 index 0000000..2281c90 --- /dev/null +++ b/docs/html/auto/images/logos/auto/mazda.png diff --git a/docs/html/auto/images/logos/auto/mercedesbenz.png b/docs/html/auto/images/logos/auto/mercedesbenz.png Binary files differnew file mode 100644 index 0000000..05fab0f --- /dev/null +++ b/docs/html/auto/images/logos/auto/mercedesbenz.png diff --git a/docs/html/auto/images/logos/auto/mitsubishi.png b/docs/html/auto/images/logos/auto/mitsubishi.png Binary files differnew file mode 100644 index 0000000..1405b19 --- /dev/null +++ b/docs/html/auto/images/logos/auto/mitsubishi.png diff --git a/docs/html/auto/images/logos/auto/nissan.png b/docs/html/auto/images/logos/auto/nissan.png Binary files differnew file mode 100644 index 0000000..63bc4f7 --- /dev/null +++ b/docs/html/auto/images/logos/auto/nissan.png diff --git a/docs/html/auto/images/logos/auto/opel.png b/docs/html/auto/images/logos/auto/opel.png Binary files differnew file mode 100644 index 0000000..7e25ed5 --- /dev/null +++ b/docs/html/auto/images/logos/auto/opel.png diff --git a/docs/html/auto/images/logos/auto/renault.png b/docs/html/auto/images/logos/auto/renault.png Binary files differnew file mode 100644 index 0000000..65a4ae3 --- /dev/null +++ b/docs/html/auto/images/logos/auto/renault.png diff --git a/docs/html/auto/images/logos/auto/seat.png b/docs/html/auto/images/logos/auto/seat.png Binary files differnew file mode 100644 index 0000000..9802ccf --- /dev/null +++ b/docs/html/auto/images/logos/auto/seat.png diff --git a/docs/html/auto/images/logos/auto/skoda.png b/docs/html/auto/images/logos/auto/skoda.png Binary files differnew file mode 100755 index 0000000..7bc06b0 --- /dev/null +++ b/docs/html/auto/images/logos/auto/skoda.png diff --git a/docs/html/auto/images/logos/auto/subaru.png b/docs/html/auto/images/logos/auto/subaru.png Binary files differnew file mode 100644 index 0000000..7407e61 --- /dev/null +++ b/docs/html/auto/images/logos/auto/subaru.png diff --git a/docs/html/auto/images/logos/auto/suzuki.png b/docs/html/auto/images/logos/auto/suzuki.png Binary files differnew file mode 100644 index 0000000..85fd7e5 --- /dev/null +++ b/docs/html/auto/images/logos/auto/suzuki.png diff --git a/docs/html/auto/images/logos/auto/volkswagen.png b/docs/html/auto/images/logos/auto/volkswagen.png Binary files differnew file mode 100644 index 0000000..febadf4 --- /dev/null +++ b/docs/html/auto/images/logos/auto/volkswagen.png diff --git a/docs/html/auto/images/logos/auto/volvo.png b/docs/html/auto/images/logos/auto/volvo.png Binary files differnew file mode 100644 index 0000000..683af26 --- /dev/null +++ b/docs/html/auto/images/logos/auto/volvo.png diff --git a/docs/html/auto/images/logos/hard/alpine.png b/docs/html/auto/images/logos/hard/alpine.png Binary files differnew file mode 100644 index 0000000..55f0e8a --- /dev/null +++ b/docs/html/auto/images/logos/hard/alpine.png diff --git a/docs/html/auto/images/logos/hard/clarion.png b/docs/html/auto/images/logos/hard/clarion.png Binary files differnew file mode 100644 index 0000000..2288b99 --- /dev/null +++ b/docs/html/auto/images/logos/hard/clarion.png diff --git a/docs/html/auto/images/logos/hard/cloudcar.png b/docs/html/auto/images/logos/hard/cloudcar.png Binary files differnew file mode 100644 index 0000000..9e7e8b7 --- /dev/null +++ b/docs/html/auto/images/logos/hard/cloudcar.png diff --git a/docs/html/auto/images/logos/hard/delphi.png b/docs/html/auto/images/logos/hard/delphi.png Binary files differnew file mode 100644 index 0000000..a2a03de --- /dev/null +++ b/docs/html/auto/images/logos/hard/delphi.png diff --git a/docs/html/auto/images/logos/hard/freescale.png b/docs/html/auto/images/logos/hard/freescale.png Binary files differnew file mode 100644 index 0000000..2909944 --- /dev/null +++ b/docs/html/auto/images/logos/hard/freescale.png diff --git a/docs/html/auto/images/logos/hard/fujitsuten.png b/docs/html/auto/images/logos/hard/fujitsuten.png Binary files differnew file mode 100644 index 0000000..70269e3 --- /dev/null +++ b/docs/html/auto/images/logos/hard/fujitsuten.png diff --git a/docs/html/auto/images/logos/hard/harman.png b/docs/html/auto/images/logos/hard/harman.png Binary files differnew file mode 100644 index 0000000..0fb295a --- /dev/null +++ b/docs/html/auto/images/logos/hard/harman.png diff --git a/docs/html/auto/images/logos/hard/jvc.png b/docs/html/auto/images/logos/hard/jvc.png Binary files differnew file mode 100644 index 0000000..6a9c7ad --- /dev/null +++ b/docs/html/auto/images/logos/hard/jvc.png diff --git a/docs/html/auto/images/logos/hard/kenwood.png b/docs/html/auto/images/logos/hard/kenwood.png Binary files differnew file mode 100644 index 0000000..3c80098 --- /dev/null +++ b/docs/html/auto/images/logos/hard/kenwood.png diff --git a/docs/html/auto/images/logos/hard/lg.png b/docs/html/auto/images/logos/hard/lg.png Binary files differnew file mode 100644 index 0000000..52feeff --- /dev/null +++ b/docs/html/auto/images/logos/hard/lg.png diff --git a/docs/html/auto/images/logos/hard/panasonic.png b/docs/html/auto/images/logos/hard/panasonic.png Binary files differnew file mode 100644 index 0000000..b6aaaf1 --- /dev/null +++ b/docs/html/auto/images/logos/hard/panasonic.png diff --git a/docs/html/auto/images/logos/hard/parrot.png b/docs/html/auto/images/logos/hard/parrot.png Binary files differnew file mode 100644 index 0000000..d5bf41f --- /dev/null +++ b/docs/html/auto/images/logos/hard/parrot.png diff --git a/docs/html/auto/images/logos/hard/pioneer.png b/docs/html/auto/images/logos/hard/pioneer.png Binary files differnew file mode 100644 index 0000000..307d71a --- /dev/null +++ b/docs/html/auto/images/logos/hard/pioneer.png diff --git a/docs/html/auto/images/logos/hard/renesas.png b/docs/html/auto/images/logos/hard/renesas.png Binary files differnew file mode 100644 index 0000000..69ecab7 --- /dev/null +++ b/docs/html/auto/images/logos/hard/renesas.png diff --git a/docs/html/auto/images/logos/hard/symphonyteleca.png b/docs/html/auto/images/logos/hard/symphonyteleca.png Binary files differnew file mode 100644 index 0000000..0b3ebe5 --- /dev/null +++ b/docs/html/auto/images/logos/hard/symphonyteleca.png diff --git a/docs/html/auto/images/logos/hard/texasinstruments.png b/docs/html/auto/images/logos/hard/texasinstruments.png Binary files differnew file mode 100644 index 0000000..87d80cb --- /dev/null +++ b/docs/html/auto/images/logos/hard/texasinstruments.png diff --git a/docs/html/auto/index.jd b/docs/html/auto/index.jd index c7a3a4e..810fc67 100644 --- a/docs/html/auto/index.jd +++ b/docs/html/auto/index.jd @@ -23,6 +23,34 @@ 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> @@ -40,13 +68,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;font-weight:300"> Developer Overview </a> </div> @@ -68,17 +97,32 @@ 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-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 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. + system shows an interface that lets users select compatible apps and services.</p> </p> </div> @@ -93,14 +137,32 @@ page.type=about </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 + <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 --> @@ -114,28 +176,31 @@ page.type=about <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 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> </div> <!-- end .wrap --> </div> <!-- end .landing-section --> @@ -153,6 +218,51 @@ page.type=about </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 --> @@ -191,6 +301,225 @@ page.type=about </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 --> diff --git a/docs/html/auto/overview.jd b/docs/html/auto/overview.jd index 8748bff..728dff7 100644 --- a/docs/html/auto/overview.jd +++ b/docs/html/auto/overview.jd @@ -13,6 +13,49 @@ page.metaDescription=Android Auto #copyright { margin-top:-35px; } +.auto-img-container { + position:relative; +} +.auto-img-frame { + z-index:2; + position:relative; +} +.auto-img-shot { + position:absolute; + top:9px; + left:8px; + z-index:1; +} +.auto-img-container-cols { + position:relative; + margin-top:10px; +} +.auto-img-frame-cols { + z-index:2; + position:relative; +} +.auto-img-shot-cols { + position:absolute; + top:0px; + left:0px; + z-index:1; + border:1px solid #; + -webkit-border-radius: 7px; + -moz-border-radius: 7px; + border-radius: 7px; +} +.auto-col-2 { + width:380px; + display: inline; + float: left; + margin-left: 10px; + margin-right: 10px; +} +.auto-img-container-single { + width:380px; + margin:0 auto; + margin-top:20px; +} </style> <div style="width:780px; margin:0 auto;"> @@ -79,13 +122,13 @@ you already know.</dd> Android Auto experience on a regular Android device.</p> -<h2 id="design" style="margin-top:30px">Design</h2> +<h2 id="design">Design</h2> <p>Digital experiences for cars should complement and augment driving, not demand the driver's attention. Designing these experiences for cars is fundamentally different than in the case of phones and tablets. It requires rethinking how these experiences unfold.</p> -<h3 id="designprinciples" style="margin-top:25px">Design Principles</h3> +<h3 id="designprinciples">Design Principles</h3> <p><strong>Glanceable</strong>. We designed Android Auto to reduce UI complexity, optimize user interactions, and lower cognitive load. Effective apps show just enough information @@ -105,52 +148,15 @@ that bring personal content and context from other devices are part of Android A system, creating a truly integrated experience in every car. By using the vehicle's screen and controls, apps feel tailored to each car.</p> -<h3 id="uioverview" style="margin-top:25px">UI Overview</h3> -<p>Android Auto is a new environment that leverages existing UI models where appropiate and adds -new models based on constrains and context. There are three primary concepts for Android Auto: -<strong>Suggest</strong>, a unified place for predictive content; <strong>Demand</strong>, a -pervasive way to interact with voice; and the <strong>Facets</strong>, organized spaces for -primary activities, apps and content.</p> - -<dl> -<dt style="margin-bottom:10px"><strong>Suggest: The Google Facet</strong></dt> -<dd style="margin-bottom:20px"> -Core of continuity and extensibility is contextual stream of Now-like cards, powered by your -apps and notifications. Relevant, timely, and dynamic, the stream organizes likely people, media, -places, and information so drivers can quickly continue their activities or start something new. -Google Now and notifications enable drivers to use the apps and services they know when they are -most relevant. -</dd> -<dt style="margin-bottom:10px"><strong>Demand: The Voice Layer</strong></dt> -<dd style="margin-bottom:20px"> -Voice-enabled tasks lets drivers accomplish their goals without taking their eyes off the road. -Android Auto defines actions and intents that your app can register for. -These are accessible through both persistent UI elements and dedicated hardware controls. -</dd> -<dt style="margin-bottom:10px"><strong>Facets and Templates: App-powered activities</strong></dt> -<dd style="margin-bottom:20px"> -In the car, pages of app icons and different UIs create a distracting and dangerous situation. -Instead, Android Auto apps power templates which help provide simple but customizable UIs -for common interactions such as media or communications. Templates incorporate common behaviors, -such as play/pause or reply to a message, while still letting your app promote its value -and its brand. Apps are organized into facets (or activities) to enable quick access. -</dd> -</dl> - -<p>Android Auto uses the input and output mechanisms in each vehicle to tailor the interactions. -Some vehicles have dedicated hardware controls, while others have primarily touch-based systems. -Android Auto maps common actions and intents across these diverse sets of controls and outputs to -enable you to concentrate on your unique app experience.</p> - -<h2 id="architecture" style="margin-top:30px">Architecture</h2> +<h2 id="architecture">Architecture</h2> <p>The Android Auto app projects your app's customized UI on the vehicle's screen. To communicate with the Android Auto app, your media app implements a set of media interfaces.</p> <div style="width:750px;margin:0 auto"> -<img src="/auto/images/figure01.png" alt="" id="figure1" /> +<img src="{@docRoot}auto/images/figure01.png" alt="" id="figure1" /> <p class="img-caption"> <strong>Figure 1</strong> - Architecture of Android Auto. </p> @@ -180,7 +186,7 @@ playback state through callbacks.</li> </ul> -<h2 id="uitemplates" style="margin-top:30px">UI Templates</h2> +<h2 id="uitemplates">UI Templates</h2> <p>The Android Auto app uses a templated UI to display content and user interaction opportunities. Android Auto provides you with a set of standard UI templates that follow @@ -192,89 +198,98 @@ multiple legislations across the globe and different standards for each vehicle media apps. Although you cannot change the standard template format or layout, you can customize the template colors, action icons, background images, and more.</p> -<h3 id="launchapp" style="margin-top:25px">Launch App Template</h3> +<h3 id="launchapp">Launch App Template</h3> <p>The Launcher template shows all the compatible media apps installed on the user’s Android device and lets users select one of them from an scrollable list:</p> -<div style="width:500px;margin:0 auto"> -<img src="/auto/images/figure02.png" alt="" id="figure2" /> -<p class="img-caption"> - <strong>Figure 2.</strong> The Launcher template. -</p> +<div class="auto-img-container-single"> + <div class="auto-img-container"> + <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" /> + <img class="auto-img-shot-cols" src="/auto/images/assets/do_01_switcher.png" /> + </div> + <p class="img-caption" style="margin-top:0px"> + <strong>Figure 2.</strong> The Launcher template. + </p> </div> -<h3 style="margin-top:25px">Primary App Template</h3> +<h3>Primary App Template</h3> <p>After the user selects a media app, the display shows the primary app template. Figure 3 shows the elements of this template that you can customize:</p> -<div style="width:428px;margin:0 auto"> -<img src="/auto/images/figure03.png" alt="" id="figure3" /> -<p class="img-caption"> - <strong>Figure 3.</strong> The main application template. -</p> -</div> - <p>You can customize the primary app template to show your own icons, app name, and background images. Figure 4 shows an example of a customized template:</p> -<div style="width:787px;margin:0 auto"> -<img src="/auto/images/figure04.png" alt="" id="figure4" /> +<div class="cols"> +<div class="auto-col-2"> + <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/do_05_template.png" /> + </div> +</div> +<div class="auto-col-2"> + <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/do_02_music.png" /> + </div> +</div> +</div> <p class="img-caption"> <strong>Figure 4.</strong> A customized template. </p> -</div> -<h3 id="useractions" style="margin-top:25px">User Actions</h3> + + +<h3 id="useractions">User Actions</h3> <p>The primary app template supports four main actions on the action bar, four auxiliary actions on the overflow bar, and the <em>Return</em> action. You can use standard controls and customize the actions and icons, as shown in Figure 5.</p> -<div style="width:500px;margin:0 auto"> -<img src="/auto/images/figure05.png" alt="" id="figure5" /> -<p class="img-caption"> - <strong>Figure 5.</strong> Custom icons for auxiliary actions. -</p> +<div class="auto-img-container-single"> + <div class="auto-img-container"> + <img class="auto-img-frame-cols" src="/auto/images/assets/00_frame.png" /> + <img class="auto-img-shot-cols" src="/auto/images/assets/do_03_more.png" /> + </div> + <p class="img-caption" style="margin-top:0px"> + <strong>Figure 5.</strong> Custom extra actions. + </p> </div> -<h3 id="drawertransitions" style="margin-top:25px">Drawer Transitions</h3> +<h3 id="drawertransitions">Drawer Transitions</h3> <p>For browse actions, the display shows the drawer transition and template:</p> -<div style="width:750px;margin:0 auto"> -<img src="/auto/images/figure06.png" alt="" id="figure6" /> -<p class="img-caption"> - <strong>Figure 6.</strong> The drawer transition. -</p> -</div> - <p>After the transition from the primary app template to the drawer template, the drawer appears on the center. The customized drawer template shows the media containers and media files provided by the media service in your app. You can also customize drawers with icons for list items.</p> -<div style="width:500px;margin:0 auto"> -<img src="/auto/images/figure07.png" alt="" id="figure7" /> +<div class="cols"> +<div class="auto-col-2"> + <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/do_06_gdrawer.png" /> + </div> +</div> +<div class="auto-col-2"> + <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/do_04_mdrawer.png" /> + </div> +</div> +</div> <p class="img-caption"> - <strong>Figure 7.</strong> A customized drawer template. + <strong>Figure 4.</strong> Generic and customized drawer templates. </p> -</div> -<h3 id="daynighttransitions" style="margin-top:25px">Day and Night Transitions</h3> +<h3 id="daynighttransitions">Day and Night Transitions</h3> <p>All the templates support different color schemes for day and night, as shown in Figure 8. The platform provides the state (day or night) and makes adjustments automatically.</p> -<div style="width:780px;margin:0 auto"> -<img src="/auto/images/figure08.png" alt="" id="figure8" /> -<p class="img-caption"> - <strong>Figure 8.</strong> Day and night transitions. -</p> -</div> - -<h3 id="customizetemplates" style="margin-top:25px">Customizing Templates</h3> +<h3 id="customizetemplates">Customizing Templates</h3> <p>To customize the templates, provide the following app-specific resources and actions to the Android Auto media client.</p> @@ -288,7 +303,7 @@ to the Android Auto media client.</p> <p>If provided, the media client automatically uses them in the templated UI.</p> -<h2 id="devprocess" style="margin-top:30px">Development Process</h2> +<h2 id="devprocess">Development Process</h2> <p class="note"><strong>Note:</strong> When released, the Android Auto SDK will provide media service interfaces, an APK for handheld devices that simulates the Android Auto @@ -327,7 +342,7 @@ differences such as screen resolutions, software interfaces, knobs and touch controls.</p> -<h2 id="emulator" style="margin-top:30px">Testing Your App on an Android Device</h2> +<h2 id="emulator">Testing Your App on an Android Device</h2> <p>The Android Auto SDK includes an APK with a media client implementation, which is similar to those available in compatible vehicles. To test your app with this @@ -348,7 +363,7 @@ library and play media. If your app provides app-specific actions, these actions in the UI controls.</p> -<h2 id="running" style="margin-top:30px">Running Your App on Android Auto</h2> +<h2 id="running">Running Your App on Android Auto</h2> <p>Media apps are available on the Google Play Store for compatible Android devices. When users connect their Android device to a compatible vehicle, the |