mimicking the navigation drawer of youtube/gmail app

Question

Background

In the recent months Google released the Youtube app with navigation drawer (AKA sliding menu).

it has many cool features that i wish to have on an app i'm working on.

the features are:

1. touch anywhere to start sliding.

2. moving icon on the "up" button of the action bar when switching modes.

3. content area (the area on the right, not the menu itself) stays instead of scrolling, when sliding the menu.

4. action bar stays instead of scrolling.

5. content area (the area on the right, not the menu itself) changes its color when scrolling, and not the menu itself.

here are screenshots to show what i'm talking about :

before sliding:

after sliding:

currently, i know of 2 main libraries that are responsible of using a navigation drawer :

• the official google navigation drawer library .

• the sliding menu library, by jfeinstein10 .

the problem

both the official library and the slidingMenu library don't have all of those features combined like on the youtube app.

for example, the official library doesn't have ability #1 (that's why i've posted this thread) , so i used the slidingMenu library instead.

however, the slidingMenu library doesn't have (or is it?) ability #2 and #3 .

both libraries don't have enough documentation/examples of what can be done, so it's very hard to use them or add new features to them.

what i've tried

currently, i use the slidingMenu library, so this is my code for preparing the slidingMenu :

activity.setBehindContentView(slidingMenuRootView);
mSlidingMenu = activity.getSlidingMenu();
mSlidingMenu.setShadowWidthRes(R.dimen.slidingmenu_shadow_width);
mSlidingMenu.setShadowDrawable(R.drawable.slidingmenu_shadow);
mSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
mSlidingMenu.setFadeEnabled(true);
mSlidingMenu.setFadeDegree(1.0f);
mSlidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
activity.setSlidingActionBarEnabled(false);

question

how can i get the slidingMenu (or navigation drawer) to act like on youtube app , meaning with all of the features i've mentioned combined ?

---

possible solution

EDIT: using the menuDrawer library (github link here) , i've successfully achieved all of the features i've mentioned. here's a sample code:

public class ActionBarSherlockSample extends SherlockActivity {

    private MenuDrawer mDrawer;

    @Override
    protected void onCreate(final Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getSupportActionBar();
        mDrawer = MenuDrawer.attach(this, MenuDrawer.Type.OVERLAY);
        final TextView menuView = new TextView(this);
        menuView.setTextColor(0xFFFFFFFF);
        menuView.setText("As the drawer opens, the drawer indicator icon becomes smaller.");
        menuView.setGravity(Gravity.CENTER);
        mDrawer.setMenuView(menuView);
        mDrawer.setTouchMode(MenuDrawer.TOUCH_MODE_FULLSCREEN);
        mDrawer.setOnDrawerStateChangeListener(new OnDrawerStateChangeListener() {

            @Override
            public void onDrawerStateChange(final int oldState, final int newState) {
                Log.d("AppLog", "oldState:" + oldState + " newState:" + newState);
            }

            @Override
            public void onDrawerSlide(final float openRatio, final int offsetPixels) {
            }
        });
        final TextView contentView = new TextView(this);
        contentView
                .setText("This sample uses ActionBarSherlock to display an ActionBar on older platforms. The drawer indicator, "
                        + "as per the design guidelines, is visible in the top left corner.");
        contentView.setGravity(Gravity.CENTER);
        mDrawer.setContentView(contentView);
        mDrawer.setSlideDrawable(R.drawable.ic_drawer);
        mDrawer.setDrawerIndicatorEnabled(true);
    }

    @Override
    public boolean onOptionsItemSelected(final MenuItem item) {
        switch (item.getItemId()) {
        case android.R.id.home:
            mDrawer.toggleMenu();
            break;
        }
        return super.onOptionsItemSelected(item);
    }
}

Answer 1

Use this MenuDrawer

A slide-out menu implementation, which allows users to navigate between views in your app.

Features:

• The menu can be positioned along all four edges.
• Supports attaching an always visible, non-draggable menu, which is useful on tablets.
• The menu can wrap both the content and the entire window.
• Allows the drawer to be opened by dragging the edge, the entire screen or not at all.
• Can be used in XML layouts.
• Indicator that shows which screen is currently visible