ViewPager and FrameLayout together

Question

I cannot find sensible information on that matter so maybe I am doing it completely wrong?

I am trying to use a Navigation Drawer with a FrameLayout to display fragments.

However, when clicking one of the items on the Drawer, I would like to display a TabLayout with 3 fragments

So what architecture do I need to use?

Should the Activity inflating the drawerlayout host the ViewPager and the FrameLayout?

So clicking on Settings on the drawer for example the FrameLayoutdisplays a settings fragment but when hitting Events, a fragment with 3 Tabs showing different events appear inside the FrameLayout?

Or should I hide the framelayout somehow then and display the ViewPager inside the Activity?

The main activity xml:

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

        <include layout="@layout/toolbar"/>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:tabMode="fixed"
            app:tabGravity="fill"
            app:tabTextAppearance="@style/TabCapsFalse"
            android:background="@color/teal"
            app:tabTextColor="@color/iron"

            app:tabSelectedTextColor="@color/tealfifty"
            app:tabIndicatorColor="@color/purple600"
            app:tabIndicatorHeight="3dp"
            />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

    </android.support.v4.view.ViewPager>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/content_frame"/>
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
    android:id="@+id/nvView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@color/tealfifty"
    app:itemBackground="@drawable/drawer_item"
    app:itemTextColor="@color/drawer_item"
    app:itemIconTint="@color/drawer_item"
    app:headerLayout="@layout/drawer_header"
    app:menu="@menu/navigation_view_items" />

I'm not sure why you gave me a link to that answer but about the activity: When I run my App I get to the MainActivity which controls the Drawer and all fragments(different parts of the app). However, the first thing that it has to show is exactly the ViewPager+TabLayout. So you suggest that I have one activity with the drawer and only the viewpager with the 3 tabs, no framelayout? And in case the user navigates away from the events shown in the ViewPager, he goes to the other activity which holds another drawer with a framelayout, and now this activity controls the content of the whole app? — iBobb, Feb 18 '16 at 16:14
If the tabs are the first thing the user sees, then that changes it a bit. If your minsdk is 17 or greater, or you use support library Fragments, you can do it with nested Fragments. See here: http://stackoverflow.com/questions/31641979/using-tablayout-inside-a-fragment-tab-text-invisible — Daniel Nugent, Feb 18 '16 at 16:27
One of my attempts was using nested fragments I believe but maybe I got it wrong. Do you care to elaborate please and maybe provide a relevant link? In terms of the architecture of the whole app I mean since that's my main problem, integrate all the Drawer+FrameLayout to manage different sections of my app and then having a TabLayout as well (which also opens as the first visible thing to the user). — iBobb, Feb 18 '16 at 16:29

score 0 · Answer 1 · answered Feb 18 '16 at 17:09

You want each section in the Drawer to navigate to a new Fragment. Since the TabLayout is only going to be on one of the screens, it will go in one of the Fragments called by your Activity. For example, remove the TabLayout and ViewPager from activity_main.xml, and put them in a new fragment instead. Add that Fragment to content_frame, and you're all set.

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

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinatorLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:id="@+id/appBarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <include layout="@layout/toolbar"/>

        </android.support.design.widget.AppBarLayout>

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/content_frame"/>

    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/tealfifty"
        app:itemBackground="@drawable/drawer_item"
        app:itemTextColor="@color/drawer_item"
        app:itemIconTint="@color/drawer_item"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/navigation_view_items" />

I am going to try that again as I implemented it previously and faced problems so I experimented with my example above. I'm wondering, the viewpager and tablayout would be in lets say ExampleFragment, what should I do for it's layout, should it just contain the viewpager and tablayout so that it is like a host fragment, and then in the TabLayout I add another 3 fragments, cause right now I have an ExampleFragment with a recycler view and the viewpager and tablayout, and then in the tablayout I also add an instance of that same ExampleFragment as the first item — iBobb, Feb 18 '16 at 19:21
You don't need to add `Fragments` to the `TabLayout` in xml, they get set programmatically. http://www.truiton.com/2015/06/android-tabs-example-fragments-viewpager/ — TheoKanning, Feb 18 '16 at 20:53
i am setting them programmatically, that's what i meant sorry. I have a fragment setting 3 other fragments programmatically to the viewpager. However, right now the first fragment added to the viewpager is the host fragment itself with the newinstance method — iBobb, Feb 18 '16 at 23:20

score 0 · Accepted Answer · edited Oct 17 '16 at 17:50

I ended up having a MainActivity with a DrawerLayout and FrameLayout to display fragments. One of the fragments is a HostFragment for my 3 TabLayout Fragments that I am to display. The ViewPager is in the HostFragment layout as a single element. The setup of ViewPager and TabLayout is done in the HostFragment as well.

This is my DrawerLayout:

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<include
    layout="@layout/appbar_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:fitsSystemWindows="true"
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/tealfifty"
        app:itemBackground="@drawable/drawer_item"
        app:itemTextColor="@color/drawer_item"
        app:itemIconTint="@color/drawer_item"
        app:headerLayout="@layout/drawer_header"
        app:menu="@menu/navigation_view_items" />
</android.support.v4.widget.DrawerLayout>

appbar_content.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <include layout="@layout/toolbar" />

    <android.support.design.widget.TabLayout
        android:visibility="visible"
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/teal"
        app:tabGravity="fill"
        app:tabIndicatorColor="@color/purple800"
        app:tabIndicatorHeight="4dp"
        app:itemIconTint="@color/tabicons"
        app:tabMode="fixed"
        app:tabSelectedTextColor="@color/tealfifty"
        app:tabTextAppearance="@style/TabCapsFalse"
        app:tabTextColor="@color/iron" />
</android.support.design.widget.AppBarLayout>



<FrameLayout android:id="@+id/content_main_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:showIn="@layout/appbar_content"
    xmlns:tools="http://schemas.android.com/tools">
    <android.support.v4.widget.NestedScrollView
        android:id="@+id/scroll_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</FrameLayout>


<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:visibility="invisible"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:clickable="true"
    android:src="@drawable/addico"
    app:layout_anchor="@id/content_main_frame"
    app:layout_anchorGravity="bottom|end" />

One of my main problems was that I was using just a FrameLayout, or just a NestedScrollView. Now that I put the latter inside the FrameLayout and I gave the FrameLayout a scroll_behaviour, I guess the ScrollView inherits it and everything works like a charm! It took me a very long time to come to the conclusion how to set this up!

ViewPager and FrameLayout together

2 Answers2