Android - How to implement a NavigationDrawer that is partially visible at all times?

Question

I would like to have a NavigationDrawer in my Android project that shows the ListView partially at all times, and the items are also clickable, but when the user drags the drawer full ListView appears.

Below image is what I'm trying to achieve:

First one is the "Normal view" where you can see the small icons. Second one is when the user slides the navigation drawer so that it opens. Third one is when back in the normal view the user clicks A and C, so that the icons change their colour.

Any recommendations how to do this?

Thanks for answering :)

Answer 1

I came across this open source library, https://github.com/StevenRudenko/ActionsContentView. I haven't personally used it so can't say it will fit in your exact use case of having a drawer at right but it does has the drawer on the left. Even then you could start from there and should be able to build upon it to fit your use case.

Answer 2

thanks for all the answers. Here is what I did to make it work:

I used overlapping fragments and animation like suggested. While onCreate I calculated manually the width for the map (screensize - the drawer size while collapsed) so that it doesn't stretch strangely while modifying the drawer size. I set the drawer inside a fragment and the fragment visible at all times. After that I implemented OnGestureListener and made a GestureDetector to my activity, and started listening to touch events from the Drawer:

drawer.setOnTouchListener(new View.OnTouchListener() {
        public boolean onTouch(View view, MotionEvent e) {
            gestureDetector.onTouchEvent(e);
            return false;
        }
    });

and then onFling-method

public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
        float velocityY) {
    if(velocityX < -250) {
         //animation for increasing the list width from 80 to 240
    } else if (velocityY > 250 ) {
         //animation for decreasing the list width from 240 to 80
    }
    return true;
    }