How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?

android material-design android-toolbar android-design-library

55,276

Solution 1

Here's the way I managed to do this, I don't think that's the best solution though if anyone finds a better way please feel free to post the 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/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <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.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="206dip"
            android:background="@color/primary_dark"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="20dp"
            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.CollapsingToolbarLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            app:tabGravity="center"
            app:tabMode="scrollable"
            android:gravity="bottom"/>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Solution 2

After 2 whole days of trying to find a pure Android solution here is my solution.

Target: Tabs under the Toolbar with image background behind both views

(TL;DR: See XML attached)

The behavior I want to achieve is to have the CollapsingToolbarLayout and the TabLayout on top of an image and when the "header" is scrolled up (out of the screen) then to show the ActionBar (toolbar) with the TabLayout under it.

The Problem:

Since the CollapsingToolbarLayout will hide all children views when collapsed except the Toolbar view then the TabLayout has to be placed outside the CollapsingToolbarLayout but inside the AppBarLayout so that it is "docked" at the top of the screen and under the Toolbar. The issue now is that the ImageView placed inside the CollapsingToolbarLayout will not be under the TabLayout but above it vertically.

The Solution:

To solve this issue we need to make the ImageView taller so that if we were to place the TabLayout inside the CollapsingToolbarLayout it will cover it. But because we placed the TabLayout outside the CollapsingToolbarLayout we need to make sure that the ImageView is drawn even if its parent view (CollapsingToolbarLayout) is shorter. clipChildren="false" TO THE RESCUE! clipChildren tells a ViewGroup to DO NOT clip its children view if they are bigger than it's size, so essentially now we can make the ImageView taller and it will still be drawn under the TabLayout. This way we can have both the CollapsingToolbarLayout and the TabLayout above a nice image!

My Layout xml:

<?xml version="1.0" encoding="utf-8"?>

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:clipChildren="false" /////IMPORTANT!!!!!!
    android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:clipChildren="false"  /////IMPORTANT!!!!!!
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@drawable/poster"
            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:id="@+id/main_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>


<include layout="@layout/content_main" />

Solution 3

It turns out that since the AppBarLayout extends LinearLayout, you can have two CollapsingToolBarLayouts (extends FrameLayout) in it. What I did was have the first CollapsingToolBarLayout house the contents I wanted to disappear, and gave it the AppBarLayout flag:

app:layout_scrollFlags="scroll|exitUntilCollapsed"

For the second CollapsingToolbarLayout that actually had the tabs, I set it's scroll flags to:

app:layout_scrollFlags="scroll|enterAlways"

The final XML looks like this and it gives me what I want.

    <?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:orientation="vertical">

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

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="@dimen/quadruple_margin"
            app:layout_collapseParallaxMultiplier="0.7"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <RelativeLayout
                android:id="@+id/header_view"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:animateLayoutChanges="true"
                android:background="@color/black_40">

                <!-- YOUR CONTENT HERE -->

            </RelativeLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/action_bar"
                android:layout_width="match_parent"
                android:layout_height="@dimen/abc_action_bar_default_height_material"
                app:contentInsetLeft="@dimen/triple_margin"
                app:contentInsetStart="@dimen/triple_margin"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/Theme.AppCompat.NoActionBar"
                app:theme="@style/Theme.AppCompat.NoActionBar" />
        </android.support.design.widget.CollapsingToolbarLayout>

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="48dp"
                android:layout_gravity="bottom"
                android:layout_marginTop="@dimen/half_margin"
                app:layout_scrollFlags="enterAlways"
                app:tabBackground="@color/transparent"
                app:tabGravity="center"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/white"
                app:tabTextColor="@color/grey_400" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

Solution 4

I've created this sample project where I use TabLayout inside of CollapsingToolbarLayout

Tested on API 14-23. Works without any problems.

Solution 5

I found a simple solution to make it works with transparent TabLayout background:

use expandedTitleMarginBottom in CollapsingToolbarLayout to avoid expanded title overlapping TabLayout
set layout_height to TabLayout as constant value
add layout_marginBottom to Toolbar with same value as TabLayout layout_height

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:expandedTitleMarginBottom="70dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <YourMagicViewWithBackgroundImageTextAndOtherStuff
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="50dp"
            app:layout_collapseMode="pin" />

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="bottom" />

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

View more solutions

55,276

Author by

Todor Grudev

Ruby on rails enthusiast

Updated on March 28, 2020

Comments

Todor Grudev about 4 years

I am looking at the chrisbanes/cheesesquare and I am trying to put TabLayout with a Toolbar inside a CollapsingToolbarLayout, and here is my code

<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.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.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"
            android:background="@color/primary_dark"
            android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            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="110dip"
                android:layout_gravity="top"
                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"
                android:layout_gravity="bottom"/>

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

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

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

This puts on something like this when the CollapsingToolbar is opened which is exactly what I am looking for:

enter image description here

But when I collapse it (by pulling the image up) I get something like this

enter image description here

And this is due to the reason I've set the Toolbar to have a height of 110dip if I leave the default settings the Tabs and the toolbar title overlap. So I am looking for the right way to do that so that the title of the Toolbar gets it's right place on the appbar and the tablayout is under it. Is there a way this can be achieved ?