How to animate an image above a listview when scrolling?

Question

I have an image above my listview that is currently doing nothing.But I want my image to be animated when the user scrolls in the listview just like this.

This is an example of an old library called StikkyHeader ,but it doesn't seem to work now. Is there any other libraries for the same reason or even a way I can do it without libraries?

Answer 1

Try this one

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:minHeight="200dp"
        >



        <com.google.android.material.appbar.CollapsingToolbarLayout
            android:id="@+id/collapsingToolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:minHeight="150dp"
            app:expandedTitleMarginBottom="25dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            >

            <ImageView
                android:layout_width="match_parent"
                android:src="@drawable/magic_bg"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.5"
                android:layout_height="match_parent"/>

            <TextView
                android:layout_width="match_parent"
                android:text="#KeepMakingMagic"
                android:textSize="25dp"
                android:gravity="center"
                android:textColor="@color/white"
                android:textStyle="bold"
                app:layout_collapseMode="parallax"
                android:layout_marginBottom="50dp"
                android:layout_gravity="bottom"
                app:layout_collapseParallaxMultiplier="-0.1"
                android:layout_height="wrap_content"/>



        </com.google.android.material.appbar.CollapsingToolbarLayout>



    </com.google.android.material.appbar.AppBarLayout>


    <!-- You can have list view here Instead of scrollview But you need to make sure layout behaviour is same-->

    <androidx.core.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:orientation="vertical"
            android:background="@color/colorAccent"
            android:layout_height="1000dp">


        </LinearLayout>

    </androidx.core.widget.NestedScrollView>



</androidx.coordinatorlayout.widget.CoordinatorLayout>

Demo:

Don't forget to play with things