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.

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.

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.

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.

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

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. :)

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

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

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>

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

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.