How to Make RecyclerView Items That Expand With Animation

Build simple, beautiful transitions to show users more data in your app

“Anyone who stops learning is old, whether at twenty or eighty.” –Henry Ford

I have written an article on RecyclerView With Beautiful Animations before, which was all about RecyclerView item entrance animation. Now, in this tutorial we are gonna learn how you can make RecyclerView items expandable with animation. Sounds interesting? Let's have a look at what I’m talking about.

By tapping on the small arrow, an extra layout underneath each item becomes visible. You can put any extra information in there. You can also see the smooth animation of the collapsing and expanding of the layout and the small arrow rotating every time.

Let's get started!

If you don’t know how to get started with RecyclerView, I urge you to go and check this official documentation so you might have a clear idea about what is going on.

Step 1

Let's make a new project and add the following dependencies in your build.gradle file.

build.gradle

I usually work with data binding, so let's enable it by adding small code in your build.gradle again under android{}.

dataBinding{
    enabled true
}

Note: If you don’t know that is data binding you can check it here.

Step 2

Now it’s time to make a model class. Make a class named person. Copy and paste the following code:

Person.java

Step 3

Let's make an adapter to make RecyclerView work. I am making a class called ExpendableRecyclerViewAdapter.java. Copy and paste the following code:

To represent each item, I have made a RecyclerView item, which looks like this.

item_expand.xml

Copy and paste the following code:

item_expand.xml

Now, let's make our RecyclerView work before going to the animation part.

My activity_main.xml looks like this:

activity_main.xml

In MainActivity.java I am gonna implement RecyclerView and its functionality. In order to do this, we need to have some dummy data. I have made some arrays inarray.xml within the value folder. You can have your dummy data or maybe actual data. Copy and paste the following code:

MainActivity.java

Hopefully, you are getting this result.

Now the basic implementation has been done. Its time to add some animations. Let’s get into it.

Step 4

I am making a package called animations, and in there I am making a class called Animations.java.

Let's go step by step. I’m going to animate this little arrow by tapping on that. For this, you need to add this small piece of code in your Animations.java class:

Let's edit our adapter.

Run the app and tap on the arrow. It should rotate.

Rotating arrow

Step 5

Let's implement functionality that will us to open an extra layout by tapping on this arrow.

For this, you need to add some lines of code in your Animations.java.

Again, you need to edit your adapter. This time you have to add some code in your toggleLayout method.

private boolean toggleLayout(boolean isExpanded, View v, LinearLayout layoutExpand) {
    Animations.toggleArrow(v, isExpanded);
    if (isExpanded) {
        Animations.expand(layoutExpand);
    } else {
        Animations.collapse(layoutExpand);
    }
    return isExpanded;

}

Now, let's run the app and see what we have done.

For Reference

toggleArrow(): This method helps us to rotate the arrow in which we are calling animate() method of view class and set its duration according to need.

expandAction(): In this method, we are measuring the height of our layout that will expand and setting up the duration of animation according to that height.

collapse(): same goes for the collapsing action, but this time we are setting the layout visibility to GONE instead of VISIBLE .

You Can Clone the Project

Mustufa786/recyclerViewCollapase

Follow CodixLab for more tech knowledge.

Found this article useful? Follow me Mustufa Ansari on medium. Check out my most read articles below.

• How to implement copy/paste feature in android using TextView?
• Want to make Animated Floating Action Button with More Option?
• Make RecyclerView With beautiful Animations!
• What is AndroidX?

Like my Facebook Page