Develop Reference

CollapsingToolbar with second toolbar instead of ImageView

I am trying to create an app with two toolbars on top and a specific collapsing/expanding behaviour on scrolling. See the mockup to get a deeper understanding of what I'm trying to achieve:
I already found this StackOverflow question that is trying to achieve for about the same, and the response is hinting towards using a CollapsingToolbarLayout and just using another <Toolbar /> instead of the usual <ImageView />, but I tried around and could not get any close to the desired result.
My current xml layout:
<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/mainContainer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="01/01/1999"
app:layout_collapseMode="parallax" />
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:title="Title"
app:layout_collapseMode="pin" />
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#string/placeholder"/>
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
And the corresponding activity code:
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
}
I am using a NoActionBar theme. If I run this configuration, there is just one Toolbar displayed, nothing can be seen from the second Toolbar or the CollapsingToolbarLayout.
Huge thanks to anyone who is trying to help.

You could wrap the CoordinatorLayout into a another ViewGroup and add the main Toolbar into this new root layout instead. This will avoid the confusion of the app:layout_collapseMode="pin" to the main toolbar.
So now the entire layout hierarchy would be:
<ConstraintLayout>
<AppBarLayout>
<Toolbar> <<<<<<<<<<<<<<<<<<< main toolbar
<CoordinatorLayout>
<AppBarLayout>
<CollapsingToolbarLayout>
<Toolbar> <<<<<<<<<<<<<<<<<<< second toolbar
<NestedScrollView>
<TextView>
Then to fix the collapsing behavior like you want you need to change the scrolling flags of the CollapsingToolbarLayout to "scroll|enterAlways" instead of "scroll|exitUntilCollapsed". This will make the toolBar always enter off the top screen.
And build the layout of the second Toolbar with a normal ViewGroup inside of it; here I'm using ConstraintLayout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">
<com.google.android.material.appbar.AppBarLayout xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/appbar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
tools:visibility="visible">
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:background="#color/white"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light"
app:title="Title"
app:titleTextColor="#color/black" />
</com.google.android.material.appbar.AppBarLayout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="#+id/appbar_layout">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:fitsSystemWindows="true"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/collapsingToolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_scrollFlags="scroll|enterAlways">
<androidx.appcompat.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:contentInsetStart="0dp">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F2ECF6"
android:paddingHorizontal="32dp"
app:layout_collapseMode="parallax">
<ImageButton
android:id="#+id/left_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/actionBarItemBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_baseline_arrow_back_ios_24"
app:tint="#color/black" />
<ImageButton
android:id="#+id/right_arrow"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="?android:attr/actionBarItemBackground"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#drawable/ic_baseline_arrow_forward_ios_24"
app:tint="#color/black" />
<TextView
android:layout_width="0dp"
android:layout_height="0dp"
android:gravity="center"
android:text="01/01/1999"
android:textColor="#color/black"
android:textSize="22sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/right_arrow"
app:layout_constraintStart_toEndOf="#+id/left_arrow"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/placeholder"
android:textSize="20sp" />
</androidx.core.widget.NestedScrollView>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

How to make CollapsingToolbarLayout disappear completely after scrolling?

I'm trying to make a fragment "head" with two toolbars and horizontal scroll view between them. I want to make horizontal scroll view completely disappear after scrolling down but after scrolling there some black space and i don't know why. What attributes should i type to make it?
Here is my layout:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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_height="match_parent"
android:layout_width="match_parent">
<androidx.appcompat.widget.Toolbar
android:id="#+id/tool"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
app:layout_constraintTop_toTopOf="parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:foregroundGravity="center"
android:src="#drawable/ic_arrow" />
</androidx.appcompat.widget.Toolbar>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:clipToPadding="false"
android:fitsSystemWindows="true"
app:layout_constraintTop_toBottomOf="#id/tool"
tools:context=".ui.menu.MenuFragment">
<com.google.android.material.appbar.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="220dp"
android:fitsSystemWindows="true"
android:theme="#style/Theme.PizzaTime.AppBarOverlay">
<com.google.android.material.appbar.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:layout_collapseMode="parallax"
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
</LinearLayout>
</HorizontalScrollView>
<androidx.appcompat.widget.Toolbar
android:id="#+id/support_action"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
app:layout_collapseMode="pin"
app:popupTheme="#style/Theme.PizzaTime.PopupOverlay">
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
<ImageView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:foregroundGravity="center"
android:src="#drawable/ic_arrow" />
</androidx.appcompat.widget.Toolbar>
</com.google.android.material.appbar.CollapsingToolbarLayout>
</com.google.android.material.appbar.AppBarLayout>
<include layout="#layout/scroll_content" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

After I deleted the following line from CoordinatorLayout:
android:fitsSystemWindows="true"
It started working correctly, hope it will be helpful for someone.

RecyclerView: fill screen heigth when AppBarLayout scrolls up (hides)

I have AppBarLayout with toolbar and 2 buttons. It hides when I scroll RecyclerView up and shows when I scroll down.
The problem is that RecyclerView is set to be below AppBarLayout and preserves its position when AppBarLayout hides and I have condition shown on the picture. I need my RecyclerView to scroll up to the statusbar as well, and return to original position on scroll down. So far I could not even find an example of that.
Thank you.
This is mt layout:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="ru.skyeng.listening.AudioFiles.AudioListActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/appBarLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:elevation="0dp">
<android.support.v7.widget.Toolbar
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
>
<ImageButton
android:id="#+id/action_settings"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/gear"
android:layout_marginEnd="16dp"
android:layout_marginRight="16dp"
android:layout_gravity="end"/>
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:id="#+id/button_category"
android:layout_width="158dp"
android:layout_height="36dp"
android:layout_margin="16dp"
android:background="#drawable/selector_button_category"
android:text="#string/categories"
android:textColor="#color/colorBlue2"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"/>
<Button
android:id="#+id/button_length"
android:layout_width="158dp"
android:layout_height="36dp"
android:layout_margin="16dp"
android:background="#drawable/selector_button_length"
android:layout_alignParentEnd="true"
android:layout_alignParentRight="true"
android:text="#string/length"
android:textColor="#color/colorBlue2"/>
<View
android:id="#+id/shadow"
android:layout_below="#+id/button_length"
android:layout_width="match_parent"
android:layout_height="20dp"
android:background="#drawable/shadow">
</View>
</RelativeLayout>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:layout_below="#+id/appBarLayout"
android:id="#+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="24dp">
</FrameLayout>
</RelativeLayout>

If you want an image to show on bellow the toolbar. You should try CollpsingLayoutToolbar.
Here is an example. I hope this helps
<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"
app:elevation="0dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/collapsing_toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:collapsedTitleGravity="left"
app:expandedTitleGravity="bottom|right"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleTextAppearance="#style/CollapsedAppBarStyle"
app:layout_scrollFlags="scroll"
app:title="#string/pod">
<ImageView
android:id="#+id/collapsing_ImageView"
android:layout_width="match_parent"
android:layout_height="256dp"
android:contentDescription="#string/app_name"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:src="#drawable/bg_image"
app:layout_collapseMode="parallax" />
<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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

Scroll problems - CoordinatorLayout + AppBarLayout + ViewPager with Fragments containing RecyclerViews

I have the following layout:
<CoordinatorLayout layout_height="match_parent">
<AppBarLayout layout_height="match_parent">
<CollapsingToolbarLayout layout_height="match_parent">
<ImageView> //Fullscreen picture
<LinearLayout> //Some text and icons
<Toolbar layout_height="?attr/actionBarSize"> //No title
<TabLayout layout_height="?attr/actionBarSize"> //Drawn on top of the invisible Toolbar
</CollapsingToolbarLayout>
</AppBarLayout>
<ViewPager layout_height="wrap_content"/>
<FloatingActionButton/>
</CoordinatorLayout>
Now, the ViewPager has 3 fragments, each with a RecyclerView inside it. I believe this should be a regular design pattern. The ViewPager sits below the AppBarLayout, which starts full screen, so you have to scroll down to see the ViewPager content.
The problem is when I fling on the AppBarLayout, the fling event prevents any further scroll until it stops flinging (until velocityY = 0). But this takes up to 2 or 3 seconds sometimes, so in the meanwhile, the touchpad remains unresponsive.
What is worse, if I try to scroll on one of the children RecyclerViews, the screen will flicker so badly and the RecyclerView will suddenly appear at the scrolled position once the AppBarLayout fling has ended. This is horrible!
I've already tested this smooth AppBarLayout library and while it fixes some issues, it introduces some other bad ones (the ViewPager is drawn on top of everything, and not below the TabLayout).
UPDATE: FULL 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"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".ActivityActivity">
<android.support.design.widget.AppBarLayout
android:id="#+id/app_bar"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:theme="#style/AppTheme.AppBarOverlay">
<!-- ALSO TRIED app:layout_behavior="com.package.utils.FlingBehavior" -->
<android.support.design.widget.CollapsingToolbarLayout
android:id="#+id/toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:elevation="4dp"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleGravity="center|top"
app:expandedTitleMarginTop="#dimen/activity_horizontal_margin_extra"
app:expandedTitleMarginBottom="70dp"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<ImageView
android:id="#+id/background_picture"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:scaleType="centerCrop"
android:tintMode="screen"
app:layout_collapseMode="parallax" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="bottom"
android:orientation="vertical"
app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.8">
<TextView
android:id="#+id/title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Probando probando"
android:textColor="#color/white" />
<android.support.v4.widget.Space
android:layout_width="match_parent"
android:layout_height="120dp" />
<ImageView
android:id="#+id/icon"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_gravity="bottom|center"
android:fitsSystemWindows="true"
android:paddingBottom="#dimen/activity_horizontal_margin" />
<TextView
android:id="#+id/description"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|center"
android:layout_marginBottom="100dp"
android:fitsSystemWindows="true" />
</LinearLayout>
<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.TabLayout
android:id="#+id/activities_options_tabs"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:scrollbars="horizontal"
app:tabMode="fixed"
app:tabContentStart="48dp"
app:layout_scrollFlags="scroll|enterAlways"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="#+id/activities_options_container"
android:layout_width="match_parent"
android:focusable="false"
android:layout_marginTop="0dp"
android:visibility="visible"
android:elevation="4dp"
app:behavior_overlapTop="20dp"
app:layout_behavior="#string/appbar_scrolling_view_behavior"
android:layout_height="wrap_content" />
<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"
app:layout_anchor="#id/app_bar"
app:layout_anchorGravity="bottom|end"
app:srcCompat="#drawable/ico_share" />
</android.support.design.widget.CoordinatorLayout>
AND ONE OF THE FRAGMENTS, THEY ARE ALL THE SAME:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">
<ProgressBar
android:id="#+id/progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="#dimen/activity_vertical_margin_large"
android:visibility="invisible"/>
<android.support.v7.widget.RecyclerView
android:id="#+id/recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="vertical" />
</RelativeLayout>
Help!
Thanks

i used this for the same purpose
<?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:gravity="right"
android:orientation="vertical"
tools:context="com.cafeagahi.app.AccountActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/ThemeOverlay.AppCompat.Dark.ActionBar">
</android.support.design.widget.AppBarLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
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="wrap_content"
android:layout_gravity="right"
app:tabGravity="fill"
app:tabMode="fixed"
app:tabTextColor="#color/white" />
<android.support.v4.view.ViewPager
android:id="#+id/vp_pages"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>

Adding RelativeLayout in to the Collapsing toolbar layout

I want to use RelativeLayout in my collapsingToolbar . but RelativeLayout doesn't show correctly . I want add RelativeLayout under the Toolbar like this picture :
This is my xml of DetailActivity :
<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.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"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.v7.widget.Toolbar
android:id="#+id/detail_toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="#android:color/transparent"
app:layout_collapseMode="pin"
app:popupTheme="#style/ThemeOverlay.AppCompat.Light" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="#+id/img_detail"
android:layout_width="96dp"
android:layout_height="124dp"
android:src="#drawable/ic_hamburger"
android:layout_alignParentRight="true"
android:layout_margin="8dp" />
<TextView
android:id="#+id/txt_name_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="نام :"
android:layout_toLeftOf="#+id/img_detail"
android:layout_alignTop="#+id/img_detail"/>
<TextView
android:id="#+id/txt_count_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="تعداد"
android:layout_toLeftOf="#+id/img_detail"
android:layout_below="#+id/txt_name_detail"
android:layout_marginTop="8dp"/>
<TextView
android:id="#+id/txt_last_update_detail"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:text="آخرین آپدیت"
android:layout_toLeftOf="#+id/img_detail"
android:layout_below="#+id/txt_count_detail"
android:layout_marginTop="8dp"/>
</RelativeLayout>
<android.support.design.widget.TabLayout
android:id="#+id/tab_layout_detail_activity"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:layout_gravity="bottom"
android:background="#color/colorPrimary"
app:tabMode="scrollable" />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.widget.NestedScrollView
android:id="#+id/nest_scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
app:layout_behavior="#string/appbar_scrolling_view_behavior">
<android.support.v4.view.ViewPager
android:id="#+id/view_pager_detail_activity"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>
And This code doing like this :
And I want add RelativeLayout under the toolbar.

Try placing the toolbar as the second view in your CollapsingToolbarLayout.Also add android:marginTop="your toolbar height" to your RelativeLayout.

refer to this link. create your tab with viewpager then pin that to collapsing app bar click here

try placing the
<android.support.v7.widget.Toolbar/>
tag outside the AppBarLayout