CollapsingToolbarLayout + TabLayout, strange toolbar title margin

Question

I have a srange toolbar title behaviour that I doubt to be valid.

collapsed :

extended :

The strangest part is that the

Answer 1

I think your TabLayout should be outside your CollapsingToolbarLayout while still inside your AppBarLayout:

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/colorAccent" />

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

A tab section is part of the app bar, but not part of the tool bar.

Answer 2

@kris larson answer is ok but unfortunatelly doesn't work if we want transparent parallaxed TabLayout background. To make it works you need to do as follows:

• add expandedTitleMarginBottom to CollapsingToolbarLayout
• set layout_height to TabLayout as constant value
• add layout_marginBottom to Toolbar with same value as TabLayout 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="56dp"
        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="48dp"
            app:layout_collapseMode="pin" />

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

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