How to Transition Page Recycler using Animated Recycler View?

0
487

Animated Recycler View is a library that allows you to animate a recycler view in your project like Google does it in its Google Play Store. Only the first visible items are animated there and you will see no animation when the recycler view scrolls up.

Animated Recycler View - Transition Page Recycler with layout animations
Animated Recycler View – Transition Page Recycler with layout animations

Reasons to use it

This library solves several problems:

  1. It works stably fast and without jerks.
  2. It doesn’t need to utilize the adapter to animate items when they appear for the first time.

Recommended article : Is LastAdapter ending RecyclerView adapter?

Why Animated Recycler View is special for you?

While working on a project, most of time we need animation similar to the one used in the Google Play Store but didn’t find any appropriate library on Internet/ Github/ StackOverflow that could help us with this task. Let’s go through all steps of implementation out of the box:

1Demo

Before implementation see the demo what is the beauty of this Android library.

Check this : AwesomeLayoutManager Android Layout Library

2Setup

To use this library your minSdkVersion must be >= 16.

In your build.gradle :

dependencies {
    implementation "com.mlsdev.animatedrv:library:1.0.1"
}

3Create layout animation file

First of all, it’s necessary to define a file called item_animation_from_bottom.xml in res/anim/. This animation is used for each item of the RecyclerView.

<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500">

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

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

</set>

Check this one also : Android Circular Layout Manager

The next step is to create a file layout_animation_from_bottom.xml in res/anim/ that uses the item animation from the code snippet above.

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
    android:animation="@anim/item_animation_from_bottom"
    android:animationOrder="normal"
    android:delay="15%" />

4Apply animation in Activity

Finally it’s necessary to apply the created layout animation.

AnimatedRecyclerView recyclerView = new AnimatedRecyclerView.Builder(this)
                .orientation(LinearLayoutManager.VERTICAL)
                .layoutManagerType(AnimatedRecyclerView.LayoutManagerType.LINEAR)
                .animation(R.anim.layout_animation_from_bottom)
                .animationDuration(600)
                .reverse(false)
                .build();

5Start animation

This is how we start the animation we’ve just created. There are two ways of doing it:

  • First option
adapter.notifyDataSetChanged();
recyclerView.scheduleLayoutAnimation();
  • Second option Your RecyclerView must be casted to the AnimatedRecyclerView and an adapter must be set.
recyclerView.notifyDataSetChanged();

6Customization

We already defined some item/layout animations and you don’t need to go through the first two steps described above. In case you still want to define any other item/layout animation you can easily do it and use it with our AnimatedRecyclerView.

If the animations defined by us work for you, you can begin straight from applying a layout animation using one of the already mentioned ways:

  • From the code

Applying a layout animation from the code

  • From the XML layout

Applying a layout animation from the XML layout

Start animation

Now you can start your animation:

Start animation in Animated RecyclerView

Or your RecyclerView should extend the Animated RecyclerView and an adapter should be set:

Extend Animated RecyclerView with RecyclerView and set adapter

Hope you like this article. Share with friends.

 

Share your thoughts

Loading Facebook Comments ...
Loading Disqus Comments ...