How to make Toolbar and TabLayout still visible even when CollapsingToolbarLayout is collapsed?

Question

How to make Toolbar and TabLayout still visible even when CollapsingToolbarLayout is collapsed?

For example, i have a CollapsingToolbarLayout with app:contentScrim animation that contains a Toolbar , ImageView and TabLayout but i want to hide the ImageView when scrolling, but still show the Toolbar and TabLayout inside the CollapsingToolbarLayout even when i swipe up and collapse the view.

I want the Toolbar and TabLayout background to animate into a transparent color when expanding the CollapsingToolbarLayout , and should animate into a solid color as specified by app:contentScrim when collapsing the view.

I'm trying to achieve such in the image: Image Credits: CollapsingToolBarLayout with TabLayout and ViewPager

Answer 1

I think i found a solution:

<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/htab_maincontent"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<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: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/header"
            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/htab_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/htab_tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:tabIndicatorColor="@android:color/white"
            app:tabSelectedTextColor="@android:color/white"
            app:tabTextColor="@color/white_70"/>

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

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

<android.support.v4.view.ViewPager
    android:id="@+id/htab_viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout>

Credits: https://blog.iamsuleiman.com/parallax-scrolling-tabs-design-support-library/comment-page-3/#comment-52129