Expandable RecyclerView Android – RecyclerView with Expandable Items

Hello guys, welcome to another useful post Expandable RecyclerView Android. In this post, we will build Expandable RecyclerView Items for our List. You might already know we use RecyclerView to display a List of data in our application. This time we will do the same we will create a RecyclerView, but the items of the RecyclerView will toggle on tapping. So initially some details of the list items will be hidden, and when we tap on the item it will show us the remaining detail by expanding itself. Sounds confusing? 😉 Don’t worry it is very easy. Let’s start.

The List Design

  • The first step is to decide the design of our List. So below you can see the design I have decided.
expandable recyclerview android
Expandable RecyclerView Android
  • I hope you got the basic idea of our Expandable RecyclerView from the image shown above. Now lets start creating our Android Project.

Expandable RecyclerView Android

Creating a New Project

  • As always we will create a new Android Studio project.
  • Here I have created a project named ExpandableRecyclerView using an empty activity.

Adding Dependencies

  • Here is my app level build.gradle file. You need to add these dependencies to your project as well.

  • I am using RecyclerView, CardView for building the List and Volley and Glide for network request and loading images from URL.

Web Service

  • We will fetch the data from the following web services. You can use the same or you can also create your own.

  • When you will go to the above URL you will see the following JSON data.

expandable recyclerview json data

Data Model

  • Now to store the above JSON data, we need to create a model class. So create a new class named Hero.java and write the following code.

Adding RecyclerView

  • Now come back to the layout of your MainActivity which is usually activity_main.xml and add a RecyclerView here.

Designing List Layout

  • Now let’s design the xml layout for the List. So first create a new layout resource file named list_layout_heroes.xml (or you can give it any name), and write the following xml code.

  • So thats it for the layout. The above xml code will display the following layout.
expandable recyclerview android list layout
List Layout
  • You can see only name is visible as the other thing will be visible after tapping the name. Now lets create an slide down animation effect and custom RecyclerView adapter.

Slide Down Animation

  • Inside the res folder create a new folder named anim. Inside this folder create a new anim resource file (basically a normal xml file) and write the following xml code.

Creating RecyclerView Adapter

  • Create a new class named HeroAdapter.java and write the following code.

  • The above RecyclerView adapter is same as we created the RecyclerView in previous tutorials. The only difference is we are toggling the visibility. I have added the comments where I am doing the toggling. Rest of the code is same.

Getting Data from Web Service and Loading it to RecyclerView

  • Now come back to MainActivity.java and write the following code.

  • Thats it now you can try running your application.
expandable recyclerview android
Expandable Recyclerview Android
  • Bingo! It is working fine. If you are in confusions, you can get the source code of this Expandable RecyclerView Android project from the link given below.

So that’s all for this Expandable RecyclerView Android tutorial. Hope you found it helpful. For any queries or feedback, you can leave your comments below. And I will soon post some more useful content for you. Thank You 🙂

17 thoughts on “Expandable RecyclerView Android – RecyclerView with Expandable Items”

  1. 1) I want to add arrow(downwards) to this , when clicked on that, it should expand and arrow changes
    to upwards !

    2) Also want to keep simple list no expansion without arrow clicking .

    Reply
  2. Hi sir,

    1) I want to add arrow(downwards) to this, when clicked on that, it should expand and arrow changes
    to upwards!

    2) Also, want to keep simple list no expansion without arrow clicking.

    Reply
  3. Its working…thank u…

    but now I want intent, on the expandable list or on the child view….how can I use Intent on the expandable list ??

    Reply
  4. Hello sir, How to pass prams to our URL when select drop-down option, using retrofit or volley. Please solve my issue.

    Reply
  5. hi belal,

    I am newbiee to android development. have a question . we have already created the ui of the expanded list with its contents in “list_layout_heroes.xml ” file.

    then why are we setting the textview with values retrived from our model class via json in the HeroAdapter like this::
    @Override
    public void onBindViewHolder(final HeroViewHolder holder, final int position) {
    Hero hero = heroList.get(position);
    holder.textViewName.setText(hero.getName());
    holder.textViewRealName.setText(hero.getRealName());
    ……..
    }

    why to set the values again if we have already done it via xml.

    Please your reply will solve my doubts.
    Please do reply.

    Reply

Leave a Comment