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