Swiping Tabs inside a Navigation Drawer Fragment

Question

I have implemented Navigation Drawer by Referring this tutorial and now what I want to do is to display swiping tabs inside a fragment. ie. when i click on an item in navigation drawer, lets say the first one, it should display swiping tabs for that items.

If the item1 is Events, when i click on it, then it should display swiping tabs with tabs like todays events, and upcoming events. Im a beginner and I have tried to google for this, the solution i find is using sherlock, but i dont want to use any library. Please point me to a right tutorial. Can i implement view pager inside fragment. Given that view pager will have two more fragments.

Thank you.

you don't need and perhaps shouldn't have a fragment in your navigation drawer - you can use a FragmentViewPager inside the layout for the drawer, and this could contain fragments, but please think about your UX design and ensure this is what you (/your users) want. — ataulm
Thats right.. if you use the drawer layout, and then set your child views, you can easily achieve what you are trying to do. — mike20132013

mike20132013 mike20132013 · Accepted Answer · 2014-03-13T21:41:27

Here's one example of the drawer I was talking in that comment. If you have the drawer layout and the child as listview and viewpager, this is how the layout will look like:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#333333"
    tools:context=".MainActivity" >

    <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <!-- This List View for the sliding menu -->

    <LinearLayout
        android:id="@+id/list_slidermenu"
        android:layout_width="240dp"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:orientation="vertical" >
<!-- If you want to add some more things to your navigation drawer -->
        <!-- <EditText
            android:id="@+id/search_edit_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#FFFFFF"
            android:hint="Search"
            android:maxLines="1" >
        </EditText> -->

        <ListView
            android:id="@+id/list_slidermenu_child"
            android:layout_width="250dp"
            android:layout_height="match_parent"
            android:background="#303030"
            android:choiceMode="singleChoice"
            android:divider="#272727"
            android:dividerHeight="3dp"
            android:listSelector="@drawable/list_selector"
            android:padding="5dp" />
    </LinearLayout>

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

And this is how your layout will look like:

Test Image http://imageshack.com/a/img22/9166/qh8h.png

Now, in my example, When I click on any item in the list, the view pager sets that view it's supposed to be.

Is this how you want it to be ?

Here's a new image:

Test Image http://imageshack.com/a/img600/4421/2khw.png

And on click of any of the items in the navigation, it displays that content on the view behind it ?

Swiping Tabs inside a Navigation Drawer Fragment

1 Answers