Shared publicly  - 
Our latest #materialdesign story is about how our Google I/O 2014 Android app team applied material design principles throughout their design process. For more, check the link below, and download the app on Google Play to see it in action:
Sai Pavan Velidandla's profile photoMattia Roccaforte's profile photoKyler Jeffrey's profile photoYuri Heupa's profile photo
The GIF you have here... and the explanation on the website, "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." Terrible design decision. Granted your reasoning may be sound logic but good design and UX shouldn't be limited by physical constraints. That's the transcendent beauty of design. The smooth fading transition on the left is far better than the jarring, abrupt transition on the right. Besides, following your true-to-the-physical-world logic, you're telling me a green paper can just suddenly "grow" as you've shown in your animation? You've contradicted yourself. You may want to go back and rethink that.
Hey +Brian Hermon, I'm the author of the post; here's my 2 cents. The GIF does a bad job of showing the smoothness of the slide—it's far less jarring in real life (check the video in the post for a smoother version). And yes, surfaces are stretchable… rather than exactly replicating the physics in the real world, material design starts with what we've learned from experiencing the real world and extends it in targeted ways, building an internally consistent environment. So when my team made this decision, we felt like a surface stretching was more internally consistent with this environment than a surface fading in or out. There were a number of other reasons we preferred the new approach, e.g. the intermediate steps were cleaner, and session color 'branding' was stronger. Appreciate the feedback!
Maybe the most important thing in the source code of the app is how you manage to integrate Material Design with animations for Android L and still keep backward compatibility. 
As far as I know, support library doesn't support full backward compatibility for Material Design yet. 
+Roman Nurik, Several thoughts: I see that the video is less jarring than the GIF however I feel as though the animation is still too jarring. I do understand what you mean about surfaces stretching. Paper might not but more malleable surfaces can. So taking into consideration those things I think there is yet a better way to build this animation. I'm going to reference jquery since it's an easy reference point. Right now your animation is like a easeInQuint, or similar to it. I feel as though that's still abrupt. I feel a linear animation matches material physics and creates for a smoother transition. The linear animation would start as soon as you begin to scroll so that by the time the original top edge of the colored banner reaches just below the icons it has already expanded below the icons to the very top of the screen. Frankly I see it as cohesive to the material design and an effective compromise between the first release and updated release. On a side note, I have the utmost respect for you and your team of designers at Google and am honored that you'd chime in here, taking to the time to talk the design through. I hope in some way my feedback can contribute to the OS I love so dearly.
+Brian Hermon thanks for that feedback. Timing curves are definitely an area the app can improve in, especially in cases where the animation is related to complex user actions like scrolling. Looking forward to sharpening this behavior in the future of the I/O app and beyond.
I agree with +Brian Hermon. The fade looks pleasant, but the new animation doesn't. Although I prefer the 1st, the 2nd would be better if the green header didn't stretch at all. The height should remain static instead. The other option for a more pleasant transition is to stretch even farther unil it "snaps" from the top edge and smoothly resizes and bounces to a stop (rubberband-ish effect). That might be overdoing it though :).

Last thought. I wouldn't want Android to replicate Apple's rubberband effect when you pull away from an edge (at the limit), but it would interesting to take the opposite approach and stretch the area between the screen's edge and your finger (or just the header/actionbar), skewing the image until you let go and it relaxes into place. It could have a similar effect when you're scrolling fast and reach the end. Basically, I'm not a fan of the "glowing edge" effect that appears when pulling away from an edge. That needs to improve!
Hmm, the updated version of the top banner seems to introduce a physics violation of its own: realistically the only way the action bar can be stable/shared across two pieces of paper as illustrated is if the action bar itself was part of transparent layer which sits on top of everything else. Whereas with the single sheet of paper in the original, the action bar could still conceivably have been painted on.

Faced with a choice between overly magic ink (original) or rule bending paper (updated) I'd be more inclined to go with the former since paper is in charge of structure and has the potential to get complex the more custom it gets.

Another factor which makes me lean that way is how similar the original seems to be to the Ali animation @24-25 sec in the Material Design promo: Material design
+David Lawerteh that's a great point. I think they are being too strict if they are against the fading image to solid color as shown here.

As a side note, this has got me wondering if shadows of elements should be more extreme, such as they look when illustrating the idea with paper underneath paper. At least for transitions, it would be cool for paper elements to move in/out of place with the appearance of being several millimeters above other elements. Hmm... 
This is a great discussion, btw. All excellent points.
Mike D
I just appreciate the great detail with which the decisions were described.  Being new to web design and app development I learned quite a bit.  I'll think more carefully about my palette and transitions in the future.
I appreciate , it's a great lets move on for discussion.
Instead of judging the gif or video I grabbed the app to play with it myself. I think when LOOKING at the animation itself to see how it acts it looks strange. But then paying light notice to it while reading and scrolling the page it looks good. If you study the fade effects of android 4+ they're not exactly the nicest looking even on KitKat. I think we've just gotten used to the fades and I'm sure, like mentioned, backwards compatibility isn't all present so the animations will probably look more organic from a phone running L
For me, Google's new design on android l looks much much better than ios 7.
I fu*ing *love seeing this neutral discussions amongst developers.

I'm extremely excited to watch Material Design continue to unfold and further change the way (Android) applications are designed! #google
A question about the palette from the Google specs: what do the numbers next to the color names - like red 500, red A100 etc - refer to? 
+Mattia Roccaforte They are different variations of the same color. For example, you should use the 500 version for your primary color and the 700 for the primarydark color. Each color has different darker/lighter variations.
I see, but are 500 or 700 amount of some color component? or just arbitrary values given by Google to represent such shades?  In other words, may I obtain my own "700 shade" from another color not listed in the spec's palette? They say "The primary colors are the 500 range." Range of what?
I agree with Brian Hermon.  The updated version looks broken to me.  
Hi, I am hosting COO UI CONFERENCE & introducing my new UI DESIGN TECHNOLOGY, COO UI for cross-platform apps in this conference. Please try to attend this conference. Thanks in advance. Those who are interested please show your interest by sending me a mail at The slots are limited to 200. The registrations close at this Thursday evening.

Sunday, 31st AUGUST 2014
05:00 PM (As per Indian Standard Time)
Duration: 120 mins
Doors open at: 04:45 PM


Just register through the link provided below

Registration link:
Event Link:

Sai Pavan Velidandlla,
The links of the source listed in the blog are broken, i really want to see how this stretching effect was implemented!
Add a comment...