How to display tabLayout over the viewPager bottom on scrolling in android?

Question

I am a newbie to android material design. I am trying to do the following: I am placing a ToolBar at the top, followed by a ViewPager and a TabLayout at the bottom of my layout. When I scroll the ViewPager to the toolbar hides but the TabLayout does not appear over the ViewPager. The TabLayout pushes the ViewPager up and is displayed below the ViewPager. Can anyone help me to display the TabLayout at the top of the ViewPager. My layout is as below:

<android.support.design.widget.CoordinatorLayout  xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"

        android:background="@color/turquoise"
        app:layout_scrollFlags="scroll|enterAlways"

        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/imv_drop_down"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:layout_alignParentLeft="true"
                android:layout_marginLeft="10dp"
                android:src="@drawable/test" />

            <TextView

                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@+id/imv_drop_down"
                android:gravity="center"
                android:text="Text"
                android:textColor="#ffffff"

                android:textSize="@dimen/common_btn_text" />

            <ImageView
                android:id="@+id/imv_search"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="10dp"
                android:src="@drawable/test" />

            <ImageView
                android:id="@+id/imv_notify"
                android:layout_width="50dp"
                android:layout_height="match_parent"
                android:layout_marginLeft="10dp"
                android:layout_toLeftOf="@+id/imv_search"
                android:src="@drawable/test" />
        </RelativeLayout>
    </android.support.v7.widget.Toolbar>


    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
        app:layout_behavior="@string/appbar_scrolling_view_behavior"

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

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:layout_scrollFlags="scroll|enterAlways"
    app:tabBackground="@drawable/tab_color"

    app:tabGravity="fill"
    app:tabMode="fixed" />
</android.support.design.widget.CoordinatorLayout>

use collapsing layout with toolbar.....check this http://stackoverflow.com/questions/30680824/how-to-use-a-tablayout-with-toolbar-inside-collapsingtoolbarlayout — H Raval, Mar 05 '16 at 09:04
If I take the ViewPager out of the AppBarLayout the same problem exists — Tiny, Mar 05 '16 at 09:08
Refer this link https://gist.github.com/iPaulPro/1468510f046cb10c51ea — Nitin Mali, Mar 05 '16 at 09:14

score 0 · Answer 1 · answered Nov 04 '17 at 22:52

This should fix it.

Take out the android.support.v4.view.ViewPager from the AppBarLayout.
Remove scroll from the layout_scrollFlags of the toolbarLayout.

So instead of this: app:layout_scrollFlags="scroll|enterAlways", make sure you have something like this: app:layout_scrollFlags="enterAlways"

How to display tabLayout over the viewPager bottom on scrolling in android?

1 Answers1