Fixed TabLayout and Content overlap AppBar

Tablayout scroll

With the new Android Support Design library, AppBar has some cool features.

I am looking for an implementation of the same scroll effect as shown in the gif above. (From Google Play games → My games)

I looked at adding the following attribute to nestedscrollview by placing the content above the application bar.

app:behavior_overlapTop 

It works as expected when all components inside the application panel are configured to scroll.

 app:layout_scrollFlags="scroll" 

If I want TabLayout to be docked at the top, the space below it will also be docked. It looks strange:

My implementation

In short, is there a way to create the above using the new design library, or do I need to do it the other way?

XML requested:

 <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> 
+6
source share
1 answer

Try it, hope it works

Set app:layout_scrollFlags="scroll|enterAlways" on the 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" /> 

0
source

All Articles