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?

Answer 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.

Answer 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!

Answer 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.