Stop scroll on CollapsingToolbarLayout so it doesn't completely collapse

Question

I have a CollapsingToolbarLayout setup and im placing a wallpaper there. I want to be able to stop it from collapsing all the way.

I have tried minheight and many other things but can't figure it out.

How can i get it to stop collapsing to the second screenshot?

View when activity is loaded

Desired Stopping Point

Current Stopping Point

Tanny

Just the beautiful layout deserves an upvote! – Protactinium

Answer 1

CollapsingToolbarLayout works really closely with Toolbar and as such the collapsed height depends on the toolbar.

I was able to solve your problem using this layout (Note it goes into the normal CoordinatorLayout/AppBarLayout Setup, With Fab and a NestedScrollView or RecyclerView):

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"
    app:statusBarScrim="?attr/colorPrimaryDark"
    app:contentScrim="@android:color/transparent"
    app:titleEnabled="false"
    >
    <!-- There isnt a contentSCrim attribute so the toolbar is transparent after being
         collapsed
         Disabled the title also as you wont be needing it -->

    <ImageView
        android:id="@+id/image_v"
        android:layout_width="match_parent"
        android:layout_height="360dp"
        android:layout_gravity="center"
        android:scaleType="centerCrop"
        android:src="@drawable/md2"
        android:fitsSystemWindows="true"
        app:layout_collapseMode="parallax"
        tools:ignore="ContentDescription"
        />
        <!-- Normal Imageview. Nothing interesting -->

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="168dp"
        app:layout_collapseMode="pin"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        />
        <!-- The toolbar is styled normally. However we disable the title also in code.
        Toolbar height is the main component that determines the collapsed height -->

    <TextView
        android:text="@string/app_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="?attr/colorPrimaryDark"
        android:paddingLeft="72dp"
        android:paddingRight="0dp"
        android:paddingBottom="24dp"
        android:paddingTop="24dp"
        android:textColor="@android:color/white"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        />
        <!-- The title textView -->

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

The related activity looks like this:

    ...
    setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    // Disable toolbar title
    getSupportActionBar().setDisplayShowTitleEnabled(false);
    ...

Here's a video of the interaction

Boric

Answer 2

I have faced with the same problem.

First I just set the height of Toolbar as described in previous answers and it works.

But this led to another problem. Toolbar view eat touch events, so my collapsing view (which is MapView) does not take any touch events in its part overlapped by the Toolbar.

Finally my solution is to remove Toolbar from CollapsingToolbarLayout. In my case it is OK because I have used it only to restrict collapsing. And to set the minimum collapsing height in onCreateView like this:

CollapsingToolbarLayout layoutCollapsing = (CollapsingToolbarLayout) rootView.findViewById(R.id.layoutCollapsing);
layoutCollapsing.setMinimumHeight(120);

Miscarry

Nice idea! You can set the minimum height in layout file instead of the code. – Cask

If you have a Toolbar inside your CollapsingToolbarLayout, you can also add a margin to it. :) – Denesedengue

Answer 3

Just add the desired stop-height to your toolbar and set app:contentScrim="#00000000" for your CollapsingToolbarLayout.

  <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="#00000000"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">
        <ImageView
            android:id="@+id/ImageView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/image"
            app:layout_collapseMode="parallax"/>

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="100dp"
        /> <!-- set desired stop-height as height -->

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

Mariner

The problem I've faced with this is that as soon as the Toolbar height is modified, the alignment of the title text provided by the Toolbar gets completely messed up. I had to add a custom view containing a text view with all sorts of hard-coded margins to get it right. – Hyperbaric