• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=Android Auto
2page.viewport_width=970
3fullpage=true
4no_footer_links=true
5page.type=about
6page.image=/images/cards/android-auto_2x.png
7nonavpage=true
8
9@jd:body
10
11<style>
12.fullpage>#footer,
13#jd-content>.content-footer.wrap {
14  display:none;
15}
16.img-logo {
17  margin:0 auto;
18  display:block;
19  margin-bottom:-28px !important;
20}
21.img-logo-thin {
22  margin:0 auto;
23  display:block;
24  margin-bottom:-55px !important;
25}
26.col-5 {
27  width:170px;
28}
29.auto-img-container-cols {
30  position:relative;
31  margin-bottom:25px;
32  margin-top:25px;
33}
34.auto-img-frame-cols {
35  z-index:2;
36  position:relative;
37  width:460px;
38}
39.auto-img-shot-cols {
40  width:447px;
41  position:absolute;
42  top:8px;
43  left:7px;
44  z-index:1;
45}
46.sdk-link {
47  font-size:16px;
48  padding-left:5px;
49  padding-right:15px;
50}
51.sdk-link-title {
52  font-size:18px;
53  padding-left:5px;
54  padding-right:15px;
55}
56.sdk-link-desc {
57  font-size:14px;
58  padding-left:5px;
59  padding-right:15px;
60}
61.cols-leftp {
62  padding-left:95px;
63}
64</style>
65
66
67
68
69
70<div class="landing-body-content">
71  <div class="landing-hero-container">
72
73    <div id="hero-height" class="landing-section auto-hero">
74      <div class="landing-hero-scrim"></div>
75      <div class="landing-hero-wrap">
76        <div class="vertical-center-outer">
77          <div class="vertical-center-inner">
78
79            <div class="col-10">
80              <div class="landing-section-header">
81                <div class="landing-h1 hero">Android Auto</div>
82                <div class="landing-subhead hero">Audio entertainment and
83                  messaging services in the car.</div>
84                <div class="landing-hero-description">
85                  <p style="width:450px">Let drivers listen to and control
86                    content in your music and other audio apps. Allow drivers to
87                    hear and respond to your messaging service via the
88                    car's controls and screen.</p>
89                </div>
90
91              <div class="landing-body" style="margin-top:40px;">
92                <a href="{@docRoot}training/auto/index.html"
93                   class="landing-button landing-primary">
94                  Get Started
95                </a>
96                <a href="https://www.youtube.com/watch?v=ctiaVxgclsg" class="video-shadowbox-button white"
97                    style="margin-left:40px">
98                  Watch the Intro Video
99                </a>
100              </div>
101            </div>
102          </div>
103        </div>
104      </div> <!-- end .wrap -->
105
106      <div class="landing-scroll-down-affordance">
107        <a class="landing-down-arrow" href="#android-in-car">
108          <img src="{@docRoot}wear/images/carrot.png" alt="Scroll down to read more">
109        </a>
110      </div>
111    </div> <!-- end .landing-section .landing-hero -->
112  </div> <!-- end .landing-hero-container -->
113
114  <div class="landing-rest-of-page">
115
116    <div class="landing-section landing-gray-background" id="android-in-car">
117      <div class="wrap">
118        <div class="landing-section-header">
119          <div class="landing-h1">Extending Android to Cars</div>
120          <div class="landing-subhead">Android Auto brings the Android
121              platform into the car with a user interface that's optimized for driving.</div>
122        </div>
123
124        <div class="landing-body">
125          <div class="cols">
126            <div class="col-8">
127              <div class="auto-img-container-cols">
128                <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
129                <img class="auto-img-shot-cols" src="/auto/images/assets/landing/01.gif" />
130              </div>
131            </div>
132            <div class="col-8">
133              <div class="auto-img-container-cols">
134                <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
135                <img class="auto-img-shot-cols" src="/auto/images/assets/landing/02.gif" />
136              </div>
137            </div>
138          </div>
139        </div>
140      </div> <!-- end .wrap -->
141    </div> <!-- end .landing-section -->
142
143    <div class="landing-section">
144        <div class="wrap">
145          <div class="landing-section-header">
146            <div class="landing-h1">Build for One Platform</div>
147            <div class="landing-subhead">Create apps with the Android APIs
148              you’re familiar with and extend them to cars.
149            </div>
150          </div>
151
152          <div class="landing-body">
153            <div class="cols">
154              <div class="col-8">
155                <div class="auto-img-container-cols">
156                  <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
157                  <img class="auto-img-shot-cols" src="/auto/images/assets/landing/05.png" />
158                </div>
159              </div>
160              <div class="col-8">
161                <div class="auto-img-container-cols">
162                  <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
163                  <img class="auto-img-shot-cols" src="/auto/images/assets/landing/06.png" />
164                </div>
165              </div>
166            </div>
167            <p>Write your apps without having to worry about vehicle-specific
168            hardware differences like screen resolution, software interfaces,
169            knobs, and touch controls. Your users get the same experience on any
170            compatible vehicle such as a consistent app launcher and system
171            events such as notifications.</p>
172          </div>
173        </div> <!-- end .wrap -->
174      </div> <!-- end .landing-section -->
175
176    <div class="landing-section" style="background-color:#f5f5f5" id="developing-for-auto">
177        <div class="wrap">
178          <div class="landing-section-header">
179            <div class="landing-pre-h1">Now Available</div>
180            <div class="landing-h1">Developing for Android Auto</div>
181            <div class="landing-subhead">The APIs for building Auto-enabled apps
182              are available now! When connected to compatible vehicles, apps on
183              handheld devices running Android 5.0 or higher can communicate
184              with Android Auto.</div>
185          </div>
186
187          <div class="landing-body">
188            <div class="cols">
189              <div class="col-8">
190                <div class="auto-img-container-cols">
191                  <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
192                  <img class="auto-img-shot-cols" src="/auto/images/assets/landing/03.gif" />
193                </div>
194                <div class="landing-h3">Play Music on the Road from Your App</div>
195                <p class="landing-small" style="padding-left:0px; padding-top:15px;">
196                  Extend audio apps such as music, radio, and audiobook players
197                  into the car. Build apps that let users browse and play their
198                  music in the car.<br><a href="{@docRoot}training/auto/audio/index.html">Learn how to build audio apps</a>
199                </p>
200              </div>
201              <div class="col-8">
202                <div class="auto-img-container-cols">
203                  <img class="auto-img-frame-cols" src="/auto/images/assets/landing/FrameA.png" />
204                  <img class="auto-img-shot-cols" src="/auto/images/assets/landing/04.png" />
205                </div>
206                <div class="landing-h3">Keep Users Connected with In-Vehicle Messaging</div>
207                <p class="landing-small" style="padding-left:0px; padding-top:15px;">
208                  Create messaging apps that receive incoming notifications,
209                  read messages via text-to-speech, and let users reply by voice
210                  input in the car.<br><a href="{@docRoot}training/auto/messaging/index.html">Learn how to build messaging apps</a>
211                </p>
212              </div>
213            </div>
214          </div>
215        </div> <!-- end .wrap -->
216      </div> <!-- end .landing-section -->
217
218      <div class="landing-section landing-gray-background" >
219        <div class="wrap">
220          <div class="landing-section-header">
221            <div class="landing-h1">See What Others Have Done</div>
222            <div class="landing-subhead">We're working with developers to bring many popular apps
223            to Android Auto</div>
224          </div>
225          <div class="landing-body">
226          <div class="cols">
227            <div class="col-4">
228              <img src="{@docRoot}auto/images/logos/apps/iheartradio.png"
229                   width="160" height="160" class="img-logo" />
230            </div>
231            <div class="col-4">
232              <img src="{@docRoot}auto/images/logos/apps/joyride.png"
233                   width="160" height="160" class="img-logo" />
234            </div>
235            <div class="col-4">
236              <img src="{@docRoot}auto/images/logos/apps/kik.png"
237                   width="120" height="120" class="img-logo" style="margin-top:30px" />
238            </div>
239            <div class="col-4">
240              <img src="{@docRoot}auto/images/logos/apps/tunein.png"
241                   width="160" height="160" class="img-logo"
242                   />
243            </div>
244          </div>
245
246          <div class="cols">
247            <div class="col-4">
248              <img src="{@docRoot}auto/images/logos/apps/talkray.png"
249                   width="120" height="44" class="img-logo" style="margin-top:40px"
250                   />
251            </div>
252            <div class="col-4">
253              <img src="{@docRoot}auto/images/logos/apps/icq.png"
254                   width="150" height="53" class="img-logo" style="margin-top:40px"
255                   />
256            </div>
257            <div class="col-4">
258              <img src="{@docRoot}auto/images/logos/apps/stitcher.png"
259                   width="160" height="160" class="img-logo" style="margin-top:-20px"
260                   />
261            </div>
262            <div class="col-4">
263              <img src="/auto/images/logos/apps/pocketcasts.png"
264                   width="160" height="160" class="img-logo" style="margin-top:-10px"
265                   />
266            </div>
267          </div>
268
269          <div class="cols">
270            <div class="col-4">
271              <img src="/auto/images/logos/apps/threema.png"
272                   width="100" height="91" class="img-logo" style="margin-top:30px"
273                   />
274            </div>
275            <div class="col-4">
276              <img src="{@docRoot}auto/images/logos/apps/skype.png"
277                   width="160" height="70" class="img-logo" style="margin-top:40px"
278                   />
279            </div>
280            <div class="col-4">
281              <img src="/auto/images/logos/apps/spotify.png"
282                   width="160" height="160" class="img-logo" />
283            </div>
284            <div class="col-4">
285              <img src="/auto/images/logos/apps/textplus.png"
286                   width="120" height="24" class="img-logo" style="margin-top:60px"
287                   />
288            </div>
289          </div>
290
291          <div class="cols">
292            <div class="col-4">
293              <img src="{@docRoot}auto/images/logos/apps/contacts.png"
294                   width="160" height="160" class="img-logo" style="margin-left:140px"
295                   />
296            </div>
297            <div class="col-4">
298              <img src="{@docRoot}auto/images/logos/apps/textme.png"
299                   width="80" height="80" class="img-logo" style="margin-top:30px;margin-left:200px"
300                   />
301            </div>
302            <div class="col-4">
303              <img src="{@docRoot}auto/images/logos/apps/whatsapp.png"
304                   width="120" height="120" class="img-logo" style="margin-top:10px;margin-left:180px" />
305            </div>
306          </div>
307
308          <div class="cols" style="margin-top:60px">
309
310              <div class="col-4">
311                <img src="/auto/images/logos/apps/npr.png"
312                     width="100" height="128" class="img-logo" />
313              </div>
314              <div class="col-8"><p style="margin-top:0px"><em>
315              "Android Auto connects NPR One listeners to a personalized stream
316              of public radio news and stories to catch up on in the car. It's
317              an engaging and driver-safe user experience that was developed
318              using the media APIs provided in Android 5.0. The available
319              development tools made the integration and testing process simple
320              for launching in a short period of time."</em></p>
321              </div>
322              </div>
323          </div>
324        </div> <!-- end .wrap -->
325      </div> <!-- end .landing-section -->
326
327
328      <div class="landing-section landing-white-background">
329        <div class="wrap">
330          <div class="landing-section-header">
331            <div class="landing-h1">Building an Ecosystem</div>
332          </div>
333          <div class="landing-body landing-align-center">
334              <div class="landing-subhead">
335              We've partnered with manufacturers around the world to bring
336               the Android platform to cars.
337              </div>
338          </div>
339
340          <div class="cols cols-leftp">
341            <div class="col-5">
342              <a href="http://www.abarth.com/">
343                  <img src="{@docRoot}auto/images/logos/auto/abarth.png"
344                      width="120" height="120" class="img-logo" />
345              </a>
346            </div>
347            <div class="col-5">
348              <a href="http://www.acura.com/">
349                  <img src="{@docRoot}auto/images/logos/auto/acura.png"
350                      width="120" height="120" class="img-logo" />
351              </a>
352            </div>
353            <div class="col-5">
354              <a href="http://www.alfaromeo.com/">
355                  <img src="{@docRoot}auto/images/logos/auto/alpharomeo.png"
356                      width="120" height="120" class="img-logo" />
357              </a>
358            </div>
359            <div class="col-5">
360              <a href="http://www.audi.com/">
361                  <img src="{@docRoot}auto/images/logos/auto/audi.png"
362                      width="120" height="120" class="img-logo" />
363              </a>
364            </div>
365          </div>
366
367          <div class="cols cols-leftp">
368            <div class="col-5">
369              <a href="http://www.bentleymotors.com/">
370                  <img src="{@docRoot}auto/images/logos/auto/bentley.png"
371                      width="120" height="120" class="img-logo" />
372              </a>
373            </div>
374            <div class="col-5">
375              <a href="http://www.borgward.com/en/">
376                  <img src="{@docRoot}auto/images/logos/auto/borgward.png"
377                      width="120" height="120" class="img-logo" />
378              </a>
379            </div>
380            <div class="col-5">
381              <a href="http://www.buick.com/">
382                  <img src="{@docRoot}auto/images/logos/auto/buick.png"
383                      width="120" height="120" class="img-logo" />
384              </a>
385            </div>
386            <div class="col-5">
387              <a href="http://www.cadillac.com/">
388                  <img src="{@docRoot}auto/images/logos/auto/cadillac.png"
389                      width="120" height="120" class="img-logo" />
390              </a>
391            </div>
392          </div>
393
394          <div class="cols cols-leftp">
395            <div class="col-5">
396              <a href="http://www.chevrolet.com/">
397                  <img src="{@docRoot}auto/images/logos/auto/chevrolet.png"
398                      width="120" height="120" class="img-logo" />
399              </a>
400            </div>
401            <div class="col-5">
402              <a href="http://www.chrysler.com/">
403                  <img src="{@docRoot}auto/images/logos/auto/chrysler.png"
404                      width="120" height="120" class="img-logo" />
405              </a>
406            </div>
407            <div class="col-5">
408              <a href="http://www.citroen.com/">
409                  <img src="{@docRoot}auto/images/logos/auto/citroen.png"
410                      width="120" height="120" class="img-logo" />
411              </a>
412            </div>
413            <div class="col-5">
414              <a href="http://www.dodge.com/">
415                  <img src="{@docRoot}auto/images/logos/auto/dodge.png"
416                      width="120" height="120" class="img-logo" />
417              </a>
418            </div>
419          </div>
420
421          <div class="cols cols-leftp">
422            <div class="col-5">
423              <a href="http://www.driveds.com/">
424                  <img src="{@docRoot}auto/images/logos/auto/citroen_ds.png"
425                      width="120" height="120" class="img-logo" />
426              </a>
427            </div>
428            <div class="col-5">
429              <a href="http://www.fiat.com/">
430                  <img src="{@docRoot}auto/images/logos/auto/fiat.png"
431                      width="120" height="120" class="img-logo" />
432              </a>
433            </div>
434            <div class="col-5">
435              <a href="http://www.ford.com/">
436                  <img src="{@docRoot}auto/images/logos/auto/ford.png"
437                      width="120" height="120" class="img-logo" />
438              </a>
439            </div>
440            <div class="col-5">
441              <a href="http://www.genesismotors.com/en/index.html">
442                  <img src="{@docRoot}auto/images/logos/auto/genesis.png"
443                      width="120" height="120" class="img-logo" />
444              </a>
445            </div>
446          </div>
447            <div class="cols cols-leftp">
448              <div class="col-5">
449                <a href="http://www.gmc.com/">
450                  <img src="{@docRoot}auto/images/logos/auto/gmc.png"
451                      width="120" height="120" class="img-logo" />
452                </a>
453              </div>
454            <div class="col-5">
455              <a href="http://www.holden.com/">
456                  <img src="{@docRoot}auto/images/logos/auto/holden.png"
457                      width="120" height="120" class="img-logo" />
458              </a>
459            </div>
460            <div class="col-5">
461              <a href="http://www.honda.com/">
462                  <img src="{@docRoot}auto/images/logos/auto/honda.png"
463                      width="120" height="120" class="img-logo" />
464              </a>
465            </div>
466            <div class="col-5">
467              <a href="http://www.hyundai.com">
468                  <img src="{@docRoot}auto/images/logos/auto/hyundai.png"
469                      width="120" height="120" class="img-logo" />
470              </a>
471            </div>
472          </div>
473            <div class="cols cols-leftp">
474              <div class="col-5">
475                <a href="http://www.infiniti.com/">
476                  <img src="{@docRoot}auto/images/logos/auto/infinity.png"
477                      width="120" height="120" class="img-logo" />
478                </a>
479              </div>
480              <div class="col-5">
481                <a href="http://www.jaguar.com/index.html">
482                  <img src="{@docRoot}auto/images/logos/auto/jaguar.png"
483                      width="120" height="120" class="img-logo" />
484                </a>
485              </div>
486              <div class="col-5">
487                <a href="http://www.jeep.com/">
488                  <img src="{@docRoot}auto/images/logos/auto/jeep.png"
489                      width="120" height="120" class="img-logo" />
490                </a>
491              </div>
492
493              <div class="col-5">
494                <a href="http://www.kia.com/worldwide/">
495                  <img src="{@docRoot}auto/images/logos/auto/kia.png"
496                      width="120" height="120" class="img-logo" />
497                </a>
498              </div>
499            </div>
500            <div class="cols cols-leftp">
501              <div class="col-5">
502                <a href=" http://koenigsegg.com/">
503                  <img src="/auto/images/logos/auto/koenigsegg.png"
504                      width="120" height="120" class="img-logo" />
505                </a>
506              </div>
507              <div class="col-5">
508                <a href="  http://www.lada.ru/en/">
509                  <img src="{@docRoot}auto/images/logos/auto/lada.png"
510                      width="120" height="120" class="img-logo" />
511                </a>
512              </div>
513              <div class="col-5">
514                <a href=" http://www.lamborghini.com/">
515                  <img src="{@docRoot}auto/images/logos/auto/lambo.png"
516                      width="120" height="120" class="img-logo" />
517                </a>
518              </div>
519              <div class="col-5">
520                <a href=" http://www.landrover.com/">
521                  <img src="{@docRoot}auto/images/logos/auto/landrover.png"
522                      width="120" height="120" class="img-logo" />
523                </a>
524              </div>
525            </div>
526            <div class="cols cols-leftp">
527              <div class="col-5">
528                <a href=" http://www.lincoln.com/">
529                  <img src="{@docRoot}auto/images/logos/auto/lincoln.png"
530                    width="120" height="120" class="img-logo" />
531                </a>
532              </div>
533              <div class="col-5">
534                <a href="http://www.mahindra.com/">
535                  <img src="{@docRoot}auto/images/logos/auto/mahindra.png"
536                      width="120" height="120" class="img-logo" />
537                </a>
538              </div>
539              <div class="col-5">
540                <a href="http://www.maserati.com/">
541                  <img src="{@docRoot}auto/images/logos/auto/maserati.png"
542                      width="120" height="120" class="img-logo" />
543                </a>
544              </div>
545              <div class="col-5">
546                <a href="http://www.mazda.com/">
547                  <img src="{@docRoot}auto/images/logos/auto/mazda.png"
548                      width="120" height="120" class="img-logo" />
549                </a>
550              </div>
551            </div>
552            <div class="cols cols-leftp">
553              <div class="col-5">
554                <a href="http://www.mercedes-benz.com/">
555                  <img src="{@docRoot}auto/images/logos/auto/mbenz.png"
556                      width="120" height="120" class="img-logo" />
557                </a>
558              </div>
559              <div class="col-5">
560                <a href="http://www.mitsubishi-motors.com/">
561                  <img src="{@docRoot}auto/images/logos/auto/mitsubishi.png"
562                      width="120" height="120" class="img-logo" />
563                </a>
564              </div>
565              <div class="col-5">
566                <a href="http://www.nissan-global.com/">
567                  <img src="{@docRoot}auto/images/logos/auto/nissan.png"
568                      width="120" height="120" class="img-logo" />
569                </a>
570              </div>
571              <div class="col-5">
572                <a href="http://www.opel.com/">
573                  <img src="{@docRoot}auto/images/logos/auto/opel.png"
574                      width="120" height="120" class="img-logo" />
575                </a>
576              </div>
577            </div>
578            <div class="cols cols-leftp">
579              <div class="col-5">
580                <a href="http://www.peugeot.com/">
581                  <img src="{@docRoot}auto/images/logos/auto/peugeot.png"
582                      width="120" height="120" class="img-logo" />
583                </a>
584              </div>
585              <div class="col-5">
586                <a href="http://www.ramtrucks.com/">
587                  <img src="{@docRoot}auto/images/logos/auto/ram.png"
588                      width="120" height="120" class="img-logo" />
589                </a>
590              </div>
591              <div class="col-5">
592                <a href="http://www.renault.com/">
593                  <img src="{@docRoot}auto/images/logos/auto/renault.png"
594                      width="120" height="120" class="img-logo" />
595                </a>
596              </div>
597              <div class="col-5">
598                <a href="http://www.renaultsamsungm.com/ ">
599                  <img src="{@docRoot}auto/images/logos/auto/rsm.png"
600                      width="120" height="120" class="img-logo" />
601                </a>
602              </div>
603            </div>
604            <div class="cols cols-leftp">
605              <div class="col-5">
606                <a href="http://www.seat.com/">
607                  <img src="{@docRoot}auto/images/logos/auto/seat.png"
608                      width="120" height="120" class="img-logo" />
609                </a>
610              </div>
611              <div class="col-5">
612                <a href="http://www.skoda-auto.com/">
613                  <img src="{@docRoot}auto/images/logos/auto/skoda.png"
614                      width="120" height="120" class="img-logo" />
615                </a>
616              </div>
617              <div class="col-5">
618                <a href="http://www.smotor.com/">
619                  <img src="{@docRoot}auto/images/logos/auto/ssangyong.png"
620                      width="120" height="120" class="img-logo" />
621                </a>
622              </div>
623              <div class="col-5">
624                <a href="http://www.subaru-global.com/">
625                  <img src="{@docRoot}auto/images/logos/auto/subaru.png"
626                      width="120" height="120" class="img-logo" />
627                </a>
628              </div>
629            </div>
630            <div class="cols cols-leftp">
631              <div class="col-5">
632                <a href="http://www.globalsuzuki.com/automobile/">
633                  <img src="{@docRoot}auto/images/logos/auto/suzuki.png"
634                      width="120" height="120" class="img-logo" />
635                </a>
636              </div>
637              <div class="col-5">
638                <a href="http://www.tatamotors.com/">
639                  <img src="{@docRoot}auto/images/logos/auto/tata.png"
640                      width="120" height="120" class="img-logo" />
641                </a>
642              </div>
643              <div class="col-5">
644                <a href="http://www.vauxhall.co.uk/">
645                  <img src="{@docRoot}auto/images/logos/auto/vauxhall.png"
646                      width="120" height="120" class="img-logo" />
647                </a>
648              </div>
649              <div class="col-5">
650                <a href="http://www.volkswagen.com/">
651                  <img src="{@docRoot}auto/images/logos/auto/volkswagen.png"
652                      width="120" height="120" class="img-logo" />
653                </a>
654              </div>
655			      </div>
656            <div class="cols cols-leftp">
657              <div class="col-5">
658                <a href="http://www.volvocars.com/intl">
659                  <img src="{@docRoot}auto/images/logos/auto/volvo.png"
660                      width="120" height="120" class="img-logo" />
661                </a>
662              </div>
663            </div>
664      </div>
665
666      <div class="landing-section landing-red-background">
667        <div class="wrap">
668          <div class="landing-section-header">
669            <div class="landing-h1 landing-align-left">Get Started with Android Auto</div>
670
671            <div class="landing-subhead landing-subhead-red">
672              <p>
673                Set up your development environment and start working with the APIs.
674                We’re excited about the experiences you'll create and can't
675                wait to see what you do next.</p>
676            </div>
677          </div>
678          <div class="landing-body">
679            <a href="{@docRoot}training/auto/index.html"
680            class="landing-button landing-primary" style="margin-top: 20px;">
681              Get Started
682            </a>
683          </div>
684        </div>
685      </div>
686  </div>
687
688  <script>
689  $("a.landing-down-arrow").on("click", function(e) {
690    $("body").animate({
691      scrollTop: $(".auto-hero").height() + 120
692    }, 1000, "easeOutQuint");
693    e.preventDefault();
694  });
695  </script>
696
697</div> <!-- end landing-body-content -->
698