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);
    }
}

Byelaw

use jefferstin sliding menu with actionBarSherlock – Willard

[The] slidingMenu library doesn't have (or is it?) ability #2 and #3. Could you explain #2 better? #3 is achievable with slidingMenu library. – Vicinal

@SanketKachhela i've asked about how to use the features. how can i achieve them using this library ? please write it as an answer... – Byelaw

@vikram about #2 , try openning youtube app or gmail app, they have an icon (not show in the screenshot i've put) of 3 horizontal lines, which move according to the state of the sliding menu. about #3 , can you please show how? – Byelaw

i have found this 2 question on stack overflow #12795760 #17699987 – Willard

@SanketKachhela the links you've given are for other, basic problems which i've already solved and shown the code. – Byelaw

Your code looks exactly like mine. When placing content in the sliding menu, I use the view that was passed as an argument to setBehindContentView(...) as the container: in your case slidingMenuRootView. To set the content of main view, use setContentView(mainContent). MenuDrawer looks like a great library though. – Vicinal

@vikram i don't understand. do you say you've found an answer? if so, write it down. in the end, i've used the menuDrawer library instead: simonvt.github.io/android-menudrawer – Byelaw

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

Lucilucia

it looks like a good library, but you haven't shown any code to show how to achieve all of the features i've mentioned. sadly we've already written a lot of code using the slidingMenu library (including what to do when the sliding menu is being opened and closed, etc...) , so i need to be sure it would be easy to move to this library instead. – Byelaw

after looking further in this library, i seems it's a very good one and i've recommended to use it because i have successfully used all of the features i've mentioned. i hope i would be able to use it, since it could make things much easier. for now, sadly, i will still need to use the slidingMenu library. – Byelaw

Sample usage codes can be found here – Lucilucia

yes i know. i've written that i've tested it and it works well. i will now start working on it hoping that it would be able to do everything i've used before. i will now update my question to include instructions of how to get all the features i've mentioned using the library you've recommended. – Byelaw

for some reason i'm having problems importing the library using maven. have you got any idea how to use maven in order to import the library? also i can't find samples of how to use it in xml. – Byelaw

for now, since i work with maven, i had to copy all of the files of the library into the project. i would be happy if you could tell me if you know any problems with it regarding this issue. – Byelaw

I don't use maven(don't have much idea). I used eclipse and followed general instructions for using android library projects. If you want sample project I can link it here. – Lucilucia

no, the app works fine with the library. it's just that it can't be imported so i had to copy its files into the project. – Byelaw

If my answer worked then kindly select it as accepted answer. Will be helpful for others. – Lucilucia

yes i asked myself if i should tick it now, but hoped that you'd know how to make it work with maven, since it's one of the things it supports, so i gave it some time till you answer about it. i also hoped that maybe someone would see it and answer. it's probably a library that many people don't know about. – Byelaw

i've also found a bug in the library: take an old android (less than API 11), put a fast-scrolling on a listView in the content area and try scrolling using it. for some reason the sliding menu appears and prevents you from scrolling. – Byelaw

i think they've fixed those issues, as they got closed on the website after i've posted about them. – Byelaw

How does this library differ from using the android Navigation Draw? – Sportswear