Home | History | Annotate | Download | only in tv
      1 page.title=Android TV
      2 page.viewport_width=970
      3 fullpage=true
      4 no_footer_links=true
      5 page.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