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