How to keep the toolbar fixed at the top when AppBar collapses/expands?

Question

Overview

I am trying to implement one of the Scrolling Techniques, Flexible space with overlapping content, described in Material Design.

Flexible space with overlapping content

Content can overlap the app bar.

Behavior:

The app bar’s starting position should be located behind the content. Upon upward scroll, the app bar should scroll faster than the content, until the content no longer overlaps it. Once anchored in place, the app bar lifts up to allow content to scroll underneath.

https://www.google.co.in/design/spec/patterns/scrolling-techniques.html#scrolling-techniques-scrolling

---

Problem

However, the problem is, the title in my AppBar scrolls down when expanded and hides below the overlapping content.

Here, my toolbar is hidden below the overlapping CardView.

When the appbar is collapsed, the toolbar and hence the Title slides up from below.

Code

Here's my Code:

activity-main.xml

<android.support.design.widget.CoordinatorLayout 
    ...
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            ...
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="top"
                android:background="?attr/colorPrimary"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
        </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"
        ...

I have also added these in my MainActivity's onCreate function

    setSupportActionBar(toolbar);

    collapsingToolbarLayout.setTitle("App Name");

---

I want the toolbar(with the tile and the other contents, which I will add later) to stay at the top irrespective of the appbar being expanded or collapsed.

I have read the documentations, gone through many posts and tutorials, watched a lot of videos but failed to find a working solution or any related solutions at all.

If anyone has some idea on how to fix this, please suggest. Thanks for helping.

Answer 1

I was looking for a solution myself when I found the answer in the comments on a similar issue report.

Basically you call setTitleEnabled() on your CollapsingToolbarLayout like this:

CollapsingToolbarLayout.setTitleEnabled(false); 

You can do this in xml as well, by adding this to your CollapsingToolbarLayout:

app:titleEnabled="false" 

By setting it to false, you'll get the desired behaviour. The title stays fixed to the top of the screen.

The Toolbar itself was actually already at the top, but this makes the title stay there as well, instead of translating between the bottom of the CollapsingToolbarLayout and the Toolbar.

Answer 2

I have acheived this by adding below code inside Toolbar tag.

app:layout_collapseMode="pin" 

Answer 3

In my case I needed to add app:titleEnabled="false" to the CollapsingToolbarLayout AND app:layout_collapseMode="pin" to the android.support.v7.widget.Toolbar

Now the toolbar stays pinned to the top of the screen, irrespective of whether the user scrolls up or down.