Android toolbar overlapping TabLayout in CollapsingToolbarLayout

Question

I try to make a CollapsingToolbarLayout with a Toolbar and a TabLayout under it, but they overlap and I get this

I have tried many solutions, but still have this problem. Here is my xml:

 <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:fab="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:id="@+id/app_bar_layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" app:contentScrim="@color/colorAppPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:id="@+id/image" android:layout_width="match_parent" android:layout_height="250dp" android:background="@drawable/material_plane" android:fitsSystemWindows="true" android:scaleType="centerCrop" android:src="@drawable/header_png" app:layout_collapseMode="parallax" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> <ImageView android:id="@+id/imageViewPhoto" android:layout_width="80dp" android:layout_height="80dp" android:layout_centerInParent="true" /> <TextView android:id="@+id/textViewName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="false" android:layout_below="@+id/imageViewPhoto" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:text="TEXT" android:textColor="@color/white" android:textSize="16dp" /> </RelativeLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:fitsSystemWindows="true" android:gravity="top" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways"> <TextView android:id="@+id/toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textColor="@color/white" android:textSize="20dp" android:textStyle="bold" /> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" android:fitsSystemWindows="true" app:tabBackground="@android:color/transparent" app:tabMode="scrollable" /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> <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.CoordinatorLayout> 

Answer 1

Try removing this from your RelativeLayout :

 app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> 

Or just let them be like this:

 app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

This is the mistake that I think of.

---

UPDATED: check this link: http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library/

And a similar question: How to use TabLayout with the toolbar inside CollapsingToolbarLayout?

 <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" app:contentScrim="@color/colorPrimaryDark" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed"> <RelativeLayout android:id="@+id/image" android:layout_width="match_parent" android:layout_height="250dp" android:background="@drawable/header" android:fitsSystemWindows="true" android:scaleType="centerCrop"> <ImageView android:id="@+id/imageViewPhoto" android:layout_width="80dp" android:layout_height="80dp" android:layout_centerInParent="true" app:layout_collapseMode="parallax" /> <TextView android:id="@+id/textViewName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="false" android:layout_below="@+id/imageViewPhoto" android:layout_centerHorizontal="true" android:layout_marginTop="5dp" android:text="TEXT" android:textSize="16dp" /> </RelativeLayout> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:fitsSystemWindows="true" android:gravity="top" app:layout_collapseMode="pin" app:layout_scrollFlags="scroll|enterAlways"> <TextView android:id="@+id/toolbar_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:textSize="20dp" android:textStyle="bold" /> </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:id="@+id/htab_tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" app:tabIndicatorColor="@android:color/white" /> </android.support.design.widget.CollapsingToolbarLayout> 

Answer 2

I also got into a similar problem, I tried to remove android:fitsSystemWindows="true" from CoordinatorLayout. And it worked.

Answer 3

Edit your XML as follows:

  <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_gravity="bottom" android:fitsSystemWindows="true" android:marginTop="?attr/actionBarSize" app:tabBackground="@android:color/transparent" app:tabMode="scrollable"/> 

Comment if it does not work

Answer 4

You should keep the TabLayout below the CollapsingToolbarLayout and it will work confidently, you can see my code below:

 <android.support.design.widget.AppBarLayout android:id="@+id/appbar" android:layout_width="match_parent" android:layout_height="wrap_content" android:fitsSystemWindows="true" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginBottom="@dimen/_32sdp" app:expandedTitleMarginEnd="@dimen/_64sdp" app:expandedTitleMarginStart="@dimen/_48sdp" app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Large" app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"> <!-- Your View that you want to hide on animation --> <android.support.v4.view.ViewPager android:id="@+id/pager" android:layout_width="match_parent" android:layout_height="@dimen/_250sdp" android:fitsSystemWindows="true" android:scaleType="centerCrop" app:layout_collapseMode="parallax" /> <!-- Your toolbar should always below your View otherwise it won't be visible --> <android.support.v7.widget.Toolbar android:id="@+id/toolBar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" app:layout_collapseMode="pin" app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" app:title="title text" app:titleTextColor="@color/white" /> </android.support.design.widget.CollapsingToolbarLayout> <!--your tablayout should be here which will come below the toolbar--> <android.support.design.widget.TabLayout android:id="@+id/tabs" android:layout_width="match_parent" android:layout_height="@dimen/_50sdp" android:layout_below="@+id/toolbar" android:layout_gravity="bottom" android:background="@color/theme_color" android:overScrollMode="never" android:scrollbars="horizontal" android:visibility="visible" app:layout_anchor="@id/appbar" app:layout_anchorGravity="bottom" app:tabIndicatorColor="@color/orrange" app:tabMode="scrollable" /> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.NestedScrollView android:id="@+id/scrollView" android:layout_width="match_parent" android:layout_height="wrap_content" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <include layout="@layout/content" /> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout> 

All the best.

Answer 5

Make sure you use the following structure:

 <android.support.design.widget.CoordinatorLayout> <android.support.design.widget.AppBarLayout> <android.support.design.widget.CollapsingToolbarLayout> <ImageView /> <android.support.v7.widget.Toolbar /> <android.support.design.widget.TabLayout /> </android.support.design.widget.CollapsingToolbarLayout> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> 

In which you need to make sure that only the toolbar:

 android:layout_marginBottom="48dp" app:layout_collapseMode="pin" 

 <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" android:layout_gravity="top" android:layout_marginBottom="48dp" app:layout_collapseMode="pin" > 

And CollapsingToolbarLayout Must Contain

 app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" 

 <android.support.design.widget.CollapsingToolbarLayout android:id="@+id/collapsing_toolbar" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll|exitUntilCollapsed|snap" app:titleEnabled="false">