Android Lollipop Preview: Bringing Designers Closer to Developers

By Matt Powers

As the best platform developer in the business, it’s imperative that Applico is always prepared when major shifts are announced in the software platforms we use. Recently, Google announced a new methodology and framework for a cohesive design language across all of its products and services, called Material Design. Aptly named, Material Design builds on a few different principles. These are:

• Using paper and ink as metaphors
• The usage of shadows for depth to demonstrate the hierarchy of objects
• Using animation and motion as instructive cues

Google’s goal is to unify design across all mediums to give a consistent theme to all of its own products and platforms, as well as the properties built on top of them.

The best way to learn is to do, and since we’ll soon all be living in a Material world, we decided to take the plunge and educate ourselves on some of the new principles in Material Design by making use of the recently released Android Lollipop preview. The preview has a multitude of new Android features and some APIs that will help bring “material”-like user experiences to life.

We took a past application and re-imagined the user experience with a material-like look and feel. Then we took a few of the Material Design concepts and brought them to life with some real world code, which I wrote myself (full disclaimer, it’s been a while since I regularly wrote code). Our approach was pretty simple: let’s come up with some designs that were a little far out there and then implement some of these concepts using as many of the new APIs as possible.

In order to understand what we did with the Lollipop preview, it’s important to understand where we’ve been. Below are some images of Google Zeitgeist, an application that we built for Google almost two years ago.

The application allows users to view the 2012 Global Top 10 and United States Lists and includes a fun game that users can play. The application is very list heavy, making use of a classic Android ListView and ViewPagerAdapter. What we built makes use of some of the new concepts that Google is pushing to reimagine the app for Material Design.

Android Lollipop Redesign for Material Design

Let me explain some of the biggest changes in the new app. Non-technical readers can skip to the key takeaways below.

The “Home” screen

• Now contains a new CardView, which represents the Year in Review as well as the Global and US Zeitgeist lists. The CardView includes a ripple drawable that may be easier to be seen in the video below and an elevation element that has its depth set.

• We styled the StatusBar and NavBar in line with our new Zeitgeist style using the new Material Theme colorPrimary and colorPrimaryDark

The “Zeitgeist” feed

• We are making use of a full bleed image, using the CardView again, which has a ripple drawable associated with the view
• The CardView has a Shared Element Transition associated with it. The shared element transition is associated with a detail view that animates the image into this new activity.
• We are using the new RecyclerView, which provides for a much nicer user experience when scrolling
• We rolled our own Floating Action Button (FabView) which we decided to open source. The FabView code can be found on Applico’s GitHub page
• The Fab contains the new AnimatedStateListDrawable class to animate the check to a star. The AnimatedStateListDrawable is essentially a series of 30 frames in each direction that represent a “selected” and “not selected” state. Addtionally we are also using the Outline class to apply an elevation component to the view

The “Details” screen

• We are making use of the Shared Element transition, a couple representations can be found in this video:

 

• We used two new classes to capture the prominent vibrant light color on the image and animate the tint all at the same time. The classes we used were the Palette class as well as the setTint method on the bitmap

We additionally came up with some other concepts that can be seen in the video below that were much more motion heavy and took into account the Material Design philosophy.

Animation is a focal point in the design refresh, and is covered heavily in the Material Design documentation. Animation principles such as “Authentic Motion” and “Meaningful Transitions” ensure that Material Design’s paper metaphor extends beyond static elements, and users can navigate from screen to screen with unprecedented fluidity and context. You can see a couple of the nice FAB effects as well as a more animated Details screen.

Key Takeaways

• Designing with Google’s new visual framework in mind mind requires you to take more time to understand the relationship between objects and how to deliver meaning and context without over engineering it
• How Android designers communicate with their developers and engineers needs to change: No longer are red-lined mockups good enough. Motion needs new deliverables for engineers to understand the curve of a path or the frames per second of an animation.
• It’s even more important than ever for designers to understand the Android build system: Being able to tweak and improve your animations on your own without the development team’s involvement is even more important. Take control of your design!
• There isn’t much help in the way of the Android Lollipop API’s: Outside of the new shared element transitions there isn’t anything earth shattering in the L preview. Developing with Material Design concepts in mind can be achieved with pre-Lollipop API’s.

Conclusion

So what do we think about Lollipop and Material Design? Well it depends on who you ask. Some of the animation principles could very easily become gratuitous and overwhelm the user. However, used correctly these new features are a huge leap in keeping Android and the Google ecosystem on par with iOS (and are a good response to a lot of the changes Apple made last year). Additionally, Google is much more than just Android, so having a set of principles that apply to its entire ecosystem is only a good for both developers and consumers and represents a step in the right direction. I can say without a doubt that Applico is excited about “living in a Material World.”

Interested in applying to Applico? Check out our job openings here!

---

Filed under: Product Engineering | Topics: android, Android app develompent, Android Lollipop, Google, Material Design