Adam Varhegyi Adam Varhegyi - 2 months ago 11
Android Question

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

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.

enter image description here




But the collapsed state have the toolbar in wrong place:



enter image description here

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.

Answer

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

Comments