25 Aug 2014
By Subir Jhanb, Google Cloud Messaging team
Developers from all segments are increasingly relying on Google Cloud Messaging (GCM) to handle their messaging needs and make sure that their apps stay battery-friendly. GCM has been experiencing incredible momentum, with more than 100,000 apps registered, 700,000 QPS, and 300% QPS growth over the past year.
At Google I/O we announced the general availability of several GCM capabilities, including the GCM Cloud Connection Server, User Notifications, and a new API called Delivery Receipt. This post highlights the new features and how you can use them in your apps. You can watch these and other GCM announcements at our I/O presentation.
Two-way XMPP messaging with Cloud Connection Server
XMPP-based Cloud Connection Server (CCS) provides a persistent, asynchronous, bidirectional connection to Google servers. You can use the connection to send and receive messages between your server and your users' GCM-connected devices. Apps can now send upstream messages using CCS, without needing to manage network connections. This helps keep battery and data usage to a minimum. You can establish up to 100 XMPP connections and have up to 100 outstanding messages per connection. CCS is available for both Android and Chrome.
User notifications managed across multiple devices
Nowadays users have multiple devices and hence receive notifications multiple times. This can reduce notifications from being a useful feature to being an annoyance. Thankfully, the GCM User Notifications API provides a convenient way to reach all devices for a user and help you synchronise notifications including dismissals - when the user dismisses a notification on one device, the notification disappears automatically from all the other devices. User Notifications is available on both HTTP and XMPP.
Insight into message status through delivery receipts
When sending messages to a device, a common request from developers is to get more insight on the state of the message and to know if it was delivered. This is now available using CCS with the new Delivery Receipt API. A receipt is sent as soon as the message is sent to the endpoint, and you can also use upstream for app level delivery receipt.
How to get started
If you're already using GCM, you can take advantage of these new features right away. If you haven't used GCM yet, you'll be surprised at how easy it is to set up - get started today! And remember, GCM is completely free no matter how big your messaging needs are.
To learn more about GCM and its new features - CCS, user notifications, and Delivery Receipt - take a look at the I/O Bytes video below and read our developer documentation.
25 Aug 2014 5:26pm GMT
05 Aug 2014
By Roman Nurik, lead designer for the Google I/O Android App
Every year for Google I/O, we publish an Android app for the conference that serves two purposes. First, it serves as a companion for conference attendees and those tuning in from home, with a personalized schedule, a browsing interface for talks, and more. Second, and arguably more importantly, it serves as a reference demo for Android design and development best practices.
Last week, we announced that the Google I/O 2014 app source code is now available, so you can go check out how we implemented some of the features and design details you got to play with during the conference. In this post, I'll share a glimpse into some of our design thinking for this year's app.
On the design front, this year's I/O app uses the new material design approach and features of the Android L Developer Preview to present content in a rational, consistent, adaptive and beautiful way. Let's take a look at some of the design decisions and outcomes that informed the design of the app.
Surfaces and shadows
In material design, surfaces and shadows play an important role in conveying the structure of your app. The material design spec outlines a set of layout principles that helps guide decisions like when and where shadows should appear. As an example, here are some of the iterations we went through for the schedule screen:
The first iteration was problematic for a number of reasons. First, the single shadow below the app bar conveyed that there were two "sheets" of paper: one for the app bar and another for the tabs and screen contents. The bottom sheet was too complex: the "ink" that represents the contents of a sheet should be pretty simple; here ink was doing too much work, and the result was visual noise. An alternative could be to make the tabs a third sheet, sitting between the app bar and content, but too much layering can also be distracting.
Another area where the concept of "surfaces" played a role was in our details page. In our first release, as you scroll the details screen, the top banner fades from the session image to the session color, and the photo scrolls at half the speed beneath the session title, producing a parallax effect. Our concern was that this design bent the physics of material design too far. It's as if the text was sliding along a piece of paper whose transparency changed throughout the animation.
A better approach, which we introduced in the app update on June 25th, was to introduce a new, shorter surface on which the title text was printed. This surface has a consistent color and opacity. Before scrolling, it's adjacent to the sheet containing the body text, forming a seam. As you scroll, this surface (and the floating action button attached to it) rises above the body text sheet, allowing the body text to scroll beneath it.
A key principle of material design is also that interfaces should be "bold, graphic, intentional" and that the foundational elements of print-based design should guide visual treatments. Let's take a look at two such elements: color and margins.
In material design, UI element color palettes generally consist of one primary and one accent color. Large color fields (like the app bar background) take on the main 500 shade of the primary color, while smaller areas like the status bar use a darker shade, e.g. 700.
The accent color is used more subtly throughout the app, to call attention to key elements. The resulting juxtaposition of a tamer primary color and a brighter accent, gives apps a bold, colorful look without overwhelming the app's actual content.
In the I/O app, we chose two accents, used in various situations. Most accents were Pink 500, while the more conservative Light Blue 500 was a better fit for the Add to Schedule button, which was often adjacent to session colors. (See the code: XML color definitions, Theme XML)
And speaking of session colors, we color each session's detail screen based on the session's primary topic. We used the base material design color palette with minor tweaks to ensure consistent brightness and optimal contrast with the floating action button and session images.
Below is an excerpt from our final session color palette exploration file.
Another important "traditional print design" element that we thought about was margins, and more specifically keylines. While we'd already been accustomed to using a 4dp grid for vertical sizing (buttons and simple list items were 48dp, the standard action bar was 56dp, etc.), guidance on keylines was new in material design. Particularly, aligning titles and other textual items to keyline 2 (72dp on phones and 80dp on tablets) immediately instilled a clean, print-like rhythm to our screens, and allowed for very fast scanning of information on a screen. Gestalt principles, for the win!
Another key principle in material design is "one adaptive design":
A single underlying design system organizes interactions and space. Each device reflects a different view of the same underlying system. Each view is tailored to the size and interaction appropriate for that device. Colors, iconography, hierarchy, and spatial relationships remain constant.
Now, many of the screens in the I/O app represent collections of sessions. For presenting collections, material design offers a number of containers: cards, lists, and grids. We originally thought to use cards to represent session items, but since we're mostly showing homogenous content, we deemed cards inappropriate for our use case. The shadows and rounded edges of the cards would add too much visual clutter, and wouldn't aid in visually grouping content. An adaptive grid was a better choice here; we could vary the number of columns on screen size (see the code), and we were free to integrate text and images in places where we needed to conserve space.
Two of the little details we spent a lot of time perfecting in the app, especially with the L Developer Preview, were touch ripples and the Add to Schedule floating action button.
We used both the clipped and unclipped ripple styles throughout the app, and made sure to customize the ripple color to ensure the ripples were visible (but still subtle) regardless of the background. (See the code: Light ripples, Dark ripples)
But one of our favorite details in the app is the floating action button that toggles whether a session shows up in your personalized schedule or not:
We used a number of new API methods in the L preview (along with a fallback implementation) to ensure this felt right:
setClipToOutlinefor circle-clipping and dynamic shadow rendering.
android:stateListAnimatorto lift the button toward your finger on press (increase the drop shadow)
RippleDrawablefor ink touch feedback on press
ViewAnimationUtils.createCircularRevealfor the blue/white background state reveal
AnimatedStateListDrawableto define the frame animations for changes to icon states (from checked to unchecked)
The end result is a delightful and whimsical UI element that we're really proud of, and hope that you can draw inspiration from or simply drop into your own apps.
And speaking of dropping code into your own apps, remember that all the source behind the app, including L Developer Preview features and fallback code paths, is now available, so go check it out to see how we implemented these designs.
We hope this post has given you some ideas for how you can use material design to build beautiful Android apps that make the most of the platform. Stay tuned for more posts related to this year's I/O app open source release over the coming weeks to get even more great ideas for ways to deliver the best experience to your users.
05 Aug 2014 3:30pm GMT
31 Jul 2014
By Nazmul Idris, a Developer Advocate at Google who's passionate about Android and UX design
As a mobile developer, how do you create 5-star apps that your users will not just download, but love to use every single day? How do you get your app noticed, and how do you drive engagement? One way is to focus on excellence in design - from visual and interaction design to user research, in other words: UX design.
If you're new to the world of UX design but want to embrace it to improve your apps, we've created a new online course just for you. The UX Design for Mobile Developers course teaches you how to put your designer hat on, in addition to your developer hat, as you think about your apps' ideal user and how to meet their needs.
The course is divided into a series of lessons, each of which gives you practical takeaways that you can apply immediately to start seeing the benefits of good UX design.
Without jargon or buzzwords, the course teaches you where you should focus your attention, to bring in new users, keep existing users engaged, and increase your app's ratings. You'll learn how to optimize your app, rather than optimizing login/signup forms, and how to use low-resolution wireframing.
After you take the course, you'll "level up" from being an excellent developer to becoming an excellent design-minded developer.
Check out the video below to get a taste of what the course is like, and click through this short deck for an overview of the learning plan.
The full course materials - all the videos, quizzes, and forums - are available for free for all students by selecting "View Courseware". Personalized ongoing feedback and guidance from Coaches is also available to anyone who chooses to enroll in Udacity's guided program.
If that's not enough, for even more about UX design from a developer's perspective, check out our YouTube UXD series, on the AndroidDevelopers channel: http://bit.ly/uxdplaylist.
31 Jul 2014 7:32pm GMT