CODEWITHSUNDEEP
androidandroid-layoutmaterial-designandroid-toolbar
user11230
user11230

Reputation: 549

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.

Upvotes: 4

Views: 5336

Answers (3)

Ispam
Ispam

Reputation: 615

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.

Upvotes: 0

user11230
user11230

Reputation: 549

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.

Upvotes: 3

rafsanahmad007
rafsanahmad007

Reputation: 23881

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.

enter image description here

Here is a Good Example

Upvotes: 1

Related Questions