doubleTwist blog

Back in August last year we were in the middle of redesigning the doubleTwist Music Player. Following the best practices of the platform we included a navigation drawer to quickly switch between the available top level categories within the app.

doubleTwist’s UI has long included a sort of ‘bottom drawer’ as well, much like what the Google Play Music app has these days. So, instead of integrating the support library’s DrawerLayout, we decided to create our own ViewGroup that allowed for drawers on all sides of the screen. ADrawerLayout was born.

On top of drawers on arbitrary sides of the screen, ADrawerLayout also allows customisation of how the content behaves when scrolling any of the drawers. We weren’t quite sure of how we wanted it in the end so we added a few adjustable parameters to experiment a little bit. Those parameters included:

• the content paralax factor for both the x and y axis (independent), which tells you how much the content will move as you slide any of the drawers, 
• dimming color/alpha of the content overlay
• scale, alpha and xyrotation animation parameters for the content view.

In contrast to DrawerLayout, ADrawerLayout will accept swipe movements starting on any part of the screen, instead of just the edge. But it also includes a setRestrictTouchesToArea(int drawerId, int areaSize) method that allows you to customise this behavior, should your content require it (seek bars, some scrollable views, etc).

Additionally, ADrawerLayout has a peekSize{Right|Left|Top|Bottom} parameter (dimension) that makes a drawer always show a little bit of itself. By default, a ‘peeking’ drawer will only be draggable through touches inside its ‘peek area’.

We’re making ADrawerLayout publicly available for all the Android developers out there so if you are one and have been looking for something like this, give it a try and let us know how it works for you. Bug reports, pull requests or just comments are all very welcome!

See it in action:

— Filipe Abrantes, doubleTwist