Fixed TabLayout and Content overlap AppBar

Question

With the new Android Support Design library, there has come some cool features with regards to the AppBar.

I'm looking at implementing the same scroll effect as shown in the gif above. (Taken from Google Play Games -> My Games)

I've had a look at adding the following attribute to the nestedscrollview, placing the content above the appbar.

app:behavior_overlapTop

It works as expected when all the components inside appbar is set to scroll.

app:layout_scrollFlags="scroll"

If I want the TabLayout to be pinned at the top, the space below it will also be pinned. So it looks weird:

In short, is there any way to create the above using the new design library, or do I have to make it some other way?

Requested XML:

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

    <android.support.design.widget.AppBar
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="164dp"
        android:background="?attr/colorPrimary">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_scrollFlags="scroll"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways"/>

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

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

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

You need to show more of your xml. Like the toolbar, CoordinatorLayout.... Beside that, have you tried app:layout_scrollFlags="scroll|enterAlways" on the toolbar, and app:layout_behavior="@string/appbar_scrolling_view_behavior" on the list? — Renan Ferreira, Jul 27 '15 at 11:28
I think [this](http://stackoverflow.com/questions/31039074/overlap-scrolling-view-with-appbarlayout) will help you find the solution. — Saiteja Parsi, Oct 14 '15 at 23:28

score 0 · Answer 1 · answered Feb 12 '16 at 06:43

Try this, Hope its work

Set app:layout_scrollFlags="scroll|enterAlways" in Toolbar and android:scrollbars="horizontal" in TabLayout

As per my suggestion, you should remove this line app:layout_scrollFlags="scroll|enterAlways" in your TabLayout

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:app1="http://schemas.android.com/apk/res/com.samsung.ssc"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context="com.samsung.ssc.LMS.LMSListActivity">

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

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:elevation="4dp"
        android:minHeight="?attr/actionBarSize"
        app:layout_scrollFlags="scroll|enterAlways">


    </android.support.v7.widget.Toolbar>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayoutLMSList"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:scrollbars="horizontal">


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

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


<android.support.design.widget.FloatingActionButton
    android:id="@+id/fabCreateNewLMS"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_gravity="right|bottom"
    android:layout_margin="@dimen/margin_15"
    android:onClick="onNewLeaveCreateClick"
    android:src="@drawable/ems_pencil"
    app1:rippleColor="@color/ems_status_sky_blue_color"
    app:backgroundTint="@color/ems_status_yellow_color"
    app:borderWidth="@dimen/margin_0"
    app:elevation="@dimen/margin_5" />

Fixed TabLayout and Content overlap AppBar

1 Answers1