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

Houssem Ben Othmen — Wed, 03 Jan 2018 11:16:05 +0000

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'

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>

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>

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>

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>

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);
    }
}

ParentList.java


public class ParentList extends ExpandableGroup<ChildList> {



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

}

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());
    }


}

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);

    }


}

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();
                    }
                });

            }
        }


    }




}

The expected final result will be like this .

Happy Coding!

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

Houssem Ben Othmen — Wed, 03 Jan 2018 11:14:47 +0000

This is a step-by-step guide for how to create Recycleview expandable list on android studio and to create firebase project using realtime database.

Let’s start with Firebase.

Step 1

Create new project in Firebase

Click on Get Started than add project. A small window will appear; put your project's name then click create project. In the next page, choose your project's app: ios , android or web. In this example, android app is selected.

In order to continue to the next step, a new project on android studio should be created. Fill in the box with the name of package android studio created.

Next, download the json file and follow the instructions.

finally, add the firebase SDK in android studio.

Step 2

Config Rules of Database

Go to the database, choose Realtime database then open rules page.

Two rules will appear : read and write. If you want to read data, you need to change the value of read to true as illustrated below:

Note : if you want to add data with your application you need to change the value of write to true

Step 3

Creating Data

When you move to the page "Data" you will find a node which contains a reference to your database .

In order to add a new child, press on the box "+". a new row will appear with two empty text boxes; one for the name and the other for the value. To add a new child, you need to fill in only the name's box and leave the value's box empty then press "+".
Note: in case of filling in the two boxes (name and value), the "+" box will disappear.

Now, fill in the both boxes .

Repeat the previous steps until you make a similar database:

Once done ,move to the next part .

DEV Community: Houssem Ben Othmen

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

Add Expandable Recycler View SDK

Step 4

Add Internet permission

Step 4

Creating the layout

Step 5

Writing code

Step3

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

Step 1

Create new project in Firebase

Step 2

Config Rules of Database

Step 3

Creating Data