Develop Reference

White space on top of ViewPager in CoordinatorLayout

In the main layout, I have a coordinatorLayout and its children are appbarLayout and viewPager.
In each page of the viewPager, I have a fragment, that either it has a nestedScrollview or a recyclerview.
My problem is that there is a white space on top of all the fragments in each page of the viewPager.
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="fill_vertical"
android:id="#+id/konta">
<android.support.design.widget.AppBarLayout
android:id="#+id/smooth_app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/blue_200"
android:minHeight="#dimen/mdSecondaryActionBarSize">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/app_bar_height"
app:titleEnabled="false"
app:layout_collapseMode="parallax"
android:background="#android:color/transparent"
app:layout_scrollFlags="scroll|snap">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="#dimen/toolbar_height"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:layout_scrollFlags="scroll|enterAlways"
app:navigationIcon="#drawable/ic_arrow_right" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layoutDirection="ltr"
tools:targetApi="jelly_bean_mr1"
android:id="#+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="#dimen/tab_size"
android:background="#android:color/transparent"
app:tabIndicatorColor="#android:color/white" />
</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"
android:layout_gravity="fill_vertical"
android:fitsSystemWindows="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

You should try this in your XML file:
android:layout_marginStart="0dp"

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>

How to create this type of layout using coordinatorLayout , AppbarLayout ,CollaspingToolbarLayout

Anyone please guide me how to make this type of layout i have tiny knowledge about this.
it has
1> FloatingActionButton
2> 1 ImageView usging in CollapsingToolbarLayout to parallex
3>1 TabLayout with ViewPager
I am not able to create middle layer of layout in which 2nd ImageView and its relevant text and FloatingButton anchored.
here is the 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="match_parent"
android:fitsSystemWindows="true"
tools:context="com.express.entertain.profileapp.ScrollingActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
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="wrap_content"
android:fitsSystemWindows="true"
app:statusBarScrim="#color/colorPrimary"
app:contentScrim="#color/colorAccent"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/poster"
android:id="#+id/poster"
android:scaleType="centerCrop"
app:layout_collapseMode="parallax"
/>
<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/AppTheme.PopupOverlay" />
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.design.widget.TabLayout
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:id="#+id/tablayout"
android:layout_gravity="bottom"
app:tabMode="scrollable"
app:tabGravity="fill"/>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/viewpager"
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_margin="#dimen/fab_margin"
android:clickable="true"
app:fabSize="mini"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|right"
android:src="#android:drawable/ic_dialog_email"
/>
</android.support.design.widget.CoordinatorLayout>

Hiding tablayout inside coordinator layout, which is outside activity

I have some problem with coordinator layout. I have activity toolbar inside appBarLayout with parent CoordinatorLayout (I want to make toolbar hideable) and fragment with tablayout inside appBarLayout and viewPager. Here is activity's 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:layout_scrollFlags="scroll|enterAlways|snap"
app:popupTheme="#style/AppTheme.PopupOverlay"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/content"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.design.widget.CoordinatorLayout>
And it's fragment's 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:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/gradient"
android:fitsSystemWindows="true">
<android.support.design.widget.AppBarLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/toolbar_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/AppTheme.AppBarOverlay">
<android.support.design.widget.TabLayout
android:id="#+id/tabs"
style="#style/MyCustomTabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabGravity="fill"/>
</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>
For now, I have this situation where the toolbar is somewhere.
If I change coordinator layout inside activity to linear layout I get toolbar visible, but as you can imagine with no hiding option.
Actually, I have play with coordinator layout a lot:hiding and showing toolbar in a few cases such parallax and others - https://github.com/Iamtodor/toolbars, so you can be sure, I have a little understand how it works :)
Also, I had wantch this sources:
- https://github.com/codepath/android_guides/wiki/Handling-Scrolls-with-CoordinatorLayout
- https://github.com/codepath/android_guides/wiki/Using-the-App-ToolBar#using-toolbar-as-actionbar
- https://github.com/chrisbanes/cheesesquare
But there is all examples when tablayout exists inside same appbarlayout with toolbar.
How can I fix it?

Here is what worked for me:
Fragment XML:
<android.support.design.widget.AppBarLayout
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/app_bar_layout"
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="wrap_content"
app:layout_scrollFlags="scroll|enterAlways|snap" >
<include layout="#layout/include_time_line"
android:layout_height="wrap_content"
android:layout_width="match_parent" />
</android.support.v7.widget.Toolbar>
<android.support.design.widget.TabLayout
style="#style/TabLayout"
android:id="#+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="54dp"
android:layout_gravity="bottom"
android:background="#color/egg"
android:elevation="0dp"
app:tabGravity="fill"
app:tabMode="scrollable"
app:tabIndicatorColor="#fcd131"
app:tabPadding="0dp"
app:tabIndicatorHeight="4dp"/>
</android.support.design.widget.AppBarLayout>
<com.woot.woot.productbrowse.ui.ConfigurablePagingViewPager
android:id="#+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
/>
<FrameLayout
android:id="#+id/selectByWeightKeyboard"
android:layout_width="match_parent"
android:layout_height="#dimen/weight_keyboard_container_height"
android:background="#color/keyboard"
android:clipToPadding="false"
android:elevation="16dp"
android:clickable="true"
app:layout_behavior="android.support.design.widget.BottomSheetBehavior">
<include layout="#layout/add_product_by_weight_keyboard" />
</FrameLayout>
Activity XML:
<FrameLayout
android:id="#+id/contentFrame"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
<FrameLayout
android:id="#+id/layout_done_button"
android:visibility="gone"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:elevation="8dp"
tools:visibility="visible"
android:background="#color/ice">
<Button
android:id="#+id/button_done"
style="?android:attr/borderlessButtonStyle"
android:layout_width="match_parent"
android:layout_height="#dimen/button_height"
android:layout_marginRight="#dimen/button_done_horizontal_margin"
android:layout_marginLeft="#dimen/button_done_horizontal_margin"
android:layout_marginTop="#dimen/activity_horizontal_margin"
android:layout_marginBottom="#dimen/activity_horizontal_margin"
android:background="#drawable/rounded_green_button"
android:text="#string/done"
android:textSize="#dimen/button_text_size"
android:textAllCaps="true"
android:textColor="#color/egg" />
</FrameLayout>
<android.support.design.widget.NavigationView
android:id="#+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:contentDescription="#string/drawer_content_description"
app:menu="#menu/menu_navigation_product_browse" />

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