Wednesday, October 13, 2021

How to RecyclerView animation - Kotlin Example

 MainActivity.kt

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        // initialize a mutable list of animals

        val animals = mutableListOf(

            "Squirrel", "Mouse", "Chameleon",

            "Deer", "Raccoon", "Antelope",

            "Beaver", "Weasel", "Hedgehog",

            "Lynx", "Groundhog", "Anteater",

            "Wombat"

        )

        // initialize an instance of linear layout manager

        val layoutManager = LinearLayoutManager(

            this, // context

            RecyclerView.VERTICAL, // orientation

            false // reverse layout

        ).apply {

            // specify the layout manager for recycler view

            recyclerView.layoutManager = this

        }

        // finally, data bind the recycler view with adapter

        val adapter = RecyclerViewAdapter(animals).apply {

            recyclerView.adapter = this

        }

        button.setOnClickListener {

            // schedules the layout animation to be played

            // after the next layout pass of this view group

            recyclerView.scheduleLayoutAnimation()


            // refresh the recycler view

            adapter.notifyDataSetChanged()

        }

    }

}

RecyclerViewAdapter.kt

class RecyclerViewAdapter(private val animals: MutableList<String>)

    : RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder>() {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

        // inflate the custom view from xml layout file

        val view: View = LayoutInflater.from(parent.context)

            .inflate(R.layout.custom_view,parent,false)


        // return the view holder

        return ViewHolder(view)

    }

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {

        // display the current animal

        holder.animal.text = "${position+1}. ${animals[position]}"

    }

    override fun getItemCount(): Int {

        // number of items in the data set held by the adapter

        return animals.size

    }

    class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView){

        val animal: TextView = itemView.tvAnimal

    }

    // this two methods useful for avoiding duplicate item

    override fun getItemId(position: Int): Long {

        return position.toLong()

    }

    override fun getItemViewType(position: Int): Int {

        return position

    }

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

    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:id="@+id/constraintLayout"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity"

    android:background="#F7BFBE">


    <Button

        android:id="@+id/button"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginStart="8dp"

        android:layout_marginTop="8dp"

        android:text="Refresh"

        android:backgroundTint="#0ABAB5"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />


    <androidx.recyclerview.widget.RecyclerView

        android:id="@+id/recyclerView"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/button"

        android:layoutAnimation="@anim/recyclerview_layout_animation"

        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</androidx.constraintlayout.widget.ConstraintLayout>

custom_view.xml

<?xml version="1.0" encoding="utf-8"?>

<androidx.cardview.widget.CardView

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/cardView"

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    app:cardBackgroundColor="#FF3855"

    app:cardCornerRadius="8dp"

    app:cardElevation="3dp"

    app:cardMaxElevation="6dp"

    app:contentPadding="24dp"

    android:layout_margin="4dp">

    <androidx.constraintlayout.widget.ConstraintLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content">

        <TextView

            android:id="@+id/tvAnimal"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:fontFamily="sans-serif-condensed-medium"

            android:textColor="#F8D568"

            android:textSize="25sp"

            app:layout_constraintEnd_toEndOf="parent"

            app:layout_constraintStart_toStartOf="parent"

            app:layout_constraintTop_toTopOf="parent"

            tools:text="Text View" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.cardview.widget.CardView>

res/anim/recyclerview_item_animation.xml

<?xml version="1.0" encoding="utf-8"?>

<set

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:duration="500">

    <translate

        android:fromYDelta="-20%"

        android:toYDelta="0"

        android:interpolator="@android:anim/decelerate_interpolator" />

    <alpha

        android:fromAlpha="0"

        android:toAlpha="1"

        android:interpolator="@android:anim/decelerate_interpolator" />

    <scale

        android:fromXScale="105%"

        android:fromYScale="105%"

        android:toXScale="100%"

        android:toYScale="100%"

        android:pivotX="50%"

        android:pivotY="50%"

        android:interpolator="@android:anim/decelerate_interpolator" />

</set>

res/anim/recyclerview_layout_animation.xml

<?xml version="1.0" encoding="utf-8"?>

<!-- important: tweak the delay percentage to slow down or speed up animation -->

<layoutAnimation

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:animation="@anim/recyclerview_item_animation"

    android:animationOrder="normal"

    android:delay="50%" />

build.gradle(app) [code to add]

dependencies {

    // card view

    implementation "androidx.cardview:cardview:1.0.0"


    // recycler view

    implementation "androidx.recyclerview:recyclerview:1.1.0"

}

1 comment:

  1. i found it very helpful. thank u

    Mast Banarasi Paan is one of the best selling paan such as Rajwadi paan, Laddu paan, Choclate Paan, Fire paan, Silver paan. Mast Banarasi Paan is made available to every customer with unique flavor, quality taste, and hygiene and we are the best paan provider in India.
    banarasi paan

    ReplyDelete