Profile cover photo
Profile photo
M Zeki OSMANCIK
266 followers -
A Developer in Silicon Valley
A Developer in Silicon Valley

266 followers
About
Posts

Post has shared content
;)
ActionBarDrawerToggle - A different approach

Seeing the new Action Bar Drawer Toggle animation really excited me in Android Lollipop because it's such a unique and beautiful transition animation. Additionally, I was also pleased to see that the new standard for the Navigation Drawer is to have it sit above the Action Bar (now known as the ToolBar), which I find to look very elegant. Unfortunately, these conflicting standards (NOTE: Roman Nurik has said that the actual design standard is to not use the toggle animation) mean that the animation cannot be seen normally as the toggle will be underneath the navigation drawer.

This kinda bummed me out as I really enjoy that animation, so I thought of a compromise. As can be seen in the below animation, the animated arrow sits above both the NavigationDrawer and the Toolbar. This was done by placing the rotating drawable into the upper view hierarchy. I used an open-source implementation[1] of the rotating drawable by Chris Renke, as the source for it hasn't been released by Google yet and I modified it for this use-case. In this way, the arrow can move between views, additionally giving the user an element they can press to close the drawer. I also faded in and out the drawer title so as to not cause the drawable to cross paths with the text (interference between layers is my pet peeve).

NOTE: this violates the official guidelines (as Googler Adam Powell has also pointed out) since it doesn't fit into the paper and ink material design paradigm.

However, I still like the concept as it delights, by showing a pleasant animation, and it enlightens, by showing the user they can leave the drawer view.

I haven't posted the source code to this demo yet, but the general solution can be created by using the DrawerArrowDrawable[1] and overlaying it on the Window's DecorView and then creating a ViewTreeObserver that sets the location of the drawable. It's hard to explain, but I just used the method in this answer[2] (ignore the part about the progress bar, I just used the concept of overlaying a view above all the others). I'm interested in seeing what people think of this idea.

[1] https://github.com/ChrisRenke/DrawerArrowDrawable 
[2] http://stackoverflow.com/a/24102651/1499541 
Animated Photo
Add a comment...

Post has attachment
Add a comment...

Post has attachment
Add a comment...

Post has attachment
Add a comment...

Post has attachment

Post has attachment

Post has attachment

Post has attachment

Post has attachment

Post has attachment
Wait while more posts are being loaded