CollapseToolbarLayout with TabbarLayout

Question

How to make something like it

My solution is so close to ideal, but have some problems. Tabs dissaper with image. How to fix it? Tabs in "expanded mobe" must be with image on background! Thanks for your answer!

<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/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="true"
>

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    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:contentScrim="?attr/colorPrimary"
        android:background="@android:color/transparent"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <ImageView
            android:id="@+id/header_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />


        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@android:color/transparent"
            app:layout_collapseMode="pin"
            android:id="@+id/toolbar"
            android:gravity="bottom"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_collapseMode="parallax"
            android:layout_gravity="bottom"
            android:layout_marginBottom="56dp"
            android:background="@android:color/transparent"
            app:tabTextColor="@color/white"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabIndicatorColor="@color/white"
            app:tabIndicatorHeight="6dp"/>

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

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

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:foreground="?android:windowContentOverlay"
    app:behavior_overlapTop="56dp"
    />

<TextView
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:text="nothing to show"
    android:textColor="@color/colorPrimary"
    android:gravity="center"
    android:visibility="gone"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:id="@+id/empty"/>

Vipul Asri · Answer 1 · 2015-12-24T14:48:12.287

Modifications :

just remove app:layout_collapseMode="parallax" from TabLayout

Change android:gravity="bottom" to android:gravity="top" in Toolbar.

<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/coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="true">

<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:background="@android:color/transparent"
    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="250dp"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        android:background="@android:color/transparent"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/header_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@android:color/transparent"
            app:layout_collapseMode="pin"
            android:id="@+id/toolbar"
            android:gravity="top"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_marginBottom="56dp"
            android:background="@android:color/transparent"
            app:tabTextColor="@color/white"
            app:tabSelectedTextColor="@color/colorAccent"
            app:tabIndicatorColor="@color/white"
            app:tabIndicatorHeight="6dp"/>

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

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

<android.support.v7.widget.RecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:foreground="?android:windowContentOverlay"
    app:behavior_overlapTop="56dp"/>

<TextView
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:text="nothing to show"
    android:textColor="@color/colorPrimary"
    android:gravity="center"
    android:visibility="gone"
    android:id="@+id/empty"/>
</android.support.design.widget.CoordinatorLayout>

Edit1: You have to provide add a specific height to CollapsingToolbarLayout.

Added android:fitsSystemWindows="true" to AppBarLayout and CollapsingToolbarLayout.

Removed app:layout_behavior="@string/appbar_scrolling_view_behavior" from TextView.

You can also checkout this Sample for more information.

thanks! It's not bad. But not allow implement "overlap" in RecyclerVIew — Illya Bublyk, Dec 24 '15 at 18:11

CollapseToolbarLayout with TabbarLayout

1 Answers1