I'm trying to make CollapsingToolbarLayout with Toolbar and TabLayout below it, but they overlapping each other and I get this
I've 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>
Try to remove this from your RelativeLayout:
app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">
Or just let them be like this:
app:layout_scrollFlags="scroll|enterAlwaysCollapsed">
It was a bug i guess.
UPDATED: check this link: http://blog.grafixartist.com/parallax-scrolling-tabs-design-support-library/
And similar question: How to use a TabLayout with 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>
I also got into similar kind of problem, i tried removing android:fitsSystemWindows="true" from CoordinatorLayout. And it worked.
I found a way to resolve the using just add this line in toolbar layout.
android:layout_marginBottom="48dp"
Edit your XML like this:
<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
You have to keep your TabLayout below the CollapsingToolbarLayout, and it will be working sure, you can see my code from 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.
Make sure you are using 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 toolbar has:
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">
Related
This layout is incorrect. I placed Tablayout inside CollapsingToolbar to make sure it is visible:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/gray_background"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="234dp"
android:id="#+id/promo_detail_appbar"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/promo_detail_collapsing_toolbar"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/white"
app:expandedTitleMarginBottom="40dp"
app:expandedTitleMarginStart="20dp"
app:collapsedTitleTextAppearance="#style/CollapsedToolbarTitle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/header"
android:background="#drawable/promo_background"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#android:color/white"
android:text="Королевский фарфор"
android:layout_marginBottom="15dp"
android:layout_marginStart="20dp"
app:layout_collapseMode="parallax"
android:layout_gravity="bottom"
/>
<LinearLayout
<!-- other views here-->
</LinearLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/tablayout"
app:tabGravity="fill"
app:tabMode="fixed"
android:layout_gravity="bottom"
/>
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/promo_detail_toolbar"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f1efef"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<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.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
This is how it looks now
I need Tablayout to appear under toolbar in both expanded and collapsed states. Any help would be appreciated. Thank you.
Try this one
<android.support.design.widget.AppBarLayout
android:id="#+id/htab_appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:stateListAnimator="#null"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/htab_collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
app:titleEnabled="false">
<ImageView
android:id="#+id/htab_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/bg_design"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
/>
<View
android:layout_width="match_parent"
android:layout_height="match_parent"
android:alpha="0.3"
android:background="#android:color/black"
android:fitsSystemWindows="true"
/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="top"
android:layout_marginBottom="48dp"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
/>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/white"
app:tabTextAppearance="#style/TextAppearance.Subhead.Bold"
app:tabTextColor="#910b32"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_anchorGravity="bottom"
android:orientation="vertical"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
>
<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"
/>
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
I'm trying to make a layout with CollapsingToolbarLayout. But I do not get one thing. I want to remove the shadow between Toolbar and TabLayout. I've tried several ways and I have not managed to remove the shadow. Can anybody help me? Thank you
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
android:background="#android:color/white"
android:fitsSystemWindows="true">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="#+id/adview"
android:fitsSystemWindows="true">
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="50dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
android:translationZ="2dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed"
app:tabTextColor="#color/tabs_text_selector" />
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<net.opacapp.multilinecollapsingtoolbar.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="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/detalle_txt_expanded"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/detalle_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/img_thumb_m"
android:transitionName="#string/transition"
app:layout_collapseMode="parallax"
tools:targetApi="lollipop" />
<ImageView
android:id="#+id/detalle_img_tipo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/img_edificio"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme"/>
</net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.design.widget.FloatingActionButton
android:id="#+id/detalle_info_fab_check"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:clickable="false"
android:src="#drawable/ic_check1"
app:fabSize="mini"
app:backgroundTint="#android:color/white"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom|right|end" />
</android.support.design.widget.CoordinatorLayout>
<include
android:id="#+id/adview"
layout="#layout/adview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true" />
Try setting app:elevation="0dp" (not android:elevation) for your AppBarLayout.
In case you don't have the app namespace in your xml, add xmlns:app="http://schemas.android.com/apk/res-auto".
The difference between these two properties can be found here.
After that, check that you're not adding some background/border with any of these properties:
<android.support.design.widget.TabLayout
android:background="?attr/colorPrimary"
android:translationZ="2dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"/>
Or the theme you're using for the AppBarLayout.
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="56dp"
app:titleTextColor="#android:color/white" />
</android.support.design.widget.AppBarLayout>
<include layout="#layout/content_tablayout" />
Use app:elevation="0dp" to remove the shadow. It has always worked for me. Hope it works for you.
And also by programatically,
appBar.setOutlineProvider(null);
You have to put the Toolbar and the TabLayout in the same AppBarLayout
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="200dp"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<net.opacapp.multilinecollapsingtoolbar.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="20dp"
app:expandedTitleMarginStart="20dp"
app:expandedTitleTextAppearance="#style/detalle_txt_expanded"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/detalle_img"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/img_thumb_m"
android:transitionName="#string/transition"
app:layout_collapseMode="parallax"
tools:targetApi="lollipop" />
<ImageView
android:id="#+id/detalle_img_tipo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="15dp"
android:layout_gravity="center_horizontal"
android:src="#drawable/img_edificio"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme"/>
</net.opacapp.multilinecollapsingtoolbar.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="?attr/colorPrimary"
android:translationZ="2dp"
app:layout_anchor="#+id/appbar"
app:layout_anchorGravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#android:color/white"
app:tabIndicatorHeight="3dp"
app:tabMode="fixed"
app:tabTextColor="#color/tabs_text_selector" />
</android.support.design.widget.AppBarLayout>
Take a look at this issue
I know the question is already answered. But I want to share something that I learnt the hard way so that people who are facing the same problems can save time.
You need to wrap AppBarLayout inside CoordinatorLayout or else app:elevation will not work.
Working example:
<CoordinatorLayout>
<AppBarLayout>
<Toolbar>
I am using Collapse ToolBar to make the layout as follow.But the ToolBar is not set properly. Now I am setting ToolBar Height as 100dp. If I reduce it, the ViewPager where the Tabs are set is overlapped on the ToolBar.
This is my xml.
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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<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:fitsSystemWindows="false">
<android.support.design.widget.AppBarLayout
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/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/slide_image"
android:background="#drawable/slide_transparent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<TextView
android:id="#+id/dashboard_txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:gravity="center|bottom"
android:text="Salad"
android:textColor="#color/white"
android:textSize="25dp"
android:textStyle="italic" />
<TextView
android:id="#+id/dashboard_txt_des"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:gravity="center|bottom"
android:text="#string/welcome_des"
android:textColor="#color/white"
android:textSize="15dp" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
android:background="#drawable/toolbar_layout"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp"
app:titleTextAppearance="#style/Toolbar.TitleText" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:tabIndicatorColor="#color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
<!--<include layout="#layout/activity_collapse_toolbar" />-->
</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>
<!--<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />-->
</android.support.v4.widget.DrawerLayout>
UPDATE:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">
<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:fitsSystemWindows="false">
<android.support.design.widget.AppBarLayout
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/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/collapse_toolbar"
android:foreground="#drawable/slide_transparent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/slide_image"
app:layout_collapseMode="parallax" />
<TextView
android:id="#+id/dashboard_txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/header"
android:layout_marginTop="60dp"
android:gravity="center|bottom"
android:text="Salad"
android:textColor="#color/white"
android:textSize="25dp"
android:textStyle="italic" />
<TextView
android:id="#+id/dashboard_txt_des"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:layout_below="#+id/dashboard_txt_title"
android:gravity="center|bottom"
android:text="#string/welcome_des"
android:textColor="#color/white"
android:textSize="15dp" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_below="#+id/dashboard_txt_des"
android:background="#drawable/toolbar_layout"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp"
app:titleTextAppearance="#style/Toolbar.TitleText" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#+id/toolbar"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:tabIndicatorColor="#color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
<!--<include layout="#layout/activity_collapse_toolbar" />-->
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_below="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<!--<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />-->
</android.support.v4.widget.DrawerLayout>
Expect Result:
Maybe it's an old answer but there are 2 simple solutions:
1. Toolbar with layout_marginBottom
If you need to have a transparent (or semi transparent) TabLayout then you can do something like this:
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<YourMagicViewWithBackgroundImageTextAndOtherStuff
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="48dp"
android:background="#color/semiTransparentHeaderBg"
app:layout_collapseMode="pin" />
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_gravity="bottom"
android:background="#color/semiTransparentHeaderBg" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
2. TabLayout outside CollapsingToolbarLayout
If you don't need to have a transparent TabLayout then just put them outside CollapsingToolbarLayout as kris larson or winter suggests. AppBarLayout extend from LinearLayout so everything should works flawlessly.
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<YourMagicViewWithBackgroundImageTextAndOtherStuff
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/semiTransparentHeaderBg"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
In your CollapsingToolbarLayout each ImageView,TextView set
android:layout_below="#+id/yourid "
set each widget one by one below of other widget based on your designview order.
<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:fitsSystemWindows="false">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
android:id="#+id/appbar"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapse_toolbar"
android:layout_width="match_parent"
android:layout_height="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="100dp"
android:background="#drawable/toolbar_layout"
android:gravity="top"
android:minHeight="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="15dp"
app:titleTextAppearance="#style/Toolbar.TitleText" />
<ImageView
android:id="#+id/header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="#+id/toolbar"
android:foreground="#drawable/slide_transparent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/slide_image"
app:layout_collapseMode="parallax" />
<TextView
android:id="#+id/dashboard_txt_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="60dp"
android:gravity="center|bottom"
android:text="Salad"
android:textColor="#color/white"
android:textSize="25dp"
android:textStyle="italic" />
<TextView
android:id="#+id/dashboard_txt_des"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/header"
android:layout_marginTop="40dp"
android:layout_below="#+id/dashboard_txt_title"
android:gravity="center|bottom"
android:text="#string/welcome_des"
android:textColor="#color/white"
android:textSize="15dp" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_below="#+id/dashboard_txt_des"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:tabIndicatorColor="#color/white" />
</android.support.design.widget.CollapsingToolbarLayout>
<!--<include layout="#layout/activity_collapse_toolbar" />-->
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/viewpager"
android:layout_below="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
<!--<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_main"
app:menu="#menu/activity_main_drawer" />-->
The below code works fine and look like code very close look that you required
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="slidenerd.vivz.navigationviewdemo.FourthActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/root_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="192dp"
android:scaleType="centerCrop"
android:src="#drawable/rsz_bg_cover"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/colorPrimary"
app:tabSelectedTextColor="#android:color/white"
app:tabTextColor="#EEE" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="16dp"
android:src="#drawable/ic_add_black"
app:borderWidth="0dp"
app:fabSize="mini" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="#menu/menu_drawer" />
</android.support.v4.widget.DrawerLayout>
Screen shots will be like
Also refer this link for more https://www.youtube.com/watch?v=aqvwA58b9l8&index=59&list=PLonJJ3BVjZW6CtAMbJz1XD8ELUs1KXaTD
Hope this helps you
Change your xml file as below
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
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:layout_gravity="bottom"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:layout_gravity="top"
app:layout_collapseMode="pin" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="bottom"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:tabGravity="fill"
/>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
I too had the same issue and i solved it by this way.
What I want to achieve is almost the same result as is on picture, but without collapsing and with tab layout under toolbar text. I got it done using CollapsingTollbarLayout, but I don't think that's a good way if I don't want it to colapse.
How should I properly implement the image, so it's under the toolbar and tab layout ?
Ok, here is the solution :
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/imageViewplaces"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="#drawable/pyrros" />
<android.support.design.widget.TabLayout
android:id="#+id/caj_tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignBottom="#id/imageViewplaces"
android:elevation="6dp"
android:minHeight="?attr/actionBarSize"
app:tabTextAppearance="#style/MineCustomTabText"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/AppTheme.PopupOverlay"
android:layout_marginTop="12dp"
app:titleTextAppearance="#style/Toolbar.TitleText" />
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
You can do like this
<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"
android:fitsSystemWindows="true"
tools:context="com.mobiona.kriddr.view.activity.ProviderDetailsActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="#android:color/white"
app:expandedTitleTextAppearance="#style/TextViewStyle.White"
app:collapsedTitleTextAppearance="#style/TextViewStyle"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerInside"
android:id="#+id/imageName"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
app:theme="#style/Toolbar"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
app:popupTheme="#style/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="#layout/yourotherpartofxml" />
</android.support.design.widget.CoordinatorLayout>
Hope it will help you.
Hope this helps. check this render
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="256dp"
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:titleEnabled="false"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/home_appbar_screen"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_marginBottom="48dp"
android:background="?attr/colorPrimary"
app:layout_collapseMode="parallax"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_gravity="bottom"
app:tabGravity="fill"
app:tabIndicatorColor="#color/headPink"
app:tabMode="fixed"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/backPurple"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitStart"
android:src="#drawable/home_background_screen" />
<TextView
android:id="#+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/test"
android:textColor="#color/colorWhite"
android:textSize="18sp"
android:visibility="visible" />
</RelativeLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
This question already has answers here:
How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?
(18 answers)
Closed 7 years ago.
How to make something like it
My solution is so close to ideal, but have some problems. Tabs dissaper with image. How to fix it? Tabs in "expanded mobe" must be with image on background! Thanks for your answer!
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
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:background="#android:color/transparent"
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"
app:contentScrim="?attr/colorPrimary"
android:background="#android:color/transparent"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
android:id="#+id/toolbar"
android:gravity="bottom"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="parallax"
android:layout_gravity="bottom"
android:layout_marginBottom="56dp"
android:background="#android:color/transparent"
app:tabTextColor="#color/white"
app:tabSelectedTextColor="#color/colorAccent"
app:tabIndicatorColor="#color/white"
app:tabIndicatorHeight="6dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:foreground="?android:windowContentOverlay"
app:behavior_overlapTop="56dp"
/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="nothing to show"
android:textColor="#color/colorPrimary"
android:gravity="center"
android:visibility="gone"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:id="#+id/empty"/>
Modifications :
just remove app:layout_collapseMode="parallax" from TabLayout
Change android:gravity="bottom" to android:gravity="top" in Toolbar.
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
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:background="#android:color/transparent"
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="250dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
android:background="#android:color/transparent"
app:expandedTitleMarginEnd="64dp"
app:expandedTitleMarginStart="48dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/header_image"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
android:id="#+id/toolbar"
android:gravity="top"
app:popupTheme="#style/AppTheme.PopupOverlay"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
<android.support.design.widget.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_marginBottom="56dp"
android:background="#android:color/transparent"
app:tabTextColor="#color/white"
app:tabSelectedTextColor="#color/colorAccent"
app:tabIndicatorColor="#color/white"
app:tabIndicatorHeight="6dp"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:foreground="?android:windowContentOverlay"
app:behavior_overlapTop="56dp"/>
<TextView
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="nothing to show"
android:textColor="#color/colorPrimary"
android:gravity="center"
android:visibility="gone"
android:id="#+id/empty"/>
</android.support.design.widget.CoordinatorLayout>
Edit1: You have to provide add a specific height to CollapsingToolbarLayout.
Added android:fitsSystemWindows="true" to AppBarLayout and CollapsingToolbarLayout.
Removed app:layout_behavior="#string/appbar_scrolling_view_behavior" from TextView.
You can also checkout this Sample for more information.