10

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

I can create a Navigation Drawer example

http://www.omgubuntu.co.uk/wp-content/uploads/2013/07/sidebar.jpg

Action Bar Tabs using ViewPager separately.

http://developer.android.com/design/media/action_bar_pattern_considerations.png

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?

Pragnesh Ghoda シ
  • 8,318
  • 3
  • 25
  • 40

3 Answers3

8

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!

jiahao
  • 3,373
  • 2
  • 35
  • 36
  • Another solution could be sliding tabs (https://www.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). – jiahao Feb 09 '15 at 07:34
  • help me with http://stackoverflow.com/questions/31114379/how-to-add-tabhost-in-navigation-drawer – Aditya Jun 29 '15 at 13:30
6

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.

Community
  • 1
  • 1
jagmohan
  • 2,052
  • 2
  • 26
  • 41
  • 1
    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... –  Dec 26 '13 at 11:40
  • 1
    I do not want to use actionbarsherlock, want to do using the builtin features...thank you –  Dec 26 '13 at 11:43
  • 1
    the example you gave is what I need but I do not want it using ActionBarSherlock. –  Dec 26 '13 at 11:50
  • Please check the new solution that you have accepted on Android 2.2 – jagmohan Jun 23 '14 at 07:23
  • both the solutions are good...but your answer helped me when I needed. Thanks mate! –  Jun 24 '14 at 11:51
  • Glad to be of service! – jagmohan Jun 24 '14 at 12:41
  • @jagmohan I stuck in same but still not able to find solution can you help? –  Jan 23 '15 at 07:08
  • @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. – jagmohan Jan 23 '15 at 10:43
  • @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??http://stackoverflow.com/questions/26483069/navigation-drawer-with-tabhost-and-viewpager –  Jan 23 '15 at 11:22
  • @jagmohan can yu tell http://stackoverflow.com/questions/31114379/how-to-add-tabhost-in-navigation-drawer – Aditya Jun 29 '15 at 13:30
  • @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 – GreenROBO Aug 17 '15 at 04:50
1

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.

Tim Rae
  • 3,167
  • 2
  • 28
  • 35
  • 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. – jiahao Oct 23 '14 at 13:14
  • the training sample code in android developer site still use NAVIGATION_MODE_TABS. And the google play store seemed using action bar tabs? right? – liam xu Jan 20 '15 at 13:13
  • No, the latest version of Google Play (5.1.11) is using sliding tabs as per my example (e.g. navigate to "shop apps"). – Tim Rae Jan 20 '15 at 20:41