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

Answer 1

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>

Answer 2

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.

Answer 3

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>

Answer 4

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>

Answer 5

<?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+

Answer 6

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>