RecyclerView animations

Hello.
In this tutorial, I will show you how to add cool animations to your loading data of recyclerview.

Add recyclerview and cardview to your build gradle:

build.gradle(Module:app)
implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.android.support:cardview-v7:26.1.0'

Next, make a layout for your activity:

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="com.example.bodhi64.virtuozatutorials.MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        />


    <LinearLayout
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:id="@+id/btn_fall"
            android:text="Falling"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn_rise"
            android:text="Rising"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

        <Button
            android:id="@+id/btn_side"
            android:text="From Side"
            android:layout_weight="1"
            android:layout_width="0dp"
            android:layout_height="wrap_content" />

    </LinearLayout>
</RelativeLayout>

Next, make a list item for your recyclerview. Right click on layout folder,  New-> Layout resource file and name it layout_item.
Then copy and paste this code into it:

layout_item.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:cardElevation="10dp"
    android:layout_width="match_parent"
    android:layout_height="100dp"
    android:layout_margin="5dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <TextView
            android:id="@+id/textView"
            android:layout_centerInParent="true"
            android:text="1"
            android:textColor="#000"
            android:textSize="30sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </RelativeLayout>

</android.support.v7.widget.CardView>

In your project packages, make an adapter for our recyclerview. So, new-> Java class and name it RecyclerViewAdapter. Then inside of it, copy and paste this code:

RecyclerViewAdapter.class
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by bodhi64 on 2/27/18.
 */

public class RecyclerviewAdapter extends RecyclerView.Adapter<RecyclerviewAdapter.SimpleViewHolder> {

    List<Integer> dataSource;


    public RecyclerviewAdapter(){
        dataSource= new ArrayList<>();
        for (int i = 0; i<10;i++){
            dataSource.add(i);
        }
    }

    @Override
    public SimpleViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view= LayoutInflater.from(parent.getContext()).inflate(R.layout.layout_item,parent,false);
        return new SimpleViewHolder(view);
    }

    @Override
    public void onBindViewHolder(SimpleViewHolder holder, int position) {
        holder.textView.setText(String.valueOf(dataSource.get(position)));
    }

    @Override
    public int getItemCount() {
        return dataSource.size();
    }



    public static class SimpleViewHolder extends RecyclerView.ViewHolder{
        public TextView textView;

        public SimpleViewHolder(View itemView) {
            super(itemView);
            textView=(TextView)itemView.findViewById(R.id.textView);
        }
    }


}

Now, we will make an actual animations.
First, we will make a constant value for our animation durations. In res->values folder, right click and make a new Values resource file. In Available qualifiers, select Dimensions. In your auto generated dimens file, copy and paste this code:

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

    <!-- This is where you change duration of your animations -->
    <!-- Here 300 means three hundred miliseconds --> 
    <integer name="animation_dur_medium">300</integer>

</resources>

After that, right click  to res folder, New->Android resource directory. In Resource type, select ‘anim’ and click OK.
In your newly created anim folder, create new xml files with following names and content:

item_animation_fall_down.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@integer/animation_dur_medium">

    <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>

Next:

item_animation_slide_from_bottom.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@integer/animation_dur_medium">


    <translate
        android:fromYDelta="50%p"
        android:toYDelta="0"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>


</set>

Next:

item_animation_slide_from_side.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="@integer/animation_dur_medium">

<translate
        android:fromXDelta="100%"
        android:toXDelta="0"
        android:interpolator="@android:anim/decelerate_interpolator"/>

    <alpha
        android:fromAlpha="0"
        android:toAlpha="1"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"/>


</set>

Next:

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

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

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

</layoutAnimation>

And finally, in your MainActivity, copy and paste following code:

MainActivity.java
import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.View;
import android.view.animation.AnimationUtils;
import android.view.animation.LayoutAnimationController;
import android.widget.Button;


public class MainActivity extends AppCompatActivity {

    Button fallDown, slideFromSide, slideFromBottom;
    RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fallDown= (Button)findViewById(R.id.btn_fall);
        slideFromBottom=(Button)findViewById(R.id.btn_rise);
        slideFromSide=(Button)findViewById(R.id.btn_side);
        recyclerView= (RecyclerView)findViewById(R.id.recyclerview);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        fallDown.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                runAnimation(recyclerView,0);
            }
        });

        slideFromSide.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                runAnimation(recyclerView,1);
            }
        });

        slideFromBottom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                runAnimation(recyclerView,2);
            }
        });

    }

    private void runAnimation(RecyclerView recyclerView, int type) {
        Context context=recyclerView.getContext();
        LayoutAnimationController controller= null;

        if(type==0)
            controller= AnimationUtils.loadLayoutAnimation(context,R.anim.layout_fall_down);
        else if(type==1)
            controller= AnimationUtils.loadLayoutAnimation(context,R.anim.layout_slide_from_side);
        else
            controller= AnimationUtils.loadLayoutAnimation(context,R.anim.layout_slide_from_bottom);

        RecyclerviewAdapter adapter= new RecyclerviewAdapter();
        recyclerView.setAdapter(adapter);
        recyclerView.setLayoutAnimation(controller);
        recyclerView.getAdapter().notifyDataSetChanged();
        recyclerView.scheduleLayoutAnimation();
    }


}

And that’s it. Run it and try it out 😀
Cheers

Share with your friends
Tagged with: