How to implement a DrawerLayout with a visible handle

Question

I have successfully implemented a NavigationDrawer for my application.

My app displays a drawer that opens on the left of the screen.

My problem is I need to add a button on the left. That button might be clicked or swiped to open the left drawer. That I can do.

But the button is supposed to look like it's a part of the drawer that would overflow into the screen.

That means the button should slide simultaneously as the drawer opens and closes.

CLOSED STATE :

OPENING STATE

I tried adding the button into the left drawer's layout, but it seems you can't make stuff appear outside of its boundaries, and the drawer will always get completely hidden when you close it.

Now I'm trying adding it to add a button to the main DrawerLayout and make it align to the right of the left drawer... But no luck... It looks like a DrawerLayout can't have more than two children...

Any help will be appreciated.

I'm using the Support library (v4)

[EDIT] And I am supporting API level 8... So can't use ImageView.setTranslationX or View.OnAttachStateChangeListener

Answer 1

It's quite tricky.

I think this is similar to what is done to the drawer handle in new Google Maps app. Don't take my word, not sure. :)

I have written toggle that stays on the edge of the Activity content view. When the DrawerLayout is dragged, I translated the view on the x-axis by the amount of the minimal child (which is DrawerLayout content view) minus the shadow (if any). Since the shadow casted + content view of the DrawerLayout gives the full measured width of the entire drawer.

I quickly multiply the slided offset and the minimal child and find the x translation.

[Edit: Code has been removed for readability and it has been moved to the link provided below]

In your activity:

mDrawerToggle = new DrawerLayoutEdgeToggle(
    this, 
    mDrawerLayout, 
    R.drawable.ic_launcher, 
    R.drawable.ic_launcher,
    Gravity.LEFT, 
    true) {

        @Override
        public void onDrawerClosed(View view) {
            super.onDrawerClosed(view); //must call super
        }

        @Override
        public void onDrawerOpened(View view) {
            super.onDrawerOpened(view); //must call super
        }

        @Override
        public void onDrawerSlide(View view, float slideOffset) {
            super.onDrawerSlide(view, slideOffset); //must call super

        }
    };
mDrawerLayout.setDrawerListener(mDrawerToggle);

Creativity boost: You can add more cosmetics like distance from ActionBar which you can set as margin to the handle.

Also you can mimic "single-zipper effect" by moving the handle up/down along left/right just by translating on the Y axis. :)

Edit: Its available on my GitHub here

Edit 2: For those that can't get the handle appear at the beginning just use mDrawerToggle.setVerticalPostionOffset(0)