1page.title=About Android TV
2page.type=about
3page.image=images/cards/android-tv_2x.png
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      <div class="landing-section" style="background-color:#f5f5f5" id="tv-games-channels">
149        <div class="wrap">
150          <div class="landing-section-header">
151            <div class="landing-h1">Develop Games and Channels</div>
152          </div>
153
154          <div class="landing-body">
155            <div class="cols">
156              <div class="col-8">
157                <div class="landing-h3">Play Games on TV</div>
158                <p class="landing-small" style="padding-left:0px; padding-top:15px;">
159                  Build apps that let users experience high-performance gaming in leanback mode.
160                  Users can discover your apps easily through the Games row in the Android TV
161                  Launcher.<br>
162                <a href="{@docRoot}training/tv/games/index.html">Learn how to build games for TV</a>
163                </p>
164              </div>
165              <div class="col-8">
166                <div class="landing-h3">Keep Users Engaged with Channels</div>
167                <p class="landing-small" style="padding-left:0px; padding-top:15px;">
168                  Create apps that serve video and music content in a linear, channel-like
169                  fashion to users. Users see your channels alongside traditional TV channels in the
170                  programming guide.<br>
171                <a href="{@docRoot}training/tv/tif/index.html">Learn how to build channels</a>
172                </p>
173              </div>
174            </div>
175          </div>
176        </div> <!-- end .wrap -->
177      </div> <!-- end .landing-section -->
178
179      <div class="landing-section landing-red-background">
180        <div class="wrap">
181          <div class="landing-section-header">
182            <div class="landing-h1 landing-align-left">Get Started with Android TV</div>
183
184            <div class="landing-subhead landing-subhead-red">
185              <p>
186                 Set up your development environment to build apps for TV.
187                 Start creating your big-screen experience!
188              </p>
189            </div>
190          </div>
191          <div class="landing-body">
192            <a href="{@docRoot}training/tv/start/index.html" class="landing-button landing-primary"
193              style="margin-top: 20px;">
194              Get Started
195            </a>
196          </div>
197        </div>  <!-- end .wrap -->
198      </div> <!-- end .landing-section -->
199
200      <div class="landing-section">
201        <div class="wrap">
202          <div class="cols">
203            <div class="landing-body">
204
205              <div class="col-3-wide">
206                <a target="_blank" href="http://android-developers.blogspot.com/2014/06/android-tv-and-google-cast.html">
207                  <img class="landing-social-image" src="{@docRoot}wear/images/blogger.png" alt="">
208                </a>
209                <div class="landing-social-copy">
210                  <p>Blog Post</p>
211                  <p class="landing-small">
212                    Read more about Android TV development
213                    on our blog. Just search for "Android TV".
214                  </p>
215                    <p class="landing-small">
216                    <a target="_blank" href="http://android-developers.blogspot.com">Android
217                      Developers Blog</a>
218                    </p>
219                  <p></p>
220                </div>
221              </div>
222
223              <div class="col-3-wide">
224                <a target="_blank" href="http://g.co/androidtvdev">
225                  <img class="landing-social-image" src="//www.google.com/images/icons/product/gplus-128.png" alt="+Android Wear Developers">
226                </a>
227                <div class="landing-social-copy">
228                  <p>G+ Community</p>
229                  <p class="landing-small">
230                    Follow us on Google+ to stay up-to-date with Android TV development and to
231                    join the discussion!
232                  </p>
233                  <p class="landing-small">
234                    <a target="_blank" href="http://g.co/androidtvdev">+Android TV Developers</a>
235                  </p>
236                </div>
237              </div>
238
239              <div class="col-3-wide">
240                  <a target="_blank" href="{@docRoot}tv/adt-1/index.html">
241                  <img class="landing-social-image" src="{@docRoot}wear/images/blogger.png" alt="">
242                  </a>
243                <div class="landing-social-copy">
244                  <p>ADT-1 Kit</p>
245                    <p class="landing-small">
246                    Get information about the streaming media player
247                    for developing and testing apps for TV.
248                    </p>
249                    <p class="landing-small">
250                      <a target="_blank" href="{@docRoot}tv/adt-1/index.html">ADT-1 Development
251                        Kit</a>
252                    </p>
253                </div>
254              </div>
255
256            </div>
257          </div>
258        </div> <!-- end .wrap -->
259      </div> <!-- end .landing-section -->
260
261    </div> <!-- end .landing-rest-of-page -->
262
263    <div class="content-footer wrap" itemscope="" itemtype="http://schema.org/SiteNavigationElement">
264      <div class="layout-content-col col-16" style="padding-top:4px">
265        <style>#___plusone_0 {float:right !important;}</style>
266        <div class="g-plusone" data-size="medium"></div>
267      </div>
268    </div>
269    <div id="footer" class="wrap" style="width:940px;position:relative;top:-35px;z-index:-1">
270      <div id="copyright">
271        Except as noted, this content is
272        licensed under <a href="http://creativecommons.org/licenses/by/2.5/">
273        Creative Commons Attribution 2.5</a>. For details and
274        restrictions, see the <a href="/license.html">Content
275        License</a>.
276      </div>
277    </div>
278
279  </div> <!-- end .landing-hero-container -->
280
281  <script>
282  $("a.landing-down-arrow").on("click", function(e) {
283    $("body").animate({
284      scrollTop: $(".tv-hero").height() + 120
285    }, 1000, "easeOutQuint");
286    e.preventDefault();
287  });
288  </script>
289
290</div> <!-- end landing-body-content -->
291
292