Whatsapp like Collapsing Toolbar

In my app, I would like to implement Whatsapp home page like collapsible toolbar. That is, while scrolling down the list, the toolbar should go up and the tabs should pin at the top. How can I achieve this?

Here is my appbar layout

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/appbarLayout"
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/collapsibleToolBarLayout"
        android:fitsSystemWindows="true"
        app:titleEnabled="false"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">                 

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/white"
            app:tabTextColor="@color/product_page_btn_grey"
            app:tabSelectedTextColor="@color/upcomer_background_red"
            app:tabIndicatorColor="@color/upcomer_background_red"
            android:layout_gravity="bottom"
            app:layout_scrollFlags="scroll|enterAlways"
            app:tabContentStart="72dp" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.9"
            android:background="@color/upcomer_background_red"
            app:popupTheme="@style/AppTheme.PopupOverlay" >

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/title_image_view"
                android:contentDescription="@null"
                android:layout_gravity="start|center_vertical"
                android:visibility="gone"
                android:src="@drawable/title"/>
    
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:id="@+id/title_layout"
                android:visibility="gone">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:id="@+id/toolbarText"
                    style="@android:style/TextAppearance.DeviceDefault.Widget.ActionBar.Title"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:id="@+id/send_button"
                    android:layout_marginRight="10dp"
                    android:layout_marginEnd="10dp"
                    android:text="@string/send_text"
                    android:textColor="@color/white"
                    android:textSize="18sp"
                    android:textStyle="bold"
                    android:visibility="gone"
                    android:layout_centerVertical="true"
                    android:layout_alignParentRight="true"
                    android:layout_alignParentEnd="true"/>

            </RelativeLayout>
    
        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

Now the TabLayout is not visible and the Toolbar stays there even though the list in the ViewPager below is scrolled. Kindly help.