page.title=About Android TV
page.type=about
page.image=images/cards/android-tv_2x.png
page.viewport_width=970
page.tags="tv", "leanback"
page.metaDescription=Bring your apps, games, and content to the biggest screen in the house.
fullpage=true
no_footer_links=true
page.type=about
nonavpage=true
@jd:body
<style>
.fullpage>#footer,
#body-content>.content-footer.wrap {
display:none;
}
</style>
<div class="landing-body-content">
<div class="landing-hero-container">
<div class="landing-section tv-hero">
<div class="landing-hero-scrim"></div>
<div class="landing-hero-wrap">
<div class="vertical-center-outer">
<div class="vertical-center-inner">
<div class="col-10">
<div class="landing-section-header">
<div class="landing-h1 hero">Android TV</div>
<div class="landing-subhead hero">Big screen apps, games, and content</div>
<div class="landing-hero-description">
<p>Recommend great content to users right on the home screen.
Enable users to find movies through voice search.
Engage users with fluid, immersive games.</p>
</div>
</div>
<div class="landing-body">
<a href="{@docRoot}training/tv/index.html" class="landing-button
landing-primary" style="margin-top: 40px;">
Get Started
</a>
</div>
</div>
</div>
</div>
</div> <!-- end .wrap -->
<div class="landing-scroll-down-affordance">
<a class="landing-down-arrow" href="#reimagine-your-app">
<img src="{@docRoot}wear/images/carrot.png" alt="Scroll down to read more">
</a>
</div>
</div> <!-- end .landing-section .landing-hero -->
<div class="landing-rest-of-page">
<div class="landing-section" style="background-color:#f5f5f5" id="reimagine-your-app">
<div class="wrap">
<div class="landing-section-header">
<div class="landing-h1">Reimagine Your App</div>
<div class="landing-subhead">
Design your app to shine on the biggest screen in the house.
</div>
</div>
<div class="landing-body landing-align-center">
<img src="{@docRoot}tv/images/atv-framed.png" alt="Android TV" >
<p>Simple. Cinematic. Beautiful.</p>
<p class="landing-small">
Smooth, fast interactions are key to a successful TV app. Keep navigation simple
and light. <br>Bring your content forward to let users enjoy it with a minimum of
effort.
</p>
<p class="landing-small">
<a href="{@docRoot}design/tv/index.html">Learn about design for TV</a>
</p>
</div>
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
<div class="landing-section landing-gray-background">
<div class="wrap">
<div class="landing-section-header">
<div class="landing-h1">Build to Entertain</div>
<div class="landing-subhead">
Android TV lets you engage your users in a new, shared environment.<br>
Find out how to get your app ready for its big-screen debut.
</div>
</div>
<div class="landing-body">
<div class="landing-breakout cols">
<div class="col-3-wide">
<img src="{@docRoot}tv/images/components.png" alt="TV layout components"
style="margin-left: 23px;">
<p>Made for TV</p>
<p class="landing-small">
Take advantage of pre-built fragments for browsing and interacting with media
catalogs.
</p>
<p class="landing-small">
<a href="{@docRoot}training/tv/playback/index.html">Learn pre-built fragments</a>
</p>
</div>
<div class="col-3-wide">
<img src="{@docRoot}tv/images/search.png" alt="Search"
style="margin-left: 23px;">
<p>Get Found</p>
<p class="landing-small">
Help users find your content quickly with in-app searching.
</p>
<p class="landing-small">
<a href="{@docRoot}training/tv/discovery/in-app-search.html">Learn about app search</a>
</p>
</div>
<div class="col-3-wide">
<img src="{@docRoot}tv/images/recommendations.png" alt="Recommendations"
style="margin-left: 23px;">
<p>Recommend</p>
<p class="landing-small">
Suggest content from your app to keep your users coming back.
</p>
<p class="landing-small">
<a href="{@docRoot}training/tv/discovery/recommendations.html">Learn about
recommendations</a>
</p>
</div>
</div>
</div>
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
<div class="landing-section" style="background-color:#f5f5f5" id="tv-games-channels">
<div class="wrap">
<div class="landing-section-header">
<div class="landing-h1">Develop Games and Channels</div>
</div>
<div class="landing-body">
<div class="cols">
<div class="col-8">
<div class="landing-h3">Play Games on TV</div>
<p class="landing-small" style="padding-left:0px; padding-top:15px;">
Build apps that let users experience high-performance gaming in leanback mode.
Users can discover your apps easily through the Games row in the Android TV
Launcher.<br>
<a href="{@docRoot}training/tv/games/index.html">Learn how to build games for TV</a>
</p>
</div>
<div class="col-8">
<div class="landing-h3">Keep Users Engaged with Channels</div>
<p class="landing-small" style="padding-left:0px; padding-top:15px;">
Create apps that serve video and music content in a linear, channel-like
fashion to users. Users see your channels alongside traditional TV channels in the
programming guide.<br>
<a href="{@docRoot}training/tv/tif/index.html">Learn how to build channels</a>
</p>
</div>
</div>
</div>
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
<div class="landing-section landing-red-background">
<div class="wrap">
<div class="landing-section-header">
<div class="landing-h1 landing-align-left">Get Started with Android TV</div>
<div class="landing-subhead landing-subhead-red">
<p>
Set up your development environment to build apps for TV.
Start creating your big-screen experience!
</p>
</div>
</div>
<div class="landing-body">
<a href="{@docRoot}training/tv/start/index.html" class="landing-button landing-primary"
style="margin-top: 20px;">
Get Started
</a>
</div>
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
<div class="landing-section">
<div class="wrap">
<div class="cols">
<div class="landing-body">
<div class="col-3-wide">
<a target="_blank" href="http://android-developers.blogspot.com/2014/06/android-tv-and-google-cast.html">
<img class="landing-social-image" src="{@docRoot}wear/images/blogger.png" alt="">
</a>
<div class="landing-social-copy">
<p>Blog Post</p>
<p class="landing-small">
Read more about Android TV development
on our blog. Just search for "Android TV".
</p>
<p class="landing-small">
<a target="_blank" href="http://android-developers.blogspot.com">Android
Developers Blog</a>
</p>
<p></p>
</div>
</div>
<div class="col-3-wide">
<a target="_blank" href="http://g.co/androidtvdev">
<img class="landing-social-image" src="//www.google.com/images/icons/product/gplus-128.png" alt="+Android Wear Developers">
</a>
<div class="landing-social-copy">
<p>G+ Community</p>
<p class="landing-small">
Follow us on Google+ to stay up-to-date with Android TV development and to
join the discussion!
</p>
<p class="landing-small">
<a target="_blank" href="http://g.co/androidtvdev">+Android TV Developers</a>
</p>
</div>
</div>
<div class="col-3-wide">
<a target="_blank" href="{@docRoot}tv/adt-1/index.html">
<img class="landing-social-image" src="{@docRoot}wear/images/blogger.png" alt="">
</a>
<div class="landing-social-copy">
<p>ADT-1 Kit</p>
<p class="landing-small">
Get information about the streaming media player
for developing and testing apps for TV.
</p>
<p class="landing-small">
<a target="_blank" href="{@docRoot}tv/adt-1/index.html">ADT-1 Development
Kit</a>
</p>
</div>
</div>
</div>
</div>
</div> <!-- end .wrap -->
</div> <!-- end .landing-section -->
</div> <!-- end .landing-rest-of-page -->
<script>
$("a.landing-down-arrow").on("click", function(e) {
$("body").animate({
scrollTop: $(".tv-hero").height() + 120
}, 1000, "easeOutQuint");
e.preventDefault();
});
</script>
</div> <!-- end landing-body-content -->