DEV Community

Cover image for How to make an Expandable Recyclerview list and Firebase database - Part 2
Houssem Ben Othmen
Houssem Ben Othmen

Posted on • Edited on

How to make an Expandable Recyclerview list and Firebase database - Part 2

By the end of this part you will learn how to make an expandable recycler view list using android studio .

Add Expandable Recycler View SDK

Step 4

go to project/app/Build.gardl.xml

dependencies {
    ...
    })
// Material Desgin 
compile 'com.android.support:design:26.+'

//Expandable Recycler View 
compile 'com.thoughtbot:expandablerecyclerview:1.3'

//Firebase appluy
compile 'com.google.firebase:firebase-database:9.8.0'
}
apply plugin: 'com.google.gms.google-services'
Enter fullscreen mode Exit fullscreen mode

Add Internet permission

Step 4

To make internet availble on your app you need first to add a permission in project/app/src/main/AndroidManifest.xml .

<manifest ...>

<uses-permission android:name="android.permission.INTERNET" />

<application ...>
        ...
    </application>
</manifest> 

Enter fullscreen mode Exit fullscreen mode

Creating the layout

Step 5

activity_main.xml

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

    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#FFFFFF"
    >

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

</LinearLayout>

Enter fullscreen mode Exit fullscreen mode

Item_parent.xml

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

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="2dp"
    android:paddingBottom="2dp"
    >

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="#9E9E9E"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"

        >
    <TextView
        android:id="@+id/listParent"
        android:text="text"
        android:textSize="15dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="45dp"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="2dp"
        android:layout_marginBottom="45dp"
        android:textColor="#000000"

        />
    </LinearLayout>
</LinearLayout>
</LinearLayout>
Enter fullscreen mode Exit fullscreen mode

item_child.xml

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


<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="3dp"
    android:paddingBottom="3dp"
    >

<LinearLayout

    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="wrap_content"
    android:background="#E0E0E0"
    android:divider="#FFFFFF"
    android:showDividers="middle"
    android:dividerHeight="2px"
    >
    <TextView

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listChild"
        android:textSize="16dp"
        android:text="text"
        android:layout_margin="25dp"
        android:layout_gravity="center"
        android:textColor="#000000"

        />
</LinearLayout>
</LinearLayout>
Enter fullscreen mode Exit fullscreen mode

Writing code

Step3

ChildList.java


public class ChildList implements Parcelable {

    private String title;


    public ChildList(String title) {
        this.title = title;
    }

    protected ChildList(Parcel in) {
        title = in.readString();
    }

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

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

    public String getTitle() {
        return title;
    }

    public void setTitle(String Title) {
        this.title = Title;
    }

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

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

Enter fullscreen mode Exit fullscreen mode

ParentList.java


public class ParentList extends ExpandableGroup<ChildList> {



    public ParentList(String title, List<ChildList> items) {
        super(title, items);
    }

}
Enter fullscreen mode Exit fullscreen mode

MyParentViewHolder.java


public class MyParentViewHolder extends GroupViewHolder {

    public TextView listGroup;

    public MyParentViewHolder(View itemView) {
        super(itemView);
        listGroup = (TextView) itemView.findViewById(R.id.listParent);
    }

    public void setParentTitle(ExpandableGroup group) {
        listGroup.setText(group.getTitle());
    }


}
Enter fullscreen mode Exit fullscreen mode

MyChildViewHolder.java


public class MyChildViewHolder extends ChildViewHolder {

   public TextView listChild;

    public MyChildViewHolder(View itemView) {
        super(itemView);
        listChild = (TextView) itemView.findViewById(R.id.listChild);

    }

    public void onBind(String Sousdoc) {
        listChild.setText(Sousdoc);

    }


}
Enter fullscreen mode Exit fullscreen mode

MainActivity.java



public class MainActivity extends AppCompatActivity {

    private RecyclerView recycler_view;

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

        //Define recycleview
        recycler_view = (RecyclerView) findViewById(R.id.recycler_Expand);
        recycler_view.setLayoutManager(new LinearLayoutManager(this));

        //Initialize your Firebase app
        FirebaseDatabase database = FirebaseDatabase.getInstance();

        // Reference to your entire Firebase database
        DatabaseReference parentReference = database.getReference();

    //reading data from firebase
     parentReference.addValueEventListener(new ValueEventListener() {
            @Override
            public void onDataChange(DataSnapshot dataSnapshot) {
                final List<ParentList> Parent = new ArrayList<>();
                for (final DataSnapshot snapshot : dataSnapshot.getChildren()){


               final String ParentKey = snapshot.getKey().toString();

                  snapshot.child("titre").getValue();

                 DatabaseReference childReference = 
                  FirebaseDatabase.getInstance().getReference().child(ParentKey);
                    childReference.addValueEventListener(new ValueEventListener() {
                        @Override
                        public void onDataChange(DataSnapshot dataSnapshot) {
                            final List<ChildList> Child = new ArrayList<>();


                  for (DataSnapshot snapshot1:dataSnapshot.getChildren()) 
                       {
                         final String ChildValue =  snapshot1.getValue().toString();

                                   snapshot1.child("titre").getValue();

                                    Child.add(new ChildList(ChildValue));

                            }

                                Parent.add(new ParentList(ParentKey, Child));

   DocExpandableRecyclerAdapter adapter = new DocExpandableRecyclerAdapter(Parent);

     recycler_view.setAdapter(adapter);

                        }

                  @Override
          public void onCancelled(DatabaseError error) {
           // Failed to read value
             System.out.println("Failed to read value." + error.toException());
                        }

                    });}}

            @Override
            public void onCancelled(DatabaseError databaseError) {

            }
        });

    }



    public class DocExpandableRecyclerAdapter extends ExpandableRecyclerViewAdapter<MyParentViewHolder,MyChildViewHolder> {


        public DocExpandableRecyclerAdapter(List<ParentList> groups) {
            super(groups);
        }

        @Override
        public MyParentViewHolder onCreateGroupViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_parent, parent, false);
            return new MyParentViewHolder(view);
        }

        @Override
        public MyChildViewHolder onCreateChildViewHolder(ViewGroup parent, int viewType) {
            View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_child, parent, false);
            return new MyChildViewHolder(view);
        }

        @Override
        public void onBindChildViewHolder(MyChildViewHolder holder, int flatPosition, ExpandableGroup group, int childIndex) {

            final ChildList childItem = ((ParentList) group).getItems().get(childIndex);
            holder.onBind(childItem.getTitle());
            final String TitleChild=group.getTitle();
            holder.listChild.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    Toast toast = Toast.makeText(getApplicationContext(), TitleChild, Toast.LENGTH_SHORT);
                    toast.show();
                }

            });

        }

        @Override
        public void onBindGroupViewHolder(MyParentViewHolder holder, int flatPosition, final ExpandableGroup group) {
            holder.setParentTitle(group);

            if(group.getItems()==null)
            {
                holder.listGroup.setOnClickListener(  new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {

                        Toast toast = Toast.makeText(getApplicationContext(), group.toString(), Toast.LENGTH_SHORT);
                        toast.show();
                    }
                });

            }
        }


    }




}

Enter fullscreen mode Exit fullscreen mode

Alt text of image

The expected final result will be like this .

Alt Text

Happy Coding!

Top comments (3)

Collapse
 
roigarlitos profile image
roi garlitos

i am getting an error on the onBindChildViewHolder method inside the DocExpandableRecyclerAdapter. The error is holder.onBind(childItem.getTitle());
the error is onBind and holder.listchild.setOnClickListener, listchild is the error it cant find those two even though i decrlared them correctly according to your tutorial.

Collapse
 
firstspectr profile image
Sergey

Can I add another one paren-child instead child?

Collapse
 
zehraka53396487 profile image
ZEHRA KARAHAN

Can you help emergency?