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.

score 80 · Accepted Answer · edited Oct 19 '15 at 00:48

80

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.

edited Oct 19 '15 at 00:48

spenibus

4,339
11
26
35

answered Oct 19 '15 at 00:27

G.deWit

1,252
11
14

Thanks, will try soon as I get my laptop fixed. – Abhishek Oct 22 '15 at 16:24
2

I tried this, and with `titleEnabled=false` the title stays at the top, but one strange thing with that is that now the title string is always the activity label. Calling `setTitle` on either the `CollapsingToolbarLayout` or the `Toolbar` itself has no effect. Don't know if that's expected. – JHH Apr 15 '16 at 08:15

score 5 · Answer 2 · answered Jul 10 '17 at 07:44

5

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

app:layout_collapseMode="pin"

answered Jul 10 '17 at 07:44

SriMaharshi Manchem

524
5
15

score 5 · Answer 3 · answered Dec 30 '17 at 17:51

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.

score 2 · Answer 4 · answered Nov 21 '18 at 19:46

2

To keep title at top, simple put this attribute to your CollapsingToolbarLayout:

app:expandedTitleGravity="top"

answered Nov 21 '18 at 19:46

Francis

6,788
5
47
64

This is the solution that worked for me.I think the many different solutions are because of the many ways you can implement. For me this worked because I have a androidx Toolbar inside my CollapsingToolbar layout, and I'm setting the text via the CollapsingToolbar (not directly to the Toolbar). These things need to be specified more when people post solutions. – Zenon Seth Mar 05 '20 at 15:22

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

Overview

Problem

Code

4 Answers4

Linked