Android Expandable RecyclerView Tutorial with Example

Expandable RecyclerView in Android

Expandable recyclerView is a one of the most important feature in Android it is easily created our application using Expandable RecyclerView Library.

Expandable RecyclerView is a two contain view. parent view and child view. Parent is visible by default but the child view has to be expanded and collapsed. you can click on parent view to expand in recyclerView.

In this recyclerView is create two layout xml file is parent and child and then bind the adapter in different different view holder.you can create child holder and then create parent holder and this holder is bind the expandable recyclerView adapter.

Expandable recyclerView is provided two different different methods in bind holder.it is onCreateGroupViewHolder and then onCreateChildViewHolder methods are declared. onCreateGroupViewHolder is a bind on parent view and then onCreateChildViewHolder is bind on child view.

Now this recyclerView set the adapter and then run the application in your device to by default visibility parent view. you can click on parent view to expand this view and then open child view. you can another click on parent view to hide child view in recyclerView.

Example of Expandable RecyclerView in Android How to work Expandable RecyclerView ?

Implement Dependency in app level build.gradle File.

    implementation 'com.thoughtbot:expandablerecyclerview:1.0'
    implementation 'com.android.support:recyclerview-v7:28.0.0-alpha3'
    implementation 'com.android.support:cardview-v7:28.0.0-alpha3'

implementation 'com.thoughtbot:expandablerecyclerview:1.0'

implementation 'com.android.support:recyclerview-v7:28.0.0-alpha3'

implementation 'com.android.support:cardview-v7:28.0.0-alpha3'

Create activity_main.xml File Follow this code.

<?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"
    android:padding="16dp"
    tools:context=".MainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</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"

android:padding="16dp"

tools:context=".MainActivity">

<android.support.v7.widget.RecyclerView

android:id="@+id/recycler_view"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</RelativeLayout>

Create item_parent.xml File Follow this 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:padding="10dp">

    <TextView
        android:id="@+id/tv_parent_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:drawablePadding="5dp"
        android:drawableRight="@drawable/down_arrow"
        android:gravity="left|center"
        android:padding="10dp"
        android:textSize="20dp"
        android:textColor="#0784b1" />

</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:padding="10dp">

<TextView

android:id="@+id/tv_parent_item"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:drawablePadding="5dp"

android:drawableRight="@drawable/down_arrow"

android:gravity="left|center"

android:padding="10dp"

android:textSize="20dp"

android:textColor="#0784b1" />

</RelativeLayout>

Create item_child.xml File Follow this code.

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

    <TextView
        android:id="@+id/tv_child_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textSize="18dp"
        android:textColor="#ca2450"
        android:padding="10dp" />

</RelativeLayout>

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

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

android:layout_width="match_parent"

android:padding="5dp"

android:layout_height="wrap_content">

<TextView

android:id="@+id/tv_child_item"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:textSize="18dp"

android:textColor="#ca2450"

android:padding="10dp" />

</RelativeLayout>

Create MainActivity.java File Follow this code.

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    RecyclerView recyclerView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

        List<ParentData> list = getList();

        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        MyAdapter myAdapter = new MyAdapter(MainActivity.this,list);
        recyclerView.setAdapter(myAdapter);
        recyclerView.addItemDecoration(new DividerItemDecoration(this,LinearLayoutManager.VERTICAL));
        recyclerView.setAdapter(myAdapter);

    }

    private List<ParentData> getList() {

        List<ParentData> list_parent =new ArrayList<>();
        List<ChildData> list_data_child = new ArrayList<>();

        list_data_child.add(new ChildData("First"));
        list_data_child.add(new ChildData("Second"));
        list_data_child.add(new ChildData("Third"));
        list_data_child.add(new ChildData("Four"));

        list_parent.add(new ParentData("Parent 1",list_data_child));
        list_parent.add(new ParentData("Parent 2",list_data_child));
        list_parent.add(new ParentData("Parent 3",list_data_child));
        list_parent.add(new ParentData("Parent 4",list_data_child));

        return list_parent;
    }
}

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.DividerItemDecoration;

import android.support.v7.widget.LinearLayoutManager;

import android.support.v7.widget.RecyclerView;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

RecyclerView recyclerView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

recyclerView = (RecyclerView) findViewById(R.id.recycler_view);

List<ParentData> list = getList();

recyclerView.setLayoutManager(new LinearLayoutManager(this));

MyAdapter myAdapter = new MyAdapter(MainActivity.this,list);

recyclerView.setAdapter(myAdapter);

recyclerView.addItemDecoration(new DividerItemDecoration(this,LinearLayoutManager.VERTICAL));

recyclerView.setAdapter(myAdapter);

}

private List<ParentData> getList() {

List<ParentData> list_parent =new ArrayList<>();

List<ChildData> list_data_child = new ArrayList<>();

list_data_child.add(new ChildData("First"));

list_data_child.add(new ChildData("Second"));

list_data_child.add(new ChildData("Third"));

list_data_child.add(new ChildData("Four"));

list_parent.add(new ParentData("Parent 1",list_data_child));

list_parent.add(new ParentData("Parent 2",list_data_child));

list_parent.add(new ParentData("Parent 3",list_data_child));

list_parent.add(new ParentData("Parent 4",list_data_child));

return list_parent;

}

Create ParentData.java File Follow this Code.

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.annotation.SuppressLint;

import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;

import java.util.List;

@SuppressLint("ParcelCreator")
public class ParentData extends ExpandableGroup<ChildData>{

    public ParentData(String title, List<ChildData> items){
        super(title,items);
    }
}

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.annotation.SuppressLint;

import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;

import java.util.List;

@SuppressLint("ParcelCreator")

public class ParentData extends ExpandableGroup<ChildData>{

public ParentData(String title, List<ChildData> items){

super(title,items);

}

Create ChildData.java File Follow this Code.

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.os.Parcel;
import android.os.Parcelable;

public class ChildData implements Parcelable{

    String name;

    public ChildData(Parcel parcel){

        name = parcel.readString();
    }

    public ChildData(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public static final Creator<ChildData> CREATOR = new Creator<ChildData>() {
        @Override
        public ChildData createFromParcel(Parcel in) {
            return new ChildData(in);
        }

        @Override
        public ChildData[] newArray(int size) {
            return new ChildData[size];
        }
    };

    @Override
    public int describeContents() {
        return 0;
    }

    @Override
    public void writeToParcel(Parcel parcel, int i) {
        parcel.writeString(name);
    }
}

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.os.Parcel;

import android.os.Parcelable;

public class ChildData implements Parcelable{

String name;

public ChildData(Parcel parcel){

name = parcel.readString();

}

public ChildData(String name) {

this.name = name;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public static final Creator<ChildData> CREATOR = new Creator<ChildData>() {

@Override

public ChildData createFromParcel(Parcel in) {

return new ChildData(in);

}

@Override

public ChildData[] newArray(int size) {

return new ChildData[size];

}

};

@Override

public int describeContents() {

return 0;

}

@Override

public void writeToParcel(Parcel parcel, int i) {

parcel.writeString(name);

}

Create ParentViewHolder.java File Follow this Code.

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.view.View;
import android.widget.TextView;

import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;
import com.thoughtbot.expandablerecyclerview.viewholders.GroupViewHolder;

public class ParentViewHolder extends GroupViewHolder{

    public TextView textView_parent;

    public ParentViewHolder(View itemView) {
        super(itemView);
        textView_parent = itemView.findViewById(R.id.tv_parent_item);
    }

    @Override
    public void expand() {
        super.expand();
        textView_parent.setCompoundDrawablesWithIntrinsicBounds(0,0,R.drawable.down_arrow,0);
    }

    @Override
    public void collapse() {
        super.collapse();
        textView_parent.setCompoundDrawablesWithIntrinsicBounds(0,0,R.drawable.up_arrow,0);
    }

    public void setGroupName(ExpandableGroup groupName){
        textView_parent.setText(groupName.getTitle());
    }
}

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.view.View;

import android.widget.TextView;

import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;

import com.thoughtbot.expandablerecyclerview.viewholders.GroupViewHolder;

public class ParentViewHolder extends GroupViewHolder{

public TextView textView_parent;

public ParentViewHolder(View itemView) {

super(itemView);

textView_parent = itemView.findViewById(R.id.tv_parent_item);

}

@Override

public void expand() {

super.expand();

textView_parent.setCompoundDrawablesWithIntrinsicBounds(0,0,R.drawable.down_arrow,0);

}

@Override

public void collapse() {

super.collapse();

textView_parent.setCompoundDrawablesWithIntrinsicBounds(0,0,R.drawable.up_arrow,0);

}

public void setGroupName(ExpandableGroup groupName){

textView_parent.setText(groupName.getTitle());

}

Create ChildViewHolders.java File Follow this Code.

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.view.View;
import android.widget.TextView;

import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;
import com.thoughtbot.expandablerecyclerview.viewholders.ChildViewHolder;

public class ChildViewHolders extends ChildViewHolder{

    public TextView textView_child;

    public ChildViewHolders(View itemView) {
        super(itemView);
        textView_child = itemView.findViewById(R.id.tv_child_item);
    }

    public void setChildText(String name){
        textView_child.setText(name);
    }
}

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.view.View;

import android.widget.TextView;

import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;

import com.thoughtbot.expandablerecyclerview.viewholders.ChildViewHolder;

public class ChildViewHolders extends ChildViewHolder{

public TextView textView_child;

public ChildViewHolders(View itemView) {

super(itemView);

textView_child = itemView.findViewById(R.id.tv_child_item);

}

public void setChildText(String name){

textView_child.setText(name);

}

Create MyAdapter.java File Follow this Code.

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;

import com.thoughtbot.expandablerecyclerview.ExpandableRecyclerViewAdapter;
import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;

import java.util.List;

public class MyAdapter extends ExpandableRecyclerViewAdapter<ParentViewHolder,ChildViewHolders>{

    public Context context;

    public MyAdapter(Context context,List<? extends ExpandableGroup> groups) {
        super(groups);
        this.context = context;
    }

    @Override
    public ParentViewHolder onCreateGroupViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.item_parent,parent,false);

        return new ParentViewHolder(view);
    }

    @Override
    public ChildViewHolders onCreateChildViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.item_child,parent,false);

        return new ChildViewHolders(view);
    }

    @Override
    public void onBindChildViewHolder(ChildViewHolders holder, int flatPosition, ExpandableGroup group, int childIndex) {
        final ChildData childData = ((ParentData)group).getItems().get(childIndex);
        holder.setChildText(childData.getName());
        holder.textView_child.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

                Toast.makeText(context, "Selected : " + childData.getName(), Toast.LENGTH_SHORT).show();

            }
        });

    }

    @Override
    public void onBindGroupViewHolder(ParentViewHolder holder, int flatPosition, ExpandableGroup group) {

        holder.setGroupName(group);

    }
}

package com.example.bhaumik.expandablerecyclerviewdemo;

import android.content.Context;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.Toast;

import com.thoughtbot.expandablerecyclerview.ExpandableRecyclerViewAdapter;

import com.thoughtbot.expandablerecyclerview.models.ExpandableGroup;

import java.util.List;

public class MyAdapter extends ExpandableRecyclerViewAdapter<ParentViewHolder,ChildViewHolders>{

public Context context;

public MyAdapter(Context context,List<? extends ExpandableGroup> groups) {

super(groups);

this.context = context;

}

@Override

public ParentViewHolder onCreateGroupViewHolder(ViewGroup parent, int viewType) {

LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View view = inflater.inflate(R.layout.item_parent,parent,false);

return new ParentViewHolder(view);

}

@Override

public ChildViewHolders onCreateChildViewHolder(ViewGroup parent, int viewType) {

LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View view = inflater.inflate(R.layout.item_child,parent,false);

return new ChildViewHolders(view);

}

@Override

public void onBindChildViewHolder(ChildViewHolders holder, int flatPosition, ExpandableGroup group, int childIndex) {

final ChildData childData = ((ParentData)group).getItems().get(childIndex);

holder.setChildText(childData.getName());

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

@Override

public void onClick(View view) {

Toast.makeText(context, "Selected : " + childData.getName(), Toast.LENGTH_SHORT).show();

}

});

}

@Override

public void onBindGroupViewHolder(ParentViewHolder holder, int flatPosition, ExpandableGroup group) {

holder.setGroupName(group);

}

In this Example of Create Expandable recyclerView. in this recyclerView create two layout file parent and child. and then different different view holder in this layout file. i have create getter setter data in different different class in parent view and child view.and then create Expandable adapter class in implements library.

now this adapter to different different method override in parent and child view. in this two layout file bind in adapter and then set the list data and send the list in adapter. now you can click parent view to dispaly child view and i have put the arrow drawable to click listener to set and maintain drawable icon you can click collapse and expand.