CollapsingToolbarLayout and TabLayout

Question

I'm trying to create an activity that has a CollapsingToolbarLayout with an image and toolbar (like in the CheeseDetailActivity in the cheesesquare example here), that also has a tab layout below.

Any ideas how to implement it?

When trying to add it to the CollapsingToolbarLayout or the AppBarLayout, the result is that the tab layout is in the top of the screen

TheoK · Accepted Answer · 2015-07-04T10:51:13.783

Try this structure:

<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="SPECIFIC HEIGHT HERE!"
        android:fitsSystemWindows="true"
        android:theme="ADD A STYLE HERE IF YOU WANT">

        <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:src="YOUR SOURCE"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="YOUR MULTIPLIER"
                />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="YOUR POPUP THEME">

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

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:tabGravity="YOUR TAB GRAVITY"
                app:tabIndicatorColor="YOUR TAB INDICATOR COLOR"
                app:tabMode="YOUR TAB MODE">

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

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

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

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

The important attribute is the layout_gravity of the TabLayout to be bottom.

For API 21 and lower I encountered the issue of the TabLayout disappearing. If you face the same problem, for the TabLayout (for APIs lower than 21) use this:

<android.support.design.widget.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:translationY="YOU HAVE TO EXPERIMENT WITH THIS ATTRIBUTE - (in dps)"
    app:tabGravity="YOUR TAB GRAVITY"
    app:tabIndicatorColor="YOUR TAB INDICATOR COLOR"
    app:tabMode="YOUR TAB MODE"
    >

You have to experiment with the translationY attribute depending on the size you gave your app bar. You will enter a value in dps and in a few minutes you will nail it.

Hope it works for you as it worked for me!

I added the ViewPager in the example because a) it is necessary for the TabLayout and b) it will take the layout_behavior="@string/appbar_scrolling_view_behavior" — TheoK, Jun 03 '15 at 17:05
Hey, did you get this to work with fixed tabs that have gravity fill? I only have two tabs and want them to fill the whole width, but they will always get displayed centered, the width determined by the longest label... Any thoughts on that? — Tim Strehlow, Jun 05 '15 at 07:15
I haven't had the time to experiment more. As soon as I look it up I will get back to you if I have any results — TheoK, Jun 05 '15 at 08:10
@PeiyongYang can you post a link to a mock up so as to understand what you want to achieve? — TheoK, Jun 13 '15 at 09:44
Can the behaviour of this layout be changed in a way so that when I am scrolling up the tab layout will stay under the toolbar ? https://drive.google.com/file/d/0B3twBzbq00qfdW82TWZaRWJER2c/view?usp=sharing here is the screen of what I want to achive. In this situation I don't want to be able to scroll tabs more up, just to keep them in that position. — Lubos Mudrak, Jul 24 '15 at 14:57
@LubosMudrak Did you find a why to solve this? I don't like that much the idea of `translationY` — Tanasis, Nov 24 '18 at 17:04

score 3 · Answer 2 · answered Sep 30 '15 at 00:42

3

Also see this sample which addresses the same issue.

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

answered Sep 30 '15 at 00:42

Vito Valov

1,765
1
19
37

Thanks, spent a lot of time to find working solution, that's exactly what I need. – Georgy Gobozov Nov 15 '15 at 23:01

score 0 · Answer 3 · answered Oct 07 '15 at 07:15

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">

<android.support.design.widget.CoordinatorLayout
    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/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="230dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/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" />

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

            <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom" />

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

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

    <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.CoordinatorLayout>

<android.support.design.widget.NavigationView

    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/header" />

Try This...

CollapsingToolbarLayout and TabLayout

3 Answers3

Linked