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