Develop Reference

layout_collapseMode : PIN not working

I want to show a tab layout with an image that should be scrollable but then the tablayout is scrolled above it should remain fixed. In my case it also moves up with the scrolling. This is my final version of layout. Have tried so many things
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="2dp"
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"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#color/coupon_green"
app:layout_collapseMode="parallax" />
<android.support.design.widget.TabLayout
android:id="#+id/profileTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#color/white"
android:elevation="2dp"
app:layout_collapseMode="pin"
app:tabIndicatorColor="#color/skill_black"
app:tabMode="scrollable"
app:tabSelectedTextColor="#color/skill_black"
app:tabTextColor="#color/black" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<com.skillbox.ui.CustomViewPager
android:id="#+id/profilePager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
app:layout_anchor="#+id/appBar"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

Coordinator Layout Behaviours: To be more specific, the imageview anchored to AppBarLayout is not disappearing When scrolled

As you can see in the image (via link above), the image view does not disappear as FAB does. I need the exact same result as FAB
Please Help! :)

Without you posting code I can't really say much. but follow the layout's structure below. Keep in mind nested scroll view and the coordinator layout behaviors.
source: https://www.androidauthority.com/using-coordinatorlayout-android-apps-703720/
<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.sample.foo.usingcoordinatorlayout.FabAndSnackbarActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBar"
android:layout_width="match_parent"
android:layout_height="300dp"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp"
app:title="#string/collapsing_toolbar">
<ImageView
android:id="#+id/toolbarImage"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="#drawable/bg"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:layout_collapseMode="pin" />
</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">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="28sp"
android:lineSpacingExtra="8dp"
android:text="#string/long_latin"
android:padding="#dimen/activity_horizontal_margin" />
</android.support.v4.widget.NestedScrollView>
<android.support.design.widget.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
android:src="#drawable/mascot_icon"
app:layout_anchor="#id/appBar"
app:layout_anchorGravity="bottom|end" />

FAB not properly displaying with CollapsingToolbar in Fragment

I have a main Activity, which includes a TabLayout inside a CollapsingToolbar. One of my Tabs is a Fragment which contains a FAB in the bottom right hand corner. The issue is that when I go to this Tab, the Collapsing Toolbar is fully open and the FAB is hidden. I can only see it when I Collapse the ToolBar. Is there a way to fix this?
I know that I can place the FAB within my CollapsingToolBar layout, which is in my MainActivity, but I want to/need to keep it in the Fragment Layout instead.
Here is my MainActivity Layout:
<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="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipToPadding="false"
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:elevation="24dp"
android:layout_height="match_parent"
app:titleEnabled="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header_image"
android:alpha="0.5"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="top"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
style="#style/AppTabLayout"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:fillViewport="true"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.markfeldman.tasktrack.activities.MainActivity">
</android.support.v4.view.ViewPager>
</android.support.design.widget.CoordinatorLayout>
Here is my Fragment Layout:
<FrameLayout
android:id="#+id/tasks_container"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
tools:context="com.markfeldman.tasktrack.fragments.Tasks">
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:fabSize="normal"
android:elevation="6dp"
app:backgroundTint="#color/colorPrimary"
android:src="#drawable/ic_add_black_24dp"
android:layout_gravity="end|bottom"
app:pressedTranslationZ="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp" />
</FrameLayout>
This is what it looks like when I first navigate to my tab and the ToolBar is NOT collapsed:
And Here I pull the ToolBar Up:
I can add marginBottom padding to have it be visible at first but then it looks odd when I Collapse the Toolbar. Any suggestions?

Move FAB to activity layout:
<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="wrap_content">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="200dp"
android:clipToPadding="false"
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:elevation="24dp"
android:layout_height="match_parent"
app:titleEnabled="false"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header_image"
android:alpha="0.5"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"/>
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_gravity="top"
android:layout_height="?attr/actionBarSize"
android:layout_width="match_parent" />
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
style="#style/AppTabLayout"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/container"
android:fillViewport="true"
android:background="#color/colorAccent"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
tools:context="com.markfeldman.tasktrack.activities.MainActivity">
</android.support.v4.view.ViewPager>
<android.support.design.widget.FloatingActionButton
android:id="#+id/fab"
app:fabSize="normal"
android:elevation="6dp"
app:backgroundTint="#color/colorPrimary"
android:src="#drawable/ic_add_black_24dp"
app:pressedTranslationZ="12dp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
<!--NEXT 2 LINES SHOULD HELP-->
app:layout_anchor="#id/content"
app:layout_anchorGravity="bottom|end"/>
</android.support.design.widget.CoordinatorLayout>

collapsing bar layout and recyclerview

i am implementing collapsingbarlayout and i want my recyclerview inside it. after reading many post i implemted successfully...but the collapsingbarlaouyt isnt collapsing its still at the same position and the recyclerview is working just fine.Recyclerview items are properly scrolling but collapsingbarlayout isnt working.please help
here is my main_activity.xml
<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/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.inthecheesefactory.lab.designlibrary.activity.MainActivity">
<android.support.design.widget.CoordinatorLayout
android:id="#+id/rootLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsingToolbarLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="#dimen/expanded_toolbar_title_margin_start"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="#drawable/header"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7" />
<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.Light"
app:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="#+id/my_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight = "1"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
<android.support.v4.widget.NestedScrollView
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.FloatingActionButton
android:id="#+id/fabBtn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="#dimen/fab_margin_bottom"
android:layout_marginRight="#dimen/fab_margin_right"
android:src="#drawable/ic_plus"
app:borderWidth="0dp"
app:fabSize="normal" />
</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="#layout/nav_header"
app:itemIconTint="#color/nav_item_icon_tint_color"
app:itemTextColor="#color/nav_item_text_color"
app:menu="#menu/navigation_drawer_items" />
</android.support.v4.widget.DrawerLayout>

I know that this is an old question. But if someone finds it (like me)
Try to use
android.support.v4.widget.NestedScrollView
instead
ScrollView

Scrolling with Collapsing Toolbar and Tabs

I'm trying to make a layout with a CollapsingToolbarLayout which has scroll|exitUntilCollapsed flag, and a TabLayout which has scroll|enterAlways scrollFlag property. Basically I want my toolbar to be pinned and show and hide the tabs while scrolling. I've modified the cheesesquare app from https://github.com/chrisbanes/cheesesquare. Here is my layout xml;
<?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:id="#+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="#dimen/detail_backdrop_height"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="48dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="#+id/backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
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="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</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.FloatingActionButton
android:layout_height="wrap_content"
android:layout_width="wrap_content"
app:layout_anchor="#id/appbar"
app:layout_anchorGravity="bottom|right|end"
android:src="#drawable/ic_discuss"
android:layout_margin="#dimen/fab_margin"
android:clickable="true"/>
</android.support.design.widget.CoordinatorLayout>
And here is the result;
The tabs are not positioned properly. And they don't care about the enterAlways property.

Hey this may solve your problem.
just add android:layout_gravity="bottom" to tablayout and android:gravity="top" to toolbar.

Remove attribute app:layout_behavior="#string/appbar_scrolling_view_behavior" & app:layout_scrollFlags="scroll|enterAlways" from android.support.design.widget.TabLayout and add attribute android:layout_gravity="bottom".
Also set android.support.v7.widget.Toolbar height as 104(Toolbar+TabLayout height) to show both Toolbar and TabLayout during collapsed state.
Here is an working example:
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<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="256dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<ImageView
android:id="#+id/image_header"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<android.support.v7.widget.Toolbar
android:id="#+id/anim_toolbar"
android:layout_width="match_parent"
android:layout_height="104dp"
android:minHeight="?attr/actionBarSize"
android:gravity="top"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:titleMarginTop="13dp" />
<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:tabMode="scrollable"
style="#style/MyCustomTabLayout"/>
</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_map"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom|end"
android:layout_margin="#dimen/fab_margin"
app:backgroundTint="#f44336"
android:src="#drawable/ic_maps_my_location" />
</android.support.design.widget.CoordinatorLayout>
Hope this will help~

I am a bit unclear on what is to be achieved here.
Do you not want the TAB to move up and down while scrolling? If so, you want to put the TabLayout outside the CollapsingToolbarLayout. Because anything that you put inside the CollapsingToolbarLayout, will move on scrolling.
From the comment you have put, I have modified your xml to imitate that of the YouTube screen. The toolbar is put outside the coordinator layout since it's pinned permanently and is not affected by the scrolling. Something that's worth mentioning is "One note: all views using the scroll flag must be declared before views that do not use the flag. This ensures that all views exit from the top, leaving the fixed elements behind." This is taken from the android blogpost http://android-developers.blogspot.in/2015/05/android-design-support-library.html. This is why I have moved the toolbar out of the AppBarLayout.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"/>
<android.support.design.widget.CoordinatorLayout
android:id="#+id/main_content"
android:layout_below="#id/toolbar"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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.TabLayout
android:id="#+id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</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>
</RelativeLayout>
I have put the TabLayout static, but you can make it scrollable. If this is not what you are looking for, kindly explain pictorially what is to be achieved here. I will be glad to help.

I built two samples with parallax and one with RecyclerView on top of AppbarLayout
One with only parallax is
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!--
OUTLINE
<CoordinatorLayout>
<AppbarLayout>
<CollapsingToolbarLayout>
<ImageView/>
<Toolbar/>
<TabLayout/>
</CollapsingToolbarLayout>
</ AppbarLayout >
<NestedScrollView/>
</CoordinatorLayout>
-->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="256dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:id="#+id/ivHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:layout_gravity="top"
android:layout_marginBottom="?attr/actionBarSize" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
app:tabIconTint="#F57C00"
app:tabIndicatorColor="#F57C00"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#F5F5F5"
app:tabTextColor="#FFE0B2" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager2"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And the one that RecyclerView above AppbarLayout is
<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/htab_maincontent"
android:layout_width="match_parent"
android:background="#EEEEEE"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!--
OUTLINE
<CoordinatorLayout>
<AppbarLayout>
<CollapsingToolbarLayout>
<ImageView/>
<Toolbar/>
<TabLayout/>
</CollapsingToolbarLayout>
</ AppbarLayout >
<NestedScrollView/>
</CoordinatorLayout>
-->
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorPrimary"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.MaterialComponents.Dark.ActionBar">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="330dp"
android:fitsSystemWindows="true"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:contentScrim="?attr/colorPrimary">
<ImageView
android:id="#+id/ivHeader"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/header"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:layout_collapseMode="pin"
android:layout_gravity="top"
android:layout_marginBottom="?attr/actionBarSize" />
<com.google.android.material.tabs.TabLayout
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:background="#android:color/transparent"
app:tabIconTint="#F57C00"
app:tabIndicatorColor="#F57C00"
android:translationY="-30dp"
app:tabIndicatorHeight="4dp"
app:tabMode="scrollable"
app:tabSelectedTextColor="#F5F5F5"
app:tabTextColor="#FFE0B2" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/constraintLayout"
app:behavior_overlapTop="30dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<androidx.viewpager2.widget.ViewPager2
android:id="#+id/viewPager2"
android:layout_width="match_parent"
android:background="#fff"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And setting TabLayout translationY on scroll with
// Check if scrolling up or down
var initTransitionY = tabLayout.translationY
tabLayout.post {
initTransitionY = tabLayout.translationY
}
appbar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
//Check if the view is collapsed
if (abs(verticalOffset) >= appbar.totalScrollRange) {
collapsingToolbar.title = "Collapsed"
} else {
collapsingToolbar.title = ""
}
tabLayout.translationY =
initTransitionY + initTransitionY * (verticalOffset / appBarLayout.totalScrollRange.toFloat())
})
For full samples and other samples you can check out this repo

add android:layout_gravity="bottom" to android.support.design.widget.TabLayout