CODEWITHSUNDEEP
androidandroid-design-libraryandroid-collapsingtoolbarlayout
BigDX
BigDX

Reputation: 3547

Stop scroll on CollapsingToolbarLayout so it doesn't completely collapse

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

Loaded View

Desired Stopping Point

Desired Stopping point

Current Stopping Point

Current Stopping Point

Upvotes: 22

Views: 15707

Answers (3)

efemoney
efemoney

Reputation: 3793

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

enter image description here

Upvotes: 15

CI Apps
CI Apps

Reputation: 289

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);

Upvotes: 14

Ciron
Ciron

Reputation: 226

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>

Upvotes: 1

Related Questions