Collapsing Toolbar image disappearing when scolling up

问题

I am trying to implement a collapsing toolbar with a large header image. I want the image to start very big (and it works) and not collapse entirely (that works too). The problem is that when the toolbar reaches minimum collapsable height the image disappears, fading to the app's primary color. I want the image to stay visible even when collapsed.

Also, the back button is scolling up along with the picture, and I want it to keep fixed in place.

The activity's xml:

    <android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                             xmlns:app="http://schemas.android.com/apk/res-auto"
                                            android:layout_width="match_parent"
                                            android:layout_height="match_parent"
                                            android:fitsSystemWindows="true">         <android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_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="match_parent"
    android:fitsSystemWindows="true"
    app:contentScrim="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

    <ImageView
        android:id="@+id/imageViewToolbar"
        android:minHeight="500dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:scaleType="centerCrop"
        app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed"
        app:layout_collapseMode="parallax" />

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:title=""
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:layout_scrollFlags="scroll|enterAlways"
         />
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/detail_content"/>

Thanks.

回答1:

I fixed it:

I made the image not fade to a solid color by addding app:statusBarScrim="@android:color/transparent" to the CollapsingToolbarLayout and I fixed the back button sliding up by adding app:layout_collapseMode="pin" to the Toolbar's layout.

回答2:

Use this code:

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true">

        <ImageView
            android:id="@+id/bgheader"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            android:background="@drawable/sunflowerpic"
            app:layout_collapseMode="pin" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/MyToolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="parallax" />

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

After scrolling up, here how the output looks. Image gets pinned at the top as background of appbar.

Here is a Good Example

回答3:

You can add an offset change listener to explicitly set your action bar when you reach a greater than percentage. (Sometimes I dont know why, the offset changes on scroll behavior, even though it has a fixed height)

In Kotlin:

app_bar_layout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset ->
        val percentage: Float = Math.abs(verticalOffset) / appBarLayout.totalScrollRange.toFloat()
        Log.d("%", "$percentage")
        when {
            percentage < 0.1 ->  (activity as MainActivity).bottom_navigation.visibility = View.GONE
            percentage >= 1.0.toFloat() -> (activity as MainActivity).setSupportActionBar(where_toolbar) // This is hack to avoid toolbar disappearing
            else ->  (activity as MainActivity).bottom_navigation.visibility = View.VISIBLE

        }
    })

Here I am using it to inflate it in a Fragment.

来源：https://stackoverflow.com/questions/43823915/collapsing-toolbar-image-disappearing-when-scolling-up