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

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

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.

Answer 3

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!