1fullpage=true 2page.title=Develop 3header.hide=1 4carousel=1 5tabbedList=1 6@jd:body 7 8<style> 9#noplayer-message { 10position:absolute;top:50%;left:0;width:100%;z-index:-1;text-align:center;display:none; 11} 12#player-frame object {z-index:1;} 13</style> 14 15<div id="player-wrapper"> 16 <div id="player-frame"> 17 <div id="noplayer-message"> 18 <!-- busted flash player message --> 19 Your video is supposed to appear here.<br/> 20 Make sure you have the <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash® Player</a>. 21 </div> 22 <div id="player"><!-- Youtube embeds here... actually replaces this div --></div> 23 <a class="close" onclick="$('#player-wrapper').hide()">close video</a> 24 </div> 25</div> 26<div class="wrap"> 27 <!-- Slideshow --> 28 <div class="slideshow-container slideshow-develop col-16"> 29 <a href="" class="slideshow-prev">Prev</a> 30 <a href="" class="slideshow-next">Next</a> 31 <div class="frame"> 32 <ul> 33 <li class="item carousel-home"> 34 <div class="col-8"> 35 <img src="{@docRoot}images/google/maps-v2-trulia-n7.png" 36class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px; 37 max-width:409px;width:409px" /> 38 </div> 39 <div class="content-right col-6" style="width:350px"> 40 <h2>New Google Maps Android APIs!</h2> 41 <p>Google Maps Android API version 2 is now available with enhanced 42 features such as 3D buildings, vector-based map tiles, rich overlay capabilities, 43 indoor maps, support for fragments, and much more.</p> 44 45 <p>The APIs are bundled with Google Play services and are 46 compatible with Android 2.2 and higher.</p> 47 <p><a 48href="{@docRoot}google/play-services/maps.html" class="button">Read more</a></p> 49 </div> 50 </li> 51 <li class="item carousel-home"> 52 <div class="col-8"> 53 <img 54src="//lh4.ggpht.com/-lfjzgG5Dqrk/UHMThRtpRwI/AAAAAAAABpk/h4d3nsmkgPM/s400/mint.png" 55class="play no-shadow no-transform" /> 56 </div> 57 <div class="content-right col-6"> 58 <h2>Building Great Apps for Tablets</h2> 59 <p>Tablets are a growing part of the Android installed base and they offer new opportunities for user engagement and monetization. If you are targeting tablets, check out the <strong>Tablet App Quality Checklist</strong> for tips and techniques on how to deliver a great app experience for tablet users. </p> 60 <p><a 61href="/distribute/googleplay/quality/tablet.html" class="button">Read 62more</a></p> 63 </div> 64 </li> 65 <li class="item carousel-home"> 66 <div class="col-8"> 67 <img 68src="//lh4.ggpht.com/-6K1kfNOdek8/T72bXvtTSQI/AAAAAAAABmw/kYzmJt0_328/s1600/google-play-subscriptions.png" class="play"></div> 69 <div class="content-right col-6"> 70 <h2>In-app Subscriptions with Trials</h2> 71 <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> 72 <p><a class="button" 73href="{@docRoot}google/play/billing/v2/billing_subscriptions.html#trials">Read 74more</a></p> 75 </div> 76 </li> 77 <li class="item carousel-home"> 78 <div class="col-8"> 79 <img 80src="//lh4.ggpht.com/-MgN5DnoO5XU/UHYGYzTcAOI/AAAAAAAABs4/jTS7sKkfBcM/s1600/pubsites.png" class="play"></div> 81 <div class="content-right col-6"> 82 <p class="title-intro">From the blog:</p> 83 <h2>New Google Play Developer Console</h2> 84 <p>All developers can now try the <strong>new Google Play Developer Console</strong>. With a streamlined publishing flow, new language options, and new user ratings statistics, you’ll have better tools for delivering great Android apps that delight users.</p> 85 <p><a 86href="http://android-developers.blogspot.com/2012/10/new-google-play-developer-console.html" class="button">Read 87more</a></p> 88 </div> 89 </li> 90 <li class="item carousel-home"> 91 <div class="col-8"> 92 <img 93src="//lh4.ggpht.com/-g05If_eKKRQ/UAcrVLI-OYI/AAAAAAAAAr8/AWvunVb5S-w/s320/nexus7.png" 94class="play no-shadow no-transform" /> 95 </div> 96 <div class="content-right col-6"> 97 <p class="title-intro">From the blog:</p> 98 <h2>Getting Your App Ready for Jelly Bean and Nexus 7</h2> 99 <p>For many people, their first taste of Jelly Bean will be on the beautiful 100 <strong>Nexus 7 tablet</strong>. Most applications will run just fine on Nexus 7, but who wants 101 their app to be just fine? Here are some tips for optimizing your app 102 to make the most of this device.</p> 103 <p><a 104href="http://android-developers.blogspot.com/2012/07/getting-your-app-ready-for-jelly-bean.html" class="button">Read 105more</a></p> 106 </div> 107 </li> 108 </ul> 109 </div> 110 </div> 111 <!-- /End slideshow --> 112</div> 113<div class="wrap"> 114 <!-- news and feature feed --> 115 <div class="feed col-8" style="margin-left:0"> 116 <ul class="feed-nav"> 117 <li class="active">DEVELOPER NEWS</li> 118 <li>FEATURED DOCS</li> 119 </ul> 120 <div class="feed-container"> 121 <div class="feed-frame"> 122 <!-- DEVELOPER NEWS --> 123 <ul> 124 <li><a href="//android-developers.blogspot.com/2013/01/verifying-back-end-calls-from-android.html"> 125 <div class="feed-image" style="background:url('//lh4.ggpht.com/7z4NItEg-X21zvFGAarKonk-VaysBYthJ30u1JjaQ0-5fjyHNawnmoNeG--4FCACog=w124') no-repeat 0 0"></div> 126 <h4>Verifying Back-End Calls from Android Apps</h4> 127 <p>You can take advantage of the auth APIs in Google Play services to let your back end know which app is calling and for which user....</p> 128 </a></li> 129 <li><a href="//android-developers.blogspot.com/2012/12/daydream-interactive-screen-savers.html"> 130 <div class="feed-image" style="background:url('//lh4.ggpht.com/-wVsUOo4xGE0/UNy9mZ1nmMI/AAAAAAAAB4w/f6rhyLn5KbI/s1600/daydream-example.jpg') no-repeat 0 0;background-position:right top;"></div> 131 <h4>Daydream: Interactive Screen Savers</h4> 132 <p>Daydream is an interactive screen-saver mode introduced in Android 4.2. Learn how to add Daydreams to your apps...</p> 133 </a></li> 134 <li><a href="//android-developers.blogspot.com/2012/11/designing-for-tablets-were-here-to-help.html"> 135 <div class="feed-image" style="background:url('//developer.android.com/design/media/multipane_expand.png') no-repeat 0 0; background-position:right top;"></div> 136 <h4>Designing for Tablets?</h4> 137 <p>Essential resources for everyone in the app development pipeline—from product managers, to designers, to developers, and QA engineers...</p> 138 </a></li> 139 <li><a href="//android-developers.blogspot.com/2012/12/in-app-billing-version-3.html"> 140 <div class="feed-image" style="background:url('//developer.android.com/images/iab-thumb.png') no-repeat 0 0;background-position:center right;"></div> 141 <h4>In-app Billing Version 3 Now Available</h4> 142 <p>A new version of In-app Billing is available that lets you sell digital goods in your app with just a few lines of code...</p> 143 </a></li> 144 </ul> 145 <!-- FEATURED DOCS --> 146 <ul> 147 <li><a href="{@docRoot}distribute/googleplay/spotlight/tablets.html"> 148 <h4>Tablet Stories</h4> 149 <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> 150 </a></li> 151 <li><a href="{@docRoot}distribute/googleplay/quality/core.html"> 152 <h4>Core App Quality Guidelines</h4> 153 <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> 154 </a></li> 155 <li><a href="{@docRoot}guide/topics/ui/notifiers/notifications.html"> 156 <h4>Updated Notifications API Guide</h4> 157 <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> 158 </a></li> 159 <li><a href="{@docRoot}guide/topics/ui/dialogs.html"> 160 <h4>Updated Dialogs API Guide</h4> 161 <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> 162 </a></li> 163 </ul> 164 </div> 165 </div> 166 </div> <!-- /news and feature feed --> 167 <!-- video feed --> 168 <div class="feed col-8" style="margin-right:0"> 169 <ul class="feed-nav"> 170 <li class="active">DEVELOPERS LIVE</li> 171 <li>VIDEO PLAYLISTS</li> 172 </ul> 173 <div class="feed-container"> 174 <div class="feed-frame"> 175 <ul id="DevelopersLive"> 176 </ul> 177 <ul id="VideoPlaylists"> 178 </ul> 179 </div> 180 </div> 181 </div> 182 <!-- /video feed --> 183</div> 184 185<br class="clearfix"/> 186 187 188 189 190 191 192 193 194 195 196<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script> 197<script type="text/javascript"> 198 199/* Load a video into the player box. 200 * @param id The YouTube video ID 201 * @param title The video title to display in the player box (character escaped) 202 * @param autoplay Whether to automatically play the video 203 */ 204function loadVideo(id, title, autoplay) { 205 swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' + 206 (autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'}); 207 $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>"); 208 $("#player-wrapper").show(); 209 setTimeout(function(){$('#noplayer-message').show()}, 2000); 210} 211 212/* Draw all videos from a playlist into a 'videoPreviews' list 213 * @param data The feed data returned from the youtube request 214 */ 215function renderVideoPlaylists(data) { 216 var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description 217 var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description 218 var MAX_LIST_LENGTH = 4; // number of videos to put in the list 219 var feed = data.feed; 220 var entries = feed.entry || []; 221 var playlistId = feed.yt$playlistId.$t; 222 223 var $ulVideos = $('<ul style="display:none"/>'); 224 var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t; 225 226 var $liPlaylist = $('<li class="playlist"></li>'); 227 var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>'); 228 $liPlaylist.append($aPlaylist); 229 $aPlaylist.append('<h4>' + feed.title.$t + '</h4>'); 230 231 var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH); 232 playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 233 $aPlaylist.append('<p>' + playlistDescription + '</p>'); 234 235 // Loop through each entry (each video) and add it to the 'videoPreviews' list 236 var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list 237 for (var i = 0; i < length; i++) { 238 var entry = entries[i]; 239 240 var title = entry.title.$t; 241 var id = entry.media$group.yt$videoid.$t; 242 var thumbUrl = entry.media$group.media$thumbnail[0].url; 243 var fullDescription = entry.media$group.media$description.$t; 244 var playerUrl = entry.media$group.media$content[0].url; 245 246 var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH); 247 shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 248 249 var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>'); 250 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); 251 var pShortDescription = $('<p>' + shortDescription + '</p>'); 252 var h5Title = "<h5>" + title + "</h5>"; 253 var li = $('<li class="playlist-video"/>'); 254 255 li.append(a); 256 a.append(img).append(h5Title).append(pShortDescription); 257 258 $ulVideos.append(li); 259 260 // use the first entry's thumbnail for the playlist 261 if (i == 0) { 262 $aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>'); 263 } 264 } 265 266 if (feed.entry.length > MAX_LIST_LENGTH) { 267 // add item to go to youtube for playlist 268 $ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=PL' + playlistId + '">More »</a></li>'); 269 } 270 271 $liPlaylist.append($ulVideos); 272 $('#VideoPlaylists').append($liPlaylist); 273} 274 275 276function renderDevelopersLivePlaylist(data) { 277 278 var MAX_DESC_LENGTH = 125; // the length at which we will trim the description 279 var feed = data.feed; 280 var entries = feed.entry || []; 281 var playlistId = feed.yt$playlistId.$t; 282 283 var ul = $('#DevelopersLive'); 284 285 // Loop through each entry (each video) and add it to the '#DevelopersLive' list 286 for (var i = 0; i < 4; i++) { 287 var entry = entries[i]; 288 289 var title = entry.title.$t; 290 var id = entry.media$group.yt$videoid.$t; 291 var thumbUrl = entry.media$group.media$thumbnail[0].url; 292 var fullDescription = entry.media$group.media$description.$t; 293 var playerUrl = entry.media$group.media$content[0].url; 294 var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH); 295 shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 296 297 var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>'); 298 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); 299 var pShortDescription = $('<p>' + shortDescription + '</p>'); 300 var h4Title = "<h4>" + title + "</h4>"; 301 var li = $('<li/>'); 302 303 li.append(a); 304 a.append(img).append(h4Title).append(pShortDescription); 305 306 ul.append(li); 307 } 308} 309 310 311 312/* This 'playlist' object defines the playlist IDs for each tab. 313 * Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs). 314 * Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab. 315 */ 316var playlists = { 317 'designinaction' : { 318 'ids': ["PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF"] 319 }, 320 'about' : { 321 'ids': ["PL611F8C5DBF49CEC6"] 322 }, 323 'developersstrikeback' : { 324 'ids': ["PLWz5rJ2EKKc8nhhIOieejm1PxYHmPkIPh"] 325 }, 326 'googleio' : { 327 'ids': ["PL4C6BCDE45E05F49E"] 328 } 329}; 330 331/* Request the playlist feeds from YouTube */ 332function showVideosPlaylists() { 333 for (var x in playlists) { 334 var ids = playlists[x].ids; 335 for (var i in ids) { 336 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/" 337 + ids[i] + 338 "?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=published'><\/script>"; 339 $("body").append(script); 340 } 341 } 342} 343 344 345/* Request the playlist feeds from YouTube */ 346function showDevelopersLivePlaylist() { 347 var playlistId = "PLWz5rJ2EKKc_XOgcRukSoKKjewFJZrKV0"; /* DevBytes */ 348 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/" 349 + playlistId + 350 "?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=published'><\/script > "; 351 $("body").append(script); 352} 353 354 355function togglePlaylist(listLink) { 356 var $list = $(listLink).parent(); 357 var $ul = $list.find('ul'); 358 if ($ul.is(":visible")) { 359 $ul.slideUp(function() { 360 $list.css({'height':'inherit'}); 361 }); 362 } else { 363 $list.closest('ul').find('li.playlist').find('ul').slideUp(); 364 $ul.slideDown(); 365 $list.css({'height':'auto'}); 366 } 367} 368 369showDevelopersLivePlaylist(); 370showVideosPlaylists(); 371</script> 372
