Toolbar's gravity (or positioning) not working properly in CollapsingToolbarLayout

Question

I have a layout with Toolbar and TablLayout with some nice collapsing effect seen below with the help of a CollapsingToolbarLayout:

The first picture is OK. This is the behavior I want.

But the collapsed state have the toolbar in wrong place:

As you can see the Toolbar is below its default place regardless I set it's gravity to top.

Here is the full layout:

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout"
    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="215dp"
        app:expandedTitleMarginBottom="56dp"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/big_header"
            android:fitsSystemWindows="true"
            android:scaleType="centerInside"
            app:layout_collapseMode="parallax" />


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


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


    </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:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

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

I would like to place the toolbar to its place, next to the "back" button in the non-collapsed state. Please help if you can.

amitairos · Accepted Answer · 2016-09-04T20:57:09.203

2

This is a known problem which I too have faced. You need to "hack it" a bit.
If you don't need your title to animate from big to small, just put collapsingToolbar.titleEnabled = false, and use your Toolbar title instead.
If you want your title to animate from big to small in the Collapsing Toolbar, you can hack it like this:
Add an appBarLayout OffsetChanged listener and put in it this code:

if (Math.Abs(e.verticalOffset) >= appBarLayout.totalScrollRange - 35) //Play with the number, and you should probably use dp instead of a hardcoded pixel number.
{
    collapsingToolbar.titleEnabled = false;
    SupportActionBar.title = "YourTitle";
}
else
{
    collapsingToolbar.titleEnabled = true;
    SupportActionBar.title = "";
}

It flips between the two titles...

edited Sep 04 '16 at 20:57

answered Sep 04 '16 at 18:50

amitairos

2,907
11
50
84

Can you tell me exactly which part is the solution? Your layout is so large. – Adam Varhegyi Sep 04 '16 at 20:41
@AdamVarhegyi Sorry, I made a mistake. The answer isn't in that post. I edited my answer above with my solution. Feel free to ask questions. – amitairos Sep 04 '16 at 20:57
There is no native solution? From xml or something like that? By the way it's working with this but the fast title changing a little strange. – Adam Varhegyi Sep 04 '16 at 21:12
@AdamVarhegyi Not that I know of. It's a bug. Play around with the numbers and maybe it will look less strange. If it works, please upvote and accept, to help others. Thanks! – amitairos Sep 04 '16 at 21:15

score 0 · Answer 2 · answered Oct 01 '16 at 14:06

I found a simpler solution without any hacking and in pure xml:

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="215dp"
        app:expandedTitleMarginBottom="78dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/big_header"
            app:layout_collapseMode="parallax" />

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

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

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

Toolbar's gravity (or positioning) not working properly in CollapsingToolbarLayout

But the collapsed state have the toolbar in wrong place:

2 Answers2