Action Bar Tabs using ViewPager with Navigation Drawer

Question

Requirement:- Action Bar Tabs using ViewPager with Navigation Drawer .

I can create a Navigation Drawer example

Action Bar Tabs using ViewPager separately.

But when I try to use both at once I am having issue.

I can create Navigation Drawer using fragments and Action Bar Tabs using Fragment. But the initial Activity of the both examples is Fragment Activity.

How to implement the action bar tabs on a fragment which is part of the navigation drawer?

Solution 1

Use the following layout for your main activity.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager_container"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#ffe6e1d4"
        android:focusable="true"
        android:focusableInTouchMode="true" />    

    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:listSelector="@drawable/drawer_list_selector"        
        android:background="@color/drawer_bg" />

</android.support.v4.widget.DrawerLayout>

Write your FragmentPagerAdapter as show in APPTabsAdapter.

This is how I had built it in one of my projects.

You can try and ask for help, if needed.

OR

You can take help from this GitHub Repo.

Thanks.

Solution 2

The problem of using the tabs of the actionbar is when the drawer appears, it will appears under the tabs, since the tabs are part of the actionBar.

I have tried using tabHost instead and it works much better.

You get the source code here: https://github.com/jiahaoliuliu/DrawerWithTabsAndViewPager

Here is a little explanation about it:

1. The first level there is a Drawer, from the v4 support library
2. Inside the drawer, the first element is the tabHost, which I have set the width and the height of the content to 0.
3. Under the tabhost, there is the viewpager.

Once everything has been created, what I have done is create a listener for the tabhost and another one for the viewPager, so when the user click on any tab the view pager will set the current item, and viceversa.

Enjoy Coding!

Solution 3

As you have noticed, ActionBar tabs don't play very nicely with Navigation Drawer and this design mode has been deprecated in API 21 anyway.

I used the classes in SlidingTabs example from Android developers to achieve this effect without having to include a 3rd party library dependency, and am very happy with the result. There is a video tutorial as well.

Comments

[Admin]

I understand this concept and it works when we implement in an activity or fragmentactivity, but how to make this work on a fragment which is in navigationdrawer...

[Admin]

I do not want to use actionbarsherlock, want to do using the builtin features...thank you

[Admin]

the example you gave is what I need but I do not want it using ActionBarSherlock.

[jagmohan]

Please check the new solution that you have accepted on Android 2.2

[Admin]

both the solutions are good...but your answer helped me when I needed. Thanks mate!

[jagmohan]

Glad to be of service!

[jiahao]

I was surprised that Google has deprecated it on API 21. There are still a lot of good project which use it (e.g. Etsy). Let's see how the coding community responses. The story has just started.

[liam xu]

the training sample code in android developer site still use NAVIGATION_MODE_TABS. And the google play store seemed using action bar tabs? right?

[Tim Rae]

No, the latest version of Google Play (5.1.11) is using sliding tabs as per my example (e.g. navigate to "shop apps").

[Admin]

@jagmohan I stuck in same but still not able to find solution can you help?

[jagmohan]

@Johnson Have you looked at Toolbar which is available in Android SDK 5.0? It would be much easier to have Navigation Drawer, Toolbar + ViewPager with tabs. I have recently done that in a project. If you can wait, I can make a blog post over the weekend and share the link with you.

[Admin]

@jagmohan thanks i will wait..hope you will not forget..and can you check this..this is same problem what I am facing can you help me with this??stackoverflow.com/questions/26483069/…

[jiahao]

Another solution could be sliding tabs (youtube.com/watch?v=tRg_eDfQ8fk) just like Google has for its Play store app. What I do not like is when the tab does not fill completely the screen, it seems a bit wired (wrap_content instead of match_parent).

[Aditya]

@jagmohan can yu tell stackoverflow.com/questions/31114379/…

[Aditya]

help me with stackoverflow.com/questions/31114379/…

[GreenROBO]

@jagmohan You told that you'll come up with your blog post. Can you provide the link? I am looking for help on Navigation Drawer, Toolbar + ViewPager since 3 days. Please Help