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