docs/html/develop/index.jd

   1 fullpage=true
   2 page.title=Develop
   3 header.hide=1
   4 carousel=1
   5 tabbedList=1
   6 excludeFromSuggestions=true
   7 @jd:body
   8
   9 <style>
  10 #noplayer-message {
  11 position:absolute;top:50%;left:0;width:100%;z-index:-1;text-align:center;display:none;
  12 }
  13 #player-frame object {z-index:1;}
  14 </style>
  15
  16 <div id="player-wrapper">
  17   <div id="player-frame">
  18     <div id="noplayer-message">
  19       <!-- busted flash player message -->
  20       Your video is supposed to appear here.<br/>
  21       Make sure you have the <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash&reg; Player</a>.
  22     </div>
  23     <div id="player"><!-- Youtube embeds here... actually replaces this div --></div>
  24     <a class="close" onclick="$('#player-wrapper').hide()">close video</a>
  25   </div>
  26 </div>
  27 <div class="wrap">
  28    <!-- Slideshow -->
  29    <div class="slideshow-container slideshow-develop col-16">
  30        <a href="" class="slideshow-prev">Prev</a>
  31        <a href="" class="slideshow-next">Next</a>
  32        <div class="frame">
  33            <ul>
  34
  35               <li class="item carousel-home">
  36                  <div class="col-8">
  37                    <img
  38 src="//lh4.ggpht.com/-lfjzgG5Dqrk/UHMThRtpRwI/AAAAAAAABpk/h4d3nsmkgPM/s400/mint.png"
  39 class="play no-shadow no-transform" />
  40                  </div>
  41                 <div class="content-right col-6">
  42                   <h2>Building Great Apps for Tablets</h2>
  43                   <p>Tablets are a fast-growing part of the Android installed base and they offer new opportunities for user engagement and monetization. If you are targeting tablets, check out this list of tips and techniques on how to deliver a great app experience for tablet users.  </p>
  44                   <p><a
  45 href="//android-developers.blogspot.com/2012/11/designing-for-tablets-were-here-to-help.html" class="button">Read
  46 more</a></p>
  47                 </div>
  48               </li>
  49               <li class="item carousel-home">
  50                  <div class="col-8">
  51                    <img src="{@docRoot}images/google/gps-location.png"
  52 class="play no-shadow no-transform" style="margin:0 0 0 70px;height:230px;width:340px" />
  53                  </div>
  54                 <div class="content-right col-6" style="width:350px">
  55                   <h2>New Location APIs from Google</h2>
  56                   <p>The latest version of Google Play services includes new APIs that provide more
  57                   efficient and immediate user location data on devices running Android 2.2
  58                   and higher. Features include geofencing APIs, user activity recognition, and
  59                   power-efficient location updates.</p>
  60                   <p><a
  61 href="{@docRoot}google/play-services/location.html" class="button">Read more</a></p>
  62                 </div>
  63               </li>
  64
  65               <li class="item carousel-home">
  66                  <div class="col-8">
  67                    <img src="{@docRoot}images/google/gps-plus-signin-hero.jpg"
  68 class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px;
  69                                            max-width:409px;width:409px" />
  70                  </div>
  71                 <div class="content-right col-6" style="width:350px">
  72                   <h2>New Cross-Platform Single Sign On</h2>
  73                   <p>Google+ Sign-In is an easy, trusted way to sign a user into your app.
  74                   Now it's even more seamless. A user can sign in to your app on one device and
  75                   pick it up on another&mdash;without signing in again. Best of all, it's built
  76                   into Google+ Sign-in, so there's no change needed in your app.</p>
  77                   <p><a
  78 href="{@docRoot}google/play-services/plus.html" class="button">Read more</a></p>
  79                 </div>
  80               </li>
  81
  82               <li class="item carousel-home">
  83                  <div class="col-8">
  84                    <img src="{@docRoot}images/google/maps-v2-trulia-n7.png"
  85 class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px;
  86                                            max-width:409px;width:409px" />
  87                  </div>
  88                 <div class="content-right col-6" style="width:350px">
  89                   <h2>New Google Maps Android APIs!</h2>
  90                   <p>Google Maps Android API version 2 is now available with enhanced
  91                     features such as 3D buildings, vector-based map tiles, rich overlay capabilities,
  92                     indoor maps, support for fragments, and much more.</p>
  93
  94                   <p>The APIs are bundled with Google Play services and are
  95                   compatible with Android 2.2 and higher.</p>
  96                   <p><a
  97 href="{@docRoot}google/play-services/maps.html" class="button">Read more</a></p>
  98                 </div>
  99               </li>
 100            </ul>
 101        </div>
 102    </div>
 103    <!-- /End slideshow -->
 104 </div>
 105 <div class="wrap">
 106         <!-- news and feature feed -->
 107         <div class="feed col-8" style="margin-left:0">
 108                 <ul class="feed-nav">
 109                         <li class="active">DEVELOPER NEWS</li>
 110                         <li>FEATURED DOCS</li>
 111                 </ul>
 112                 <div class="feed-container">
 113                         <div class="feed-frame">
 114                                 <!-- DEVELOPER NEWS -->
 115           <ul>
 116             <li><a href="//android-developers.blogspot.com/2013/07/making-beautiful-android-app-icons.html">
 117               <div class="feed-image" style="background:url('//2.bp.blogspot.com/-HfoO6KNFBKA/UeiyRoELb7I/AAAAAAAAAFs/bHR-5viktU4/s1000/icons.png') no-repeat 0 0;background-size:500px;background-position:center center;"></div>
 118               <h4>Making Beautiful Android App Icons</h4>
 119               <p>As higher density screens gain popularity, it's important to make sure your launcher icon is crisp and high quality...</p>
 120               </a></li>
 121             <li><a href="//android-developers.blogspot.com/2013/07/beautiful-design-collection-summer-2013.html">
 122               <div class="feed-image" style="background:url('//1.bp.blogspot.com/-k8DZYu0daT4/UdRt1AzstvI/AAAAAAAAAFM/CvEkb2yh-i0/s965/beautifulapps_4.png') no-repeat 0 0"></div>
 123               <h4>The Beautiful Design Summer 2013 Collection</h4>
 124               <p>See the apps chosen by the Android Design team for their masterfully crafted design details...</p>
 125               </a></li>
 126             <li><a href="//android-developers.blogspot.com/2013/10/new-developer-features-in-google-play.html">
 127               <div class="feed-image" style="background:url('//3.bp.blogspot.com/-k33rf398Lqw/UlRUMQQRUNI/AAAAAAAAClM/pSwz2YgQpmY/s1600/gps-play_games_logo.png') no-repeat 0 0;background-size:130px;background-position:8px -4px;"></div>
 128               <h4>New Features in Google Play Games</h4>
 129               <p>Three new features that make it easier to understand what players are doing in your game and help you manage game features...</p>
 130             </a></li>
 131             <li><a href="//android-developers.blogspot.com/2013/05/new-ways-to-optimize-your-business-in.html">
 132               <div class="feed-image" style="background:url('//3.bp.blogspot.com/-_8WvpdTVGsE/UkxxxrVoNNI/AAAAAAAACj8/FrQyA-BO11c/s1600/gp-referral-ga.png') no-repeat 0 0;background-size:180px"></div>
 133               <h4>Linking Google Analytics with Google Play</h4>
 134               <p>Understanding your users easier through a new integration between Google Analytics and the Google Play Developer Console...</p>
 135               </a></li>
 136           </ul>
 137                                 <!-- FEATURED DOCS -->
 138           <ul>
 139             <li><a href="{@docRoot}distribute/googleplay/spotlight/tablets.html">
 140               <h4>Tablet Stories</h4>
 141               <p>More developers are investing in a full tablet experience for their apps. Here are some stories from developers who are seeing real results as they expand their offering to include Android tablets. </p>
 142               </a></li>
 143             <li><a href="{@docRoot}distribute/googleplay/quality/core.html">
 144               <h4>Core App Quality Guidelines</h4>
 145               <p>This document helps you assess basic aspects of quality in your app through a compact set of core app quality criteria and associated tests. All Android apps should meet these criteria.</p>
 146               </a></li>
 147             <li><a href="{@docRoot}guide/topics/ui/notifiers/notifications.html">
 148               <h4>Updated Notifications API Guide</h4>
 149               <p>The Notifications API Guide is updated to include information about building Jelly Bean rich notifications using the Support Library APIs for backwards-compatibility.</p>
 150               </a></li>
 151             <li><a href="{@docRoot}guide/topics/ui/dialogs.html">
 152               <h4>Updated Dialogs API Guide</h4>
 153               <p>The Dialogs API Guide now shows to use DialogFragment class, a simpler way to manage your dialogs and embed them in alternative layouts.</p>
 154               </a></li>
 155           </ul>
 156                         </div>
 157                 </div>
 158         </div>  <!-- /news and feature feed -->
 159         <!-- video feed -->
 160         <div class="feed col-8" style="margin-right:0">
 161                 <ul class="feed-nav">
 162                         <li class="active">DEVELOPERS LIVE</li>
 163                         <li>VIDEO PLAYLISTS</li>
 164                 </ul>
 165                 <div class="feed-container">
 166                         <div class="feed-frame">
 167               <ul id="DevelopersLive">
 168               </ul>
 169               <ul id="VideoPlaylists">
 170               </ul>
 171                         </div>
 172                 </div>
 173         </div>
 174         <!-- /video feed -->
 175 </div>
 176
 177 <br class="clearfix"/>
 178
 179
 180
 181
 182
 183
 184
 185
 186
 187
 188 <script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script>
 189 <script type="text/javascript">
 190
 191 /* Load a video into the player box.
 192  * @param id        The YouTube video ID
 193  * @param title     The video title to display in the player box (character escaped)
 194  * @param autoplay  Whether to automatically play the video
 195  */
 196 function loadVideo(id, title, autoplay) {
 197   swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' +
 198       (autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'});
 199   $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>");
 200   $("#player-wrapper").show();
 201   setTimeout(function(){$('#noplayer-message').show()}, 2000);
 202 }
 203
 204 /* Draw all videos from a playlist into a 'videoPreviews' list
 205  * @param data  The feed data returned from the youtube request
 206  */
 207 function renderVideoPlaylists(data) {
 208   var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description
 209   var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description
 210   var MAX_LIST_LENGTH = 4; // number of videos to put in the list
 211   var feed = data.feed;
 212   var entries = feed.entry || [];
 213   var playlistId = feed.yt$playlistId.$t;
 214
 215   var $ulVideos = $('<ul style="display:none"/>');
 216   var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t;
 217
 218   var $liPlaylist = $('<li class="playlist"></li>');
 219   var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>');
 220   $liPlaylist.append($aPlaylist);
 221   $aPlaylist.append('<h4>' + feed.title.$t + '</h4>');
 222
 223   var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH);
 224   playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
 225   $aPlaylist.append('<p>' +  playlistDescription + '</p>');
 226
 227   // Loop through each entry (each video) and add it to the 'videoPreviews' list
 228   var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list
 229   for (var i = 0; i < length; i++) {
 230     var entry = entries[i];
 231
 232     var title = entry.title.$t;
 233     var id = entry.media$group.yt$videoid.$t;
 234     var thumbUrl = entry.media$group.media$thumbnail[0].url;
 235     var fullDescription = entry.media$group.media$description.$t;
 236     var playerUrl = entry.media$group.media$content[0].url;
 237
 238     var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH);
 239     shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
 240
 241     var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>');
 242     var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
 243     var pShortDescription = $('<p>' + shortDescription + '</p>');
 244     var h5Title = "<h5>" + title + "</h5>";
 245     var li = $('<li class="playlist-video"/>');
 246
 247     li.append(a);
 248     a.append(img).append(h5Title).append(pShortDescription);
 249
 250     $ulVideos.append(li);
 251
 252     // use the first entry's thumbnail for the playlist
 253     if (i == 0) {
 254       $aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>');
 255     }
 256   }
 257
 258   if (feed.entry.length > MAX_LIST_LENGTH) {
 259     // add item to go to youtube for playlist
 260     $ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=' + playlistId + '">More &raquo;</a></li>');
 261   }
 262
 263   $liPlaylist.append($ulVideos);
 264   $('#VideoPlaylists').append($liPlaylist);
 265 }
 266
 267
 268 function renderDevelopersLivePlaylist(data) {
 269
 270   var MAX_DESC_LENGTH = 125; // the length at which we will trim the description
 271   var feed = data.feed;
 272   var entries = feed.entry || [];
 273   var playlistId = feed.yt$playlistId.$t;
 274
 275   var ul = $('#DevelopersLive');
 276
 277   // Loop through each entry (each video) and add it to the '#DevelopersLive' list
 278   for (var i = 0; i < 4; i++) {
 279     var entry = entries[i];
 280
 281     var title = entry.title.$t;
 282     var id = entry.media$group.yt$videoid.$t;
 283     var thumbUrl = entry.media$group.media$thumbnail[0].url;
 284     var fullDescription = entry.media$group.media$description.$t;
 285     var playerUrl = entry.media$group.media$content[0].url;
 286     var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH);
 287     shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
 288
 289     var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>');
 290     var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
 291     var pShortDescription = $('<p>' + shortDescription + '</p>');
 292     var h4Title = "<h4>" + title + "</h4>";
 293     var li = $('<li/>');
 294
 295     li.append(a);
 296     a.append(img).append(h4Title).append(pShortDescription);
 297
 298     ul.append(li);
 299   }
 300 }
 301
 302 /* This 'playlist' object defines the playlist IDs for each tab.
 303  * Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs).
 304  * Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab.
 305  */
 306 var playlists = {
 307   'designinaction' : {
 308     'ids': ["PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF"]
 309   },
 310   'bizdevbytes' : {
 311     'ids': ["PLWz5rJ2EKKc8-Osr0TuHyTMEhKV0xJ6ql"]
 312   },
 313   'thisweek' : {
 314     'ids': ["PLWz5rJ2EKKc9Wam5jE-9oY8l6RpeAx-XM"]
 315   },
 316   'googleio' : {
 317     'ids': ["PLWz5rJ2EKKc9WGUwq2gQ-coU3fSyexgOx"]
 318   }
 319 };
 320
 321 /* Request the playlist feeds from YouTube */
 322 function showVideosPlaylists() {
 323   for (var x in playlists) {
 324     var ids = playlists[x].ids;
 325     for (var i in ids) {
 326       var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
 327                     + ids[i] +
 328                     "?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=position'><\/script>";
 329       $("body").append(script);
 330     }
 331   }
 332 }
 333
 334
 335 /* Request the playlist feeds from YouTube */
 336 function showDevelopersLivePlaylist() {
 337   var playlistId = "PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0"; /* DevBytes */
 338   var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
 339                 + playlistId +
 340                 "?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=position'><\/script > ";
 341   $("body").append(script);
 342 }
 343
 344
 345 function togglePlaylist(listLink) {
 346   var $list = $(listLink).parent();
 347   var $ul = $list.find('ul');
 348   if ($ul.is(":visible")) {
 349     $ul.slideUp(function() {
 350       $list.css({'height':'inherit'});
 351     });
 352   } else {
 353     $list.closest('ul').find('li.playlist').find('ul').slideUp();
 354     $ul.slideDown();
 355     $list.css({'height':'auto'});
 356   }
 357 }
 358
 359 showDevelopersLivePlaylist();
 360 showVideosPlaylists();
 361 </script>