• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1page.title=About Android TV
2page.type=about
3page.image=tv/images/hero.jpg
4page.viewport_width=970
5page.tags="tv", "leanback"
6page.metaDescription=Bring your apps, games, and content to the biggest screen in the house.
7fullpage=true
8no_footer_links=true
9page.type=about
10
11@jd:body
12
13<style>
14.fullpage>#footer,
15#jd-content>.content-footer.wrap {
16  display:none;
17}
18</style>
19
20
21<div class="landing-body-content">
22
23  <div class="landing-hero-container">
24
25    <div class="landing-section tv-hero">
26      <div class="landing-hero-scrim"></div>
27      <div class="landing-hero-wrap">
28        <div class="vertical-center-outer">
29          <div class="vertical-center-inner">
30
31            <div class="col-10">
32              <div class="landing-section-header">
33                <div class="landing-h1 hero">Android TV</div>
34                <div class="landing-subhead hero">Big screen apps, games, and content</div>
35                <div class="landing-hero-description">
36                  <p>Recommend great content to users right on the home screen.
37                    Enable users to find movies through voice search.
38                    Engage users with fluid, immersive games.</p>
39                </div>
40              </div>
41
42              <div class="landing-body">
43                <a href="{@docRoot}training/tv/index.html" class="landing-button
44                  landing-primary" style="margin-top: 40px;">
45                  Get Started
46                </a>
47              </div>
48            </div>
49          </div>
50        </div>
51      </div> <!-- end .wrap -->
52      <div class="landing-scroll-down-affordance">
53        <a class="landing-down-arrow" href="#reimagine-your-app">
54          <img src="{@docRoot}wear/images/carrot.png" alt="Scroll down to read more">
55        </a>
56      </div>
57    </div> <!-- end .landing-section .landing-hero -->
58
59    <div class="landing-rest-of-page">
60
61      <div class="landing-section" style="background-color:#f5f5f5" id="reimagine-your-app">
62        <div class="wrap">
63
64          <div class="landing-section-header">
65            <div class="landing-h1">Reimagine Your App</div>
66            <div class="landing-subhead">
67              Design your app to shine on the biggest screen in the house.
68            </div>
69          </div>
70
71          <div class="landing-body landing-align-center">
72            <img src="{@docRoot}tv/images/atv-framed.png" alt="Android TV" >
73            <p>Simple. Cinematic. Beautiful.</p>
74            <p class="landing-small">
75              Smooth, fast interactions are key to a successful TV app. Keep navigation simple
76              and light. <br>Bring your content forward to let users enjoy it with a minimum of
77              effort.
78            </p>
79            <p class="landing-small">
80              <a href="{@docRoot}design/tv/index.html">Learn about design for TV</a>
81            </p>
82          </div>
83
84        </div>  <!-- end .wrap -->
85      </div>  <!-- end .landing-section -->
86
87      <div class="landing-section landing-gray-background">
88        <div class="wrap">
89          <div class="landing-section-header">
90            <div class="landing-h1">Build to Entertain</div>
91            <div class="landing-subhead">
92              Android TV lets you engage your users in a new, shared environment.<br>
93              Find out how to get your app ready for its big-screen debut.
94            </div>
95          </div>
96
97
98          <div class="landing-body">
99            <div class="landing-breakout cols">
100
101              <div class="col-3-wide">
102                <img src="{@docRoot}tv/images/components.png" alt="TV layout components"
103                  style="margin-left: 23px;">
104
105                <p>Made for TV</p>
106                <p class="landing-small">
107                  Take advantage of pre-built fragments for browsing and interacting with media
108                  catalogs.
109                </p>
110                <p class="landing-small">
111                  <a href="{@docRoot}training/tv/playback/index.html">Learn pre-built fragments</a>
112                </p>
113              </div>
114
115              <div class="col-3-wide">
116                <img src="{@docRoot}tv/images/search.png" alt="Search"
117                  style="margin-left: 23px;">
118
119                <p>Get Found</p>
120                <p class="landing-small">
121                  Help users find your content quickly with in-app searching.
122                </p>
123                <p class="landing-small">
124                  <a href="{@docRoot}training/tv/discovery/in-app-search.html">Learn about app search</a>
125                </p>
126              </div>
127
128              <div class="col-3-wide">
129                <img src="{@docRoot}tv/images/recommendations.png" alt="Recommendations"
130                  style="margin-left: 23px;">
131
132                <p>Recommend</p>
133                <p class="landing-small">
134                  Suggest content from your app to keep your users coming back.
135                </p>
136                <p class="landing-small">
137                  <a href="{@docRoot}training/tv/discovery/recommendations.html">Learn about
138                    recommendations</a>
139                </p>
140              </div>
141
142            </div>
143
144          </div>
145        </div>  <!-- end .wrap -->
146      </div> <!-- end .landing-section -->
147
148
149      <div class="landing-section landing-red-background">
150        <div class="wrap">
151          <div class="landing-section-header">
152            <div class="landing-h1 landing-align-left">Get Started with Android TV</div>
153
154            <div class="landing-subhead landing-subhead-red">
155              <p>
156                 Set up your development environment to build apps for TV.
157                 Start creating your big-screen experience!
158              </p>
159            </div>
160          </div>
161          <div class="landing-body">
162            <a href="{@docRoot}training/tv/start/index.html" class="landing-button landing-primary"
163              style="margin-top: 20px;">
164              Get Started
165            </a>
166          </div>
167        </div>  <!-- end .wrap -->
168      </div> <!-- end .landing-section -->
169
170      <div class="landing-section">
171        <div class="wrap">
172          <div class="cols">
173            <div class="landing-body">
174
175              <div class="col-3-wide">
176                <a target="_blank" href="http://android-developers.blogspot.com/2014/06/android-tv-and-google-cast.html">
177                  <img class="landing-social-image" src="{@docRoot}wear/images/blogger.png" alt="">
178                </a>
179                <div class="landing-social-copy">
180                  <p>Blog Post</p>
181                  <p class="landing-small">
182                    Read more about Android TV development
183                    on our blog. Just search for "Android TV".
184                  </p>
185                    <p class="landing-small">
186                    <a target="_blank" href="http://android-developers.blogspot.com">Android
187                      Developers Blog</a>
188                    </p>
189                  <p></p>
190                </div>
191              </div>
192
193              <div class="col-3-wide">
194                <a target="_blank" href="http://g.co/androidtvdev">
195                  <img class="landing-social-image" src="//www.google.com/images/icons/product/gplus-128.png" alt="+Android Wear Developers">
196                </a>
197                <div class="landing-social-copy">
198                  <p>G+ Community</p>
199                  <p class="landing-small">
200                    Follow us on Google+ to stay up-to-date with Android TV development and to
201                    join the discussion!
202                  </p>
203                  <p class="landing-small">
204                    <a target="_blank" href="http://g.co/androidtvdev">+Android TV Developers</a>
205                  </p>
206                </div>
207              </div>
208
209              <div class="col-3-wide">
210                  <a target="_blank" href="{@docRoot}tv/adt-1/index.html">
211                  <img class="landing-social-image" src="{@docRoot}wear/images/blogger.png" alt="">
212                  </a>
213                <div class="landing-social-copy">
214                  <p>ADT-1 Kit</p>
215                    <p class="landing-small">
216                    Get information about the streaming media player
217                    for developing and testing apps for TV.
218                    </p>
219                    <p class="landing-small">
220                      <a target="_blank" href="{@docRoot}tv/adt-1/index.html">ADT-1 Development
221                        Kit</a>
222                    </p>
223                </div>
224              </div>
225
226            </div>
227          </div>
228        </div> <!-- end .wrap -->
229      </div> <!-- end .landing-section -->
230
231    </div> <!-- end .landing-rest-of-page -->
232
233    <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
234      <div class="layout-content-col col-16" style="padding-top:4px">
235        <style>#___plusone_0 {float:right !important;}</style>
236        <div class="g-plusone" data-size="medium"></div>
237      </div>
238    </div>
239    <div id="footer" class="wrap" style="width:940px;position:relative;top:-35px;z-index:-1">
240      <div id="copyright">
241        Except as noted, this content is
242        licensed under <a href="http://creativecommons.org/licenses/by/2.5/">
243        Creative Commons Attribution 2.5</a>. For details and
244        restrictions, see the <a href="/license.html">Content
245        License</a>.
246      </div>
247    </div>
248
249  </div> <!-- end .landing-hero-container -->
250
251  <script>
252  $("a.landing-down-arrow").on("click", function(e) {
253    $("body").animate({
254      scrollTop: $(".tv-hero").height() + 120
255    }, 1000, "easeOutQuint");
256    e.preventDefault();
257  });
258  </script>
259
260</div> <!-- end landing-body-content -->
261
262