How to Animate RecyclerView Items in Android?

0 0 4 minutes read

RecyclerView Item animation is one of the modern features that we can add to our Android app, the basic working of this is when any user opens our app then the data items that are present in recycler view will animate and then it will show to the user.it is so easy to implement also it can enhance the user experience. A sample video is given below to get an idea about what we will do in this article.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginTop="16dp"
        android:layout_marginBottom="76dp"
        android:clipToPadding="false"
        android:padding="16dp"
        android:scrollbarStyle="outsideOverlay"
        android:scrollbars="vertical"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/grid_layout" />
  
    <GridLayout
        android:id="@+id/grid_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:rowCount="2"
        android:columnCount="2"
        android:alignmentMode="alignMargins"
        android:columnOrderPreserved="false"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toBottomOf="@id/recycler_view"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent">
  
        <Button
            android:id="@+id/fall_down_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Fall Down"/>
  
        <Button
            android:id="@+id/btn_slide_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Slide Up"/>
  
        <Button
            android:id="@+id/btn_rotate_in"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Rotate In"/>
  
        <Button
            android:id="@+id/btn_scale_in"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Scale In"/>
  
    </GridLayout>
    
</androidx.constraintlayout.widget.ConstraintLayout>

Step 3:

To Demonstrate the different Animations we have used the buttons for that and we are triggering the animations when buttons are clicked, you can also add a default functionality in which when the user opens the app then the animation will be showed added this feature by adding comments in the code below

MainActivity.java

Java

package com.android.gfgapp;
  
import android.os.Bundle;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.widget.Button;
  
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
  
import java.util.ArrayList;
import java.util.List;
  
// why implementing View.OnClickListener because 
// it can handle click events for views in the activity
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
  
    private RecyclerView recyclerView;
    private RecyclerViewAdapter recyclerViewAdapter;
    private List<String> dataStructure = new ArrayList<>();
  
    private Button fallDownButton, slideUpButton, rotateInButton, scaleInButton;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Initialize RecyclerView That we 
        // created on activity_main.xml file
        recyclerView = findViewById(R.id.recycler_view);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
  
        dataStructure.add("Array");
        dataStructure.add("Linked List");
        dataStructure.add("Stack");
        dataStructure.add("Queue");
        dataStructure.add("Tree");
        dataStructure.add("Graph");
        dataStructure.add("Hash Table");
        dataStructure.add("Heap");
        dataStructure.add("Trie");
        dataStructure.add("Segment Tree");
  
        // Seting the  adapter
        recyclerViewAdapter = new RecyclerViewAdapter(this, dataStructure);
        recyclerView.setAdapter(recyclerViewAdapter);
  
        // Set animation for RecyclerView(This is by Default Animation)
        // When User Opens the app
        // then this animation will be shown
        int resId = R.anim.layout_animation_fall_down;
        LayoutAnimationController animation = AnimationUtils.loadLayoutAnimation(this, resId);
        recyclerView.setLayoutAnimation(animation);
        recyclerViewAdapter.notifyDataSetChanged();
  
        // Initialize buttons of activity_main.xml file
        fallDownButton = findViewById(R.id.fall_down_button);
        slideUpButton = findViewById(R.id.btn_slide_up);
        rotateInButton = findViewById(R.id.btn_rotate_in);
        scaleInButton = findViewById(R.id.btn_scale_in);
  
        // Seting click listeners for buttons(When User Clicks)
        fallDownButton.setOnClickListener(this);
        slideUpButton.setOnClickListener(this);
        rotateInButton.setOnClickListener(this);
        scaleInButton.setOnClickListener(this);
    }
  
    @Override
    public void onClick(View v) {
        int resId = 0;
  
        switch (v.getId()) {
            case R.id.fall_down_button:
                resId = R.anim.layout_animation_fall_down;
                break;
            case R.id.btn_slide_up:
                resId = R.anim.layout_animation_slide_up;
                break;
            case R.id.btn_rotate_in:
                resId = R.anim.layout_animation_rotate_in;
                break;
            case R.id.btn_scale_in:
                resId = R.anim.layout_animation_scale_in;
                break;
        }
  
        if (resId != 0) {
            // Set animation for RecyclerView
            LayoutAnimationController animation = AnimationUtils.loadLayoutAnimation(this, resId);
            recyclerView.setLayoutAnimation(animation);
            recyclerViewAdapter.notifyDataSetChanged();
        }
    }
}

Step 4: Cretaed one java class as RecyclerViewAdapter.java to manage and control the data displayed in the RecyclerView. Added ViewHolders By RightClicking > Implement Methods and all

RecyclerViewAdapter.java

Java

package com.android.gfgapp;
  
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
  
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
  
import java.util.List;
  
public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.ViewHolder> {
  
    // Declaring the private member variables
    private Context context;
    private List<String> dataStructure;
  
    // Constructor for RecyclerViewAdapter right click and you can add that
    public RecyclerViewAdapter(Context context, List<String> dataStructure) {
        this.context = context;
        this.dataStructure = dataStructure;
    }
  
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // Inflating the item layout and returning a new ViewHolder object
        View view = LayoutInflater.from(context).inflate(R.layout.item_layout, parent, false);
        return new ViewHolder(view);
    }
  
    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        // Binding data to the view holder
        holder.colorTextView.setText(dataStructure.get(position));
    }
  
    @Override
    public int getItemCount() {
        // Returning the number of items in the data list
        return dataStructure.size();
    }
  
    public static class ViewHolder extends RecyclerView.ViewHolder {
  
        // Declaring view holder's
        // private member variables
        TextView dsa;
  
        // Constructor for ViewHolder
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            // Initializing the view holder's
            // private member variables
            dsa = itemView.findViewById(R.id.dsa);
        }
    }
}

layout file that is used in RecyclerViewAdapter class above

item_layout.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:orientation="horizontal">
    
    <TextView
        android:id="@+id/dsa"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="18sp"
        android:textStyle="bold" />
    
</LinearLayout>

Step 5:

First Create one Android Resource Directory by right-clicking on the res folder like that.

All the animation that is used in the video

fall_down.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator">
  
    <translate
        android:fromYDelta="-50%"
        android:toYDelta="0"
        android:duration="500" />
  
    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:duration="500" />
  
    <scale
        android:fromXScale="105%"
        android:fromYScale="105%"
        android:toXScale="100%"
        android:toYScale="100%"
        android:pivotX="50%"
        android:pivotY="50%"
        android:duration="500" />
  
</set>

fall_down_animation.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromYDelta="-50%"
        android:toYDelta="0%" />
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

layout_animation_fall_down.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/fall_down"
    android:animationOrder="normal"
    android:delay="30%" />

layout_animation_rotate_in.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/rotate_in_animation"
    android:delay="20%" />

layout_animation_scale_in.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/scale_in_animation"
    android:delay="20%" />

layout_animation_slide_up.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/fall_down_animation"
    android:delay="20%" />

rotate_in_animation.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <rotate
        android:duration="500"
        android:fromDegrees="180"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toDegrees="0" />
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

scale_in_animation.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:duration="500"
        android:fromXScale="0"
        android:fromYScale="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1" />
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>

slide_up_animation.xml:

XML

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:duration="500"
        android:fromYDelta="100%"
        android:toYDelta="0%" />
    <alpha
        android:duration="500"
        android:fromAlpha="0.0"
        android:toAlpha="1.0" />
</set>