What is Expandable RecyclerView in Android

Ashwani Yadav

24 September 2023

Expandable RecyclerView

Expandable RecyclerView is one of the most important feature in Android which can be easily created for our application .

It contains two views one is parent view and other is child view. Parent is visible by default but the child view has to be expanded and collapsed. It will expand when we click on parent view.

Expandable RecyclerView View Holders

We have to create two view holders to hold the view of parent and child

ParentViewHolder
ChildViewHolder.

So, by using these we shall create it in our application to make it better.

build.gradle:

Add this dependency in your build.gradle file.

 implementation 'com.android.support:recyclerview-v7:25.3.1'
 implementation 'com.android.support:cardview-v7:27.0.2'

1 2	implementation 'com.android.support:recyclerview-v7:25.3.1' implementation 'com.android.support:cardview-v7:27.0.2'

Data Model

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

package com.example.exprv;

public class Person {

    private String fName, lastName;
    public Person(String fName , String lastName ) {
        this.fName = fName;
       this.lastName=lastName;
    }

    public String getfName() {
        return fName;
    }

    public String getLastName() {
        return lastName;
    }
}

package com.example.exprv;

public class Person {

private String fName, lastName;

public Person(String fName , String lastName ) {

this.fName = fName;

this.lastName=lastName;

}

public String getfName() {

return fName;

}

public String getLastName() {

return lastName;

}

Adding RecyclerView

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<androidx.recyclerview.widget.RecyclerView

android:id="@+id/recyclerView"

android:layout_width="match_parent"

android:layout_height="match_parent" />

</RelativeLayout>

Designing List Layout

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

        <TextView
            android:id="@+id/textViewName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#ff3847"
            android:padding="10dp"
            android:text="Iron Man"
            android:textAlignment="center"
            android:textAppearance="@style/Base.TextAppearance.AppCompat.Large.Inverse" />

        <LinearLayout
            android:animateLayoutChanges="true"
            android:id="@+id/linearLayout"

            android:visibility="gone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


            <TableLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="15dp">

                <TableRow>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="First Name   " />

                    <TextView
                        android:id="@+id/textViewFirstName"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Tony Stark"
                        android:textStyle="bold" />
                </TableRow>


                <TableRow>

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Last Name   " />

                    <TextView
                        android:id="@+id/textViewLastName"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="yadav"
                        android:textStyle="bold" />
                </TableRow>




            </TableLayout>

        </LinearLayout>
        </LinearLayout>

    </androidx.cardview.widget.CardView>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<androidx.cardview.widget.CardView

android:layout_width="match_parent"

android:layout_height="match_parent">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<TextView

android:id="@+id/textViewName"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="#ff3847"

android:padding="10dp"

android:text="Iron Man"

android:textAlignment="center"

android:textAppearance="@style/Base.TextAppearance.AppCompat.Large.Inverse" />

<LinearLayout

android:animateLayoutChanges="true"

android:id="@+id/linearLayout"

android:visibility="gone"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<TableLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:padding="15dp">

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="First Name " />

<TextView

android:id="@+id/textViewFirstName"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Tony Stark"

android:textStyle="bold" />

</TableRow>

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Last Name " />

<TextView

android:id="@+id/textViewLastName"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="yadav"

android:textStyle="bold" />

</TableRow>

</TableLayout>

</LinearLayout>

</androidx.cardview.widget.CardView>

</RelativeLayout>

Creating RecyclerView Adapter

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

package com.example.exprv;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
import androidx.recyclerview.widget.RecyclerView;


import java.util.List;

/**
 * Created by Belal on 7/15/2017.
 */

public class PersonAdapter extends RecyclerView.Adapter<PersonAdapter.PersonViewHolder> {


    private List<Person> personList;
    private Context context;

    private static int currentPosition = 0;

    public PersonAdapter(List<Person> personList, Context context) {
        this.personList = personList;
        this.context = context;
    }

    @Override
    public PersonViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_layout_persons, parent, false);
        return new PersonViewHolder(v);
    }

    @Override
    public void onBindViewHolder(finalPersonViewHolder holder, final int position) {
        Person person = personList.get(position);
        holder.textViewFirstName.setText(person.getfName());
        holder.textViewLastName.setText(person.getLastName());

        holder.linearLayout.setVisibility(View.GONE);

        //if the position is equals to the item position which is to be expanded
        if (currentPosition == position) {


            //toggling visibility
            holder.linearLayout.setVisibility(View.VISIBLE);

        }

        holder.textViewName.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                //getting the position of the item to expand it
                currentPosition = position;

                //reloding the list
                notifyDataSetChanged();
            }
        });
    }

    @Override
    public int getItemCount() {
        return personList.size();
    }

    class PersonViewHolder extends RecyclerView.ViewHolder {
        TextView textViewFirstName, textViewLastName,textViewName;
        LinearLayout linearLayout;

        PersonViewHolder(View itemView) {
            super(itemView);

            textViewName = (TextView) itemView.findViewById(R.id.textViewName);
            textViewFirstName = (TextView) itemView.findViewById(R.id.textViewFirstName);
            textViewLastName = (TextView) itemView.findViewById(R.id.textViewLastName);


            linearLayout = (LinearLayout) itemView.findViewById(R.id.linearLayout);
        }
    }
}

package com.example.exprv;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.animation.Animation;

import android.view.animation.AnimationUtils;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

import android.widget.Toast;

import androidx.recyclerview.widget.RecyclerView;

import java.util.List;

/**

* Created by Belal on 7/15/2017.

public class PersonAdapter extends RecyclerView.Adapter<PersonAdapter.PersonViewHolder> {

private List<Person> personList;

private Context context;

private static int currentPosition = 0;

public PersonAdapter(List<Person> personList, Context context) {

this.personList = personList;

this.context = context;

}

@Override

public PersonViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

View v = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_layout_persons, parent, false);

return new PersonViewHolder(v);

}

@Override

public void onBindViewHolder(finalPersonViewHolder holder, final int position) {

Person person = personList.get(position);

holder.textViewFirstName.setText(person.getfName());

holder.textViewLastName.setText(person.getLastName());

holder.linearLayout.setVisibility(View.GONE);

//if the position is equals to the item position which is to be expanded

if (currentPosition == position) {

//toggling visibility

holder.linearLayout.setVisibility(View.VISIBLE);

}

holder.textViewName.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

//getting the position of the item to expand it

currentPosition = position;

//reloding the list

notifyDataSetChanged();

}

});

}

@Override

public int getItemCount() {

return personList.size();

}

class PersonViewHolder extends RecyclerView.ViewHolder {

TextView textViewFirstName, textViewLastName,textViewName;

LinearLayout linearLayout;

PersonViewHolder(View itemView) {

super(itemView);

textViewName = (TextView) itemView.findViewById(R.id.textViewName);

textViewFirstName = (TextView) itemView.findViewById(R.id.textViewFirstName);

textViewLastName = (TextView) itemView.findViewById(R.id.textViewLastName);

linearLayout = (LinearLayout) itemView.findViewById(R.id.linearLayout);

}

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