Getting DrawerLayout to Slide over the ActionBar

Question

I have a sliding drawer menu in an activity, which has an actionbar with some tabs on it.

I'd like to get the sliding drawer to slide over the tabs , not below them.

This is what it looks like right now...

Any ideas on how this could be done?

Note: I understand that I might be breaking some conventions and UI patterns here, and if it does not work at all, I'll look at alternatives. But I'd like to get this working first.

EDIT: See the below screen shot of the Google Play Music app that does exactly what I need. See @CommonsWare's answer below where he does agree that I might be breaking convention. But then given the Play Music app, it may not be altogether that rare either.

Cheater

how did you manage to get at least part of the navigation drawer above at some of the content for me it goes below the content – Sunsunbaked

@pt123: not sure what you mean by that. Things worked fine for me when I used a ViewPager and PagerTabStrip. See the answer below by CommonsWare indicated as correct. If things still don't work, I'd suggest posting a new question with some code and screenshots. – Cheater

thanks for responding, but it's been sorted out – Sunsunbaked

#23783996 I hope this solves your issues . – Mettle

You can see my solution at https://mcmap.net/q/358500/-android-navigation-drawer-over-the-tabs and it works perfectly. – Sturgill

Answer 1

Any ideas on how this could be done?

Do any of the following:

• Switch away from action bar tabs, perhaps to ViewPager and a tabbed indicator (PagerTabStrip, TabPageIndicator from ViewPageIndicator)

• See if an existing third-party drawer implementation has not yet updated to the new UI standards

• Fork DrawerLayout and modify it to suit

• Roll your own navigation drawer from scratch

I understand that I might be breaking some conventions and UI patterns here

Correct.

Marilyn

In light of the fact the above design does depart from conventions ( and I'd rather not ) , I do have a case for doing so, where the sliding drawer menu acts as top level navigation, and the tabs are navigation within a section of the app. I'd rather not force the user to go one level up to be able to access top level navigation. Any suggestions on a better navigation scheme? – Cheater

So far the only place where I've seen a sliding drawer menu implemented alongside action bar tabs is the new Google Play Music app (in the My Library section), and it does work as expected, with the menu sliding over the tabs, instead of under them. – Cheater

@Archit: Google Play Music is not using action bar tabs. It is using a HorizontalScrollView around a LinearLayout and a set of TextView widgets for "My Library" tabs above the ViewPager. I'm not sure where else in Play Music tabs are used -- that's the only spot I'm seeing. If you want the Google Play Music approach, I'd use a ViewPager and a suitable indicator. – Marilyn

And that is how navigation drawer now works in material design, so no rules are broken. – Burial

Answer 2

you can use below libraries to get navigation model similar to Google play music app.

• ActionBarSherlock (github)
• nested-fragments (github)
• PagerSlidingTabStrip (github)
• NavigationDrawer (Android developer site)
• Latest Support v4 library

I have created a project Navigation Drawer with Tab Strip Example at github, have a look at it.

Below is the screenshot of it.

Citadel

Thanks Balaji! Not that I need to use this immediately, but does the example you have put up have a dependency on ActionBarSherlock? Can it be done without that? Just checking. – Cheater

@archit yes it depends on ActionBarSherlock and yes the project can be developed without it as google released updated support library – Citadel

@Citadel how can it be implemented without the use of ActionBarSherlock? – Putative

@SheharyarNaseer hope you aware of google's v7 appcompat library, is this the one you are looking for? – Citadel

@Citadel I have implemented this UI and I'm having an issue which describe here. Can you please help me – Doti

@Citadel can you update your library using android action bar? – Trig

@Citadel thank you for you wonderful project sharing with us, but i have a problem, how can i change the first tab to be the one in right? – Bandicoot

Answer 3

Check also this library http://www.androidviews.net/2013/04/pager-sliding-tabstrip/ The guy did a great job. You can use it with a navigation drawer and it works perfectly.

Salter

I did follow your the answer you posted on a similar question. :-) I eventually went with the PagerTabStrip, which served my purpose well. But thank you for the link! – Cheater

Answer 4

Finally, a clean way to achieve navigation drawer over sliding tabs in this blog http://www.paulusworld.com/technical/android-navigationdrawer-sliding-tabs

Billow

Answer 5

This can be done WITHOUT a Third party library. Check out Google's Sliding Tabs samples

     SlidingTabsBasic:   http://developer.android.com/samples/SlidingTabsBasic/project.html
     SlidingTabsColors:  http://developer.android.com/samples/SlidingTabsColors/project.html

Also, check out this awesome link: http://manishkpr.webheavens.com/android-sliding-tabs-example/ Worked like a charm for me. :)

Purveyance

Answer 6

I had the same problem, but the only solution I found was to use tabs inside the inner fragment (not fragmentActivity). I don't know if it was the best solution, the only problem i had was styling this tabs, for the rest, it works perfectly

Exocrine

You could try using PagerTabStrip, which is what I went with eventually. I'm not too sure how much you might be able to re-style the PagerTabStrip, but it works pretty well. You get all the nice swipey views and tapping on them works as well. – Cheater

Answer 7

I managed to achieve this requirement by setting the navigationMode inside OnDrawerClosed and onDrawerOpened functions. It is a temp fix since the tabs actually do not disappear immediately.

  public void onDrawerClosed(View view) {
          getActionBar().setTitle(mTitle);
          if(getActionBar().getTabCount()>0) //Add tabs when the fragment has it
          getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);               
                        ...
                    }

---

   public void onDrawerOpened(View drawerView) {
            getActionBar().setTitle(mDrawerTitle);
            getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD);              
                    ..

                    }

If you have some fragments with tabs, and other without it don't forget to remove tabs onCreateView of fragment that does not have tabs.

 getActionBar().removeAllTabs();

Billow

That's an interesting hack.... you might still be better served by changing your design somewhat to fit the answer by CommonsWare above. But an interesting hack nonetheless! – Cheater

that's fine but remove tabs and I just want the menu slide over the actiontab – Celibate

@Celibate not sure if you still have the problem or not. whatever, another perfect solution can be found below https://mcmap.net/q/357572/-getting-drawerlayout-to-slide-over-the-actionbar :) – Billow

Answer 8

Actionbar Navigaton Drawer and SwipeTabs cant be used simultaneously. You should implement Navigation Drawer using Actionbar and swipetabs by simple Tabhosts. You can use Tabhost for tabs and use fragments for inside view of each Tab. Fragments should be used via viewpager to provide scrolling/swiping effect. Connect tabs and viewpager with eachother through their methods

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TabHost
    android:id="@+id/tabHost"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >

        <HorizontalScrollView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:fillViewport="true"
            android:scrollbars="none" >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" >
            </TabWidget>
        </HorizontalScrollView>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <android.support.v4.view.ViewPager
                android:id="@+id/viewPager_home"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </FrameLayout>
    </LinearLayout>
</TabHost>

Diamagnetic

Answer 9

Play music does not use standard ActionBar.Tab Then you can implement your own tab container by extend HorizontalScrollView and work together with ViewPager

Remscheid

Answer 10

I have use tabs inside fragment of drawer. I solve this problem adding

getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS); 

in onDrawerClosed() and getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_STANDARD); in onDrawerOpend() method.

I hope this will help you.

Gilgilba