Android Recycler view Animations in android studio with example

Learn how to populate an empty RecyclerView list using custom animations.

        What we are building!

Introduction

In this tutorial we’ll learn an easy way to add an initial content animation for a RecyclerView. There are some ways of doing this, e.g.:

• Implementing a custom ItemAnimator
• Add animation handling to onBindViewHolder() in the Adapter

We’ll be using a third option, LayoutAnimation. It’s easy and only requires a small amount of code. It’s worth noting that though this tutorial is focused around RecyclerViews, LayoutAnimations can be applied to any subclass of ViewGroup.

Let’s get started

So let’s start of by creating the item animation, in this example we’ll go for the Fall Down animation shown below.

            The Fall Down animation

Start of by creating the file item_animation_fall_down.xml in res/anim/ and add the following:

	<set xmlns:android="http://schemas.android.com/apk/res/android"
	android:duration="@integer/anim_duration_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>

The steps above will run together during the animation. Here’s a short explanation of each step:

• Translate Y -20% to 0%
  Before the animation starts, move up the view by 20% of it’s own height, and let it fall down to its final position.
• Alpha 0 to 1
  The view will start completely invisible and slowly appear until fully visible.
• Scale X/Y 105% to 100%
  The scale is set to 105% to let it shrink down to it’s final size. This will make it appear as though it’s falling down, onto the background.

Defining the LayoutAnimation

With the item animation done it’s time to define the layout animation which will apply the item animation to each child in the layout. Create a new file called layout_animation_fall_down.xml in res/anim/ and add the following:

	<?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"
	/>

• android:animation="@anim/item_animation_fall_down”Defines which animation to apply to each item in the layout.
• android:delay=”15%"
  Adds a start delay for each item that’s based on the duration of the item animation. 0% will cause all items in the layout to animate simultaneously, and 100% will let each item finish it’s animation before the next one is started. In this case, 15% of item A’s animation will pass before item B starts its animation.
• android:animationOrder="normal"
  There are three types to choose from: normal, reverse and random. This allows to control in which order the content will be animated. Normal follows the natural order of the layout (vertical: top to bottom, horizontal: left to right), Reverse is the opposite of Normal and Random…well Random is random order.

Applying the LayoutAnimation

A LayoutAnimation can be applied both programmatically and in XML.

	int resId = R.anim.layout_animation_fall_down;
	LayoutAnimationController animation = AnimationUtils.loadLayoutAnimation(ctx, resId);
	recyclerview.setLayoutAnimation(animation);

	<android.support.v7.widget.RecyclerView
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layoutAnimation="@anim/layout_animation_fall_down"
	/>