Android RecyclerView Animations in Kotlin

The image is taken from 101android.com

After coding the app, the functionality is not enough for a good-looking modern app. I think everyone is accepted that today, the app should consist of UI/UX, transitions-animations, and of course client-side. Today I will try to explain one of these aspects which is animations for recycler view items. I will be using Android Studio and Kotlin. Have fun :)

Let’s start with the basics

First of all, you need to create an anim folder to store your animation files.

res(right-click)->New->Android Resource Directory

We are setting the name “anim”

After that right-click the anim folder and create an “Animation Resources File”.

Explanation of the Properties

When you create the Animation Resources File you will see some properties in it. I will try to explain them and after that, we will be creating our animations.

-Translate

Translate is using primarily for moving the items on the x and y-axis. It has some attributes like these:

FromXDelta and fromYDelta represent which direction the item will come from. If you set a positive value for “fromXDelta”, it will come from the right side of the screen.ToDelta attributes represent where the item will be stopping. Usually, I am using the toDelta attribute with 0% . Because even if you set it “-100%” when the animation duration finished the item will return to the screen and this does not look so good. And finally, the “duration” is the animation time. Let's see an animation with just translate property.

<Translate/> only anim

-Alpha

Alpha is using for determining the opacity. This property is mainly using for fade in/out animations. Attributes are below:

Fade in and out animations can be achieved using fromAlpha and toAlpha attributes. If you use the values like above you will achieve this animation.

<Alpha/> only anim

-Rotate

The Rotate property, as can be understood from the name, is using for rotation animations for recycler view items.

These attributes were confusing to me also in the beginning, because of that I will try to explain them as clear as possible. FromDegrees attribute is represented which degree the item will come from. Imagine the degrees and look at the image now. Items are coming from 270°and rotating clockwise. Pivot attributes are like pinning the item according to value. For example, if you set pivotX:100% and pivotY:0% and the fromDegrees: 90° it will pin the item on the top right corner and rotate it accordingly. The animation can be seen in the gif below.

<Rotate/> only anim

-Scale

Scale property is using for scaling the items up and down. These attributes are more than others so let's dive in.

Pivot attributes have a bit different function here. 50% value for both pivots represents the center of the item. I set it that way because I want to scale them up from the center. FromScale and ToScale attributes are using to scale the item. 1 for original size and 0 for beginning size. These attributes have an output like below.

<Scale/> only anim

-Setting up

holder.shopDetailParent.animation =
    AnimationUtils.loadAnimation(holder.itemView.context, R.anim.example_anims)

First of all, you need to define the view, which you want to animate, of the recycler view item in the adapter. After that, you can use that code snippet above on OnBindViewHolder to add your animations. I want to animate the whole item so I defined my shopDetailParent card view in the adapter. “example_anims” is my anim file so, you need to write your own file name to the code.

Some Beautiful Example Animations

//Animation One//
<translate
    android:fromYDelta="100%"
    android:toYDelta="0%"
    android:duration="500"
    />

<alpha
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="500"/>

<scale
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="0.5"
    android:fromYScale="0.5"
    android:toXScale="1"
    android:toYScale="1"
    android:duration="500"

    />

Animation One

//Animation Two//
<translate
    android:fromXDelta="200%"
    android:toYDelta="0%"
    android:duration="500"
    />

<scale
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromXScale="0"
    android:fromYScale="0"
    android:toXScale="1"
    android:toYScale="1"
    android:duration="500"

    />

Animation Two

//Animation Three//
<translate
    android:fromXDelta="200%"
    android:toYDelta="0%"
    android:duration="500"
    />
<alpha
    android:fromAlpha="0.0"
    android:toAlpha="3.0"
    android:duration="2500"/>

Animation Three

Interpolators

We have the last attribute which is interpolators. Interpolators are basically the behavior of the animations. Normally animations are working on Linear Interpolator. That interpolator moves the view evenly over each frame of the animation. (All the graphs from now on taken from jebware.com, you can go to the website and try the interpolators with different factors)And its graph is like that:

Linear Interpolator

But other interpolators have different lines. I will show you how to add interpolators and show a couple of examples after that you can try it on your own. All you have to do is adding this line to your set.

Decelerate interpolator will make items come from the outside right of the screen and will slow them down while they are close to the final position.

Decelerate Interpolator

Bounce Interpolator

Overshoot Interpolator

List of interpolators from developer.android But also you can write custom interpolators.

Thank you for reading my article. I tried to explain what I know. I hope it will help you to understand and apply beautiful animations for recycler view:)