How to use a TabLayout with Toolbar inside CollapsingToolbarLayout?

Question

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:

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

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 ?

Conventional

I am not sure since I have just started playing around with the design library myself, but shouldn't there be a app:layout_collapseMode="pin" on the TabLayout? – Imbed

@XaverKapeller yeah I've already tried that and it was the logical place to start but that's not it, maybe they haven't yet implemented the pin/parallax feature fully yet :/ – Conventional

What I would also try is to put the TabLayout just inside the AppBarLayout and not in the CollapsingToolbarLayout. – Imbed

Answer 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>

Conventional

This works, but the content doesn't seem to want to scroll back once it is hidden. – Lactation

This is the correct answer, and the bug JMRboosties mentioned has been fixed in 22.2.1. code.google.com/p/android/issues/detail?id=178656 – Elbe

how make TabLayout above CardViews when behavior_overlapTop="32dp" is specified for viewpager? – Thallus

How do you set the imageview? I am unable to set a single image as background both to the toolbar and the tab? Any hints? – Autry

I think, this is better and working solution: blog.grafixartist.com/… – Kleptomania

Obviously, it's not the best solution. OP, and I, want tab's to be over the picture. @Kleptomania your solution is also incomplete. In it, the title is not moving. – Zealand

Tomas your post saved my life! Thank you! @Marius Kaunietis to have a moving title, you just to set the title to your CollapsingToolbarLayout instead of your Toolbar. – Kneel

Answer 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" />

Girt

@PhoenixWang please feel free to provide a solution that works with scrimContent – Girt

Great answer but to solve the problem of the contentScrim what I did is used a semi-transparent color <color name="black_overlay_dark">#88000000</color> as the app:tabBackground="@color/black_overlay_dark" and app:contentScrim="@color/black_overlay_dark" Looks cool yeah!! – Forsterite

Answer 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>

Charley

That's also a nice idea :) – Conventional

This is working fine.but not getting app:tabBackground="@color/transparent" in second CollapsingToolbarLayout – Minuteman

@AthiraSanthosh @color/transparent is a color you have to define in your res/values/colors.xml like this: <color name="transparent">#00000000</color> – Charley

I have used this.but i am getting first CollapsingToolbarLayout background color in second CollapsingToolbarLayout – Minuteman

Looks rotten. Is this the best Android can do. Doubt it. – Orlene

Answer 4

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

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

Matte

Answer 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>

Plop

This is the most straight forward and simple solution. It works with scrimContent and should be the accepted answer. Thank you! – Bale

Working like a charm. – Partial

Answer 6

collapsing toolbar with tabs using new material design support library example with source code

I used official collapsing toolbar feature of new material design support library.

here collapsed view height is 256dp and tabs height is 56dp

i made following path,i cut image into two parts one for collapsed view and one for tabs.

i cutted images according to dp to pixel sizes with high resolution drawable xxxhdpi and put into drawable folder so it will adjustable to all screen sizes

i have 2000x1246 image

top image 256dp= 2000x1024 pixel

bottom tab image 56dp= 2000x224 pixel

Here is the complete example with source code

Mellette

Nice idea, though I suppose, no parallax. – Zealand

Answer 7

Use This Code 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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/PrimaryColor"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/background_material"
            android:fitsSystemWindows="true"
            android:scaleType="fitXY"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:gravity="top"
            android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:titleMarginTop="15dp"/>



        <android.support.design.widget.TabLayout
            android:id="@+id/tabsInLogin"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:tabIndicatorHeight="2dp"
            app:tabIndicatorColor="@android:color/white" />

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

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

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

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

Java code

  collapsingToolbarLayout =    (CollapsingToolbarLayout)findViewById(R.id.collapse_toolbar);
    collapsingToolbarLayout.setTitleEnabled(false);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle(cheeseName);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

Inebriant

setDisplayHomeAsUpEnabled is working on 23 sdk version or above – Inebriant

Answer 8

Here is my idea of doing this.

I place tab layout outside the AppBar and wrap it with vertical Linear Layout and set the position like this

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    android:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tabDetail"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

If you don't wrap TabLayout with another twice height Layout. When you set layout_anchor to AppBar, only half of TabLayout will be in AppBar.

Here is my whole XML file.

<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/viewpagerDetail"
    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"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginBottom="54dp">

        <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="100dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

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

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    android:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tabDetail"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

I'm not sure if these set of dp value will fit your screen size but it do with mine. If anyone has better answer please share.

Sorry if i make a mistake on my code or my english.Thank you!!

Decommission

Answer 9

I had a similar problem, and my solution was ridiculously simple. All I had to do was setting the toolbar as the support actionbar (I am using a Theme.NoActionBar style base)

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

Sara

Answer 10

The code below implements the action Expand / Collapse toolbar.

Basically we will have a
CoordinatorLayout (FrameLayout)
AppBarLayout (vertical LinearLayout Which implements many of the features of stuff designs),
CollapsingToolbarLayout (is a wrapper for Toolbar)
ImageView and Toolbar

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


        <ImageView
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/logo"
            android:minHeight="300dp"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <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"
            android:minHeight="?attr/actionBarSize"
            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>


    <FrameLayout
        android:id="@+id/fr_container_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

Observation
- FrameLayout is necessary app: layout_behavior = "@string/appbar_scrolling_view_behavior"
-TOOLBAR Not need backgroud, insert the color in the attribute app:contentScrim = "?Attr/ColorPrimary" from our CollapsingToolbarLayout

In your class

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
mCollapsingToolbarLayout.setTitle("YourTitle");
setSupportActionBar(toolbar);

Holler

Answer 11

I placed the TabLayout outside the AppBarLayout and wrapped the ViewPager and TabLayout together inside a LinearLayout.

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="210dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:background="@color/profile_header_bg_color"
    android:fitsSystemWindows="true">

    <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:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        android:background="@color/profile_header_bg_color">

        <ImageView
            android:layout_width="match_parent"
            android:paddingTop="60dp"
            android:layout_height="210dp"
            android:background="@color/profile_header_bg_color"
            android:id="@+id/user_details"
            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:theme="@style/ThemeOverlay.AppCompat.Light"
            android:background="@color/profile_header_bg_color"
            app:layout_collapseMode="pin"/>

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

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    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.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

Mortification

Answer 12

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        android:minHeight="?attr/actionBarSize" >

        <include layout="@layout/YOUR-CONTENT-LAYOUT" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            android:fitsSystemWindows="false"
            app:contentScrim="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:orientation="vertical" >

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:layout_scrollFlags="scroll"
        android:background="@color/primary_color" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>

Lorin

Answer 13

<?xml version="1.0" encoding="utf-8"?>
<ui.screen.ProfileView
    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">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/profile_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/profile_appbar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            app:elevation="2dp">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:contentScrim="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|exitUntilCollapsed"
                app:expandedTitleTextAppearance="@android:color/transparent"
                app:elevation="2dp">

                <LinearLayout
                    android:id="@+id/profile_user_layout"
                    android:layout_width="match_parent"
                    android:layout_height="192dp"
                    android:background="?attr/colorPrimary"
                    android:clipChildren="false"
                    android:clipToPadding="false"
                    android:orientation="vertical"
                    android:paddingBottom="24dp"
                    android:paddingLeft="24dp"
                    android:paddingRight="24dp"
                    android:paddingTop="64dp"
                    app:layout_collapseMode="parallax">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:clipChildren="false"
                        android:orientation="horizontal">

                        <FrameLayout
                            android:layout_width="96dp"
                            android:layout_height="96dp"
                            android:clipChildren="false">

                            <de.hdodenhof.circleimageview.CircleImageView
                                android:id="@+id/profile_user_photo"
                                android:layout_width="86dp"
                                android:layout_height="86dp"
                                android:src="@mipmap/ic_launcher"
                                app:border_width="1dp"
                                app:border_color="@color/white" />

                            <View
                                android:id="@+id/profile_user_medal"
                                android:layout_width="24dp"
                                android:layout_height="24dp"
                                android:background="@drawable/medal"
                                android:layout_marginRight="6dp"
                                android:layout_marginTop="2dp"
                                android:layout_gravity="top|right" />

                        </FrameLayout>

                        <LinearLayout
                            android:id="@+id/profile_user_details"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_weight="1"
                            android:orientation="vertical"
                            android:layout_marginLeft="16dp">

                            <TextView
                                android:id="@+id/profile_user_name"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:text="Kateřina Bíla"
                                android:textColor="@color/white"
                                android:textSize="24sp" />

                            <TextView
                                android:id="@+id/profile_user_completed_activities"
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:text="Dokoncene 4 z 5"
                                android:textColor="@color/white"
                                android:textSize="16sp" />

                            <LinearLayout
                                android:layout_width="match_parent"
                                android:layout_height="wrap_content"
                                android:orientation="horizontal">

                                <TextView
                                    android:id="@+id/profile_user_progress_text"
                                    android:layout_width="wrap_content"
                                    android:layout_height="wrap_content"
                                    android:textSize="20sp"
                                    android:textColor="@color/white"
                                    android:text="50%" />

                                <com.rey.material.widget.ProgressView
                                    android:id="@+id/profile_user_progress_bar"
                                    android:layout_width="match_parent"
                                    android:layout_height="6dp"
                                    android:visibility="visible"
                                    android:layout_gravity="center_vertical"
                                    android:layout_marginLeft="8dp"
                                    android:paddingRight="16dp"
                                    app:pv_progressMode="determinate"
                                    app:pv_circular="false"
                                    app:pv_autostart="true"
                                    app:lpd_strokeSize="3dp"
                                    app:lpd_strokeColor="@color/red"
                                    app:lpd_strokeSecondaryColor="@color/white"
                                    app:lpd_maxLineWidth="62dp"
                                    app:lpd_minLineWidth="31dp"
                                    app:pv_progressStyle="@style/ProfileTotalProgressBar"
                                    app:pv_progress="0.5" />


                            </LinearLayout>


                        </LinearLayout>
                    </LinearLayout>


                </LinearLayout>

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

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

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="48dp"
                app:elevation="2dp">

                <android.support.design.widget.TabLayout
                    android:id="@+id/profile_tab_layout"
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    android:layout_gravity="top"
                    android:background="?attr/colorPrimary"
                    app:tabTextColor="@color/white_87"
                    app:tabGravity="fill"
                    app:tabIndicatorColor="@color/white"
                    app:tabIndicatorHeight="4dp"
                    app:tabMode="fixed"
                    app:tabSelectedTextColor="@color/white"
                    app:tabTextAppearance="@style/TabTextAppearance"
                    app:elevation="2dp" />

            </FrameLayout>

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

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

</ui.screen.ProfileView>

This works for me but only on devices with api 19+

Twobyfour

Answer 14

As someone pointed out before, it looks like this is because (from the docs):

The navigation button is vertically aligned within the Toolbar's minimum height, if set.

Therefore, based on the initial layout you can do something like this:

<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.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_height="?actionBarSize"
                android:layout_gravity="bottom"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="110dip"
                android:layout_gravity="top"
                app:titleMarginTop="13dp"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

Where app:titleMarginTop is the spacing needed to get the Toolbar size minus TabLayout size minus the text size and it should align nicely.

Wrest

Answer 15

All above codes are collapsing only "CollapsingtoolbarLayout" components. That means if we scroll the page of "ViewPager" content, it is not working.

I replace the "ViewPager" by "FrameLayout" now it is working, what we expecting.

I am expecting like, if scroll the page of Viewpager then "CollapsingToolbarLayout" should be listen. for this I used the "NestedScrollView". But problem is "ViewPager" not working in "NestedScrollView".

So finally I achieved with FrameLayout.

But problem is "tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {" is depricated

<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.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="250dp"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:visibility="gone"
                android:src="@drawable/srl_mallikaarjuna_lrg"
                app:layout_collapseMode="parallax"

                />


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                >
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent">
                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:gravity="center_horizontal|center_vertical"
                        android:text="Calendar"/>
                </RelativeLayout>

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

            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
              >

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

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

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

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fefefe"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

  <FrameLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:id="@+id/frame_container">

  </FrameLayout>

</android.support.v4.widget.NestedScrollView>


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

Creating The Tablayout with out ViewPager : http://www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-android-without-viewpager

Toscanini

Answer 16

Toolbar> set margin bottom to 48dp and layout_height to ?attr/actionBarSize

<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="?attr/actionBarSize"
            android:layout_gravity="top"
            android:layout_marginBottom="38dp"
            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>

Dube

Answer 17

I was able to get this working by placing the TabLayout inside a second CollapsingToolbarLayout with the scroll flag set to enter Always Collapsed.

<android.support.design.widget.AppBarLayout
    android:id="@+id/event_guide_appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/event_guide_collapsingToolbarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginBottom="80dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:id="@+id/event_guide_banner_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/darkened_placeholder"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/event_guide_toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin" />
    </android.support.design.widget.CollapsingToolbarLayout>

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

        <android.support.design.widget.TabLayout
            android:id="@+id/event_guide_tabbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            android:theme="@style/BaseTheme"
            app:layout_scrollFlags="scroll|exitUntilCollapsed" />

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

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/event_guide_swipe_refresh"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/light_gray"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.meetball.activity.EventGuideActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/event_guide_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="none"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.v4.widget.SwipeRefreshLayout>

Attenuate

Answer 18

Try to put the Toolbar inside the CollapsingToolbar with app:layout_collapseMode="pin" and the TabLayout outside with app:layout_scrollFlags="enterAlways"

Solander