Hands On Expandable List Views

“Expand Knowledge with Necessity”

Expandable List View— Where to use?

This is the basic ideology behind a very wonderful concept in mobile application development. Expandable List Views is an enhanced list and recycler view which follows parent and child relationship. In mobile screens sometimes it becomes too much overwhelming to concise all the data on the same page. It makes the UI boring and sometimes makes it difficult to understand it.

The catch for this is this life savior expandable list view which shows the data to only to the extend the user is interested in it. Let’s understand this concept with examples.

A good example, to start with, is the FAQ section. Frequently Asked Questions (or FAQ) is a section where one wants to answer the common queries that the user has with the topic. But it doesn’t mean that the user is interested in knowing the answers to all the questions. It would appear pretty lame to show all the questions and their answers at the same time. The app scroll view would become immensely large if the answers are long and the user would find it difficult to locate specific questions of interest. In this case we should prefer expandable recycler view instead of simple recycler view. This way at first the user will locate the question that he was looking for and then find the answer to it by expanding it.

In a nutshell we can concise more data and show only those details that interests the user.

Hope I have made it clear that when should one use expandable List View. Now let’s Try Building Expandable List View of an FAQs section in an App at first and then I will let you know some cool libraries that you might want to use to make the Expandable List View Look Really Awesome.

I am adding the preview of code snippets for your convenience and am linking my Git hub repository that contains all the code snippets shown ahead.

https://github.com/Pranshu-Tripathi/ExpandableListView

Be patient and follow all the steps and at the end you will be seeing this on your app screen :

Let’s begin.

NOTE : Each code snippet images shown ahead have links to the git hub repo where you can directly access the code.

STEP 1:

Create an android studio project and get it all setup. Now, let’s add expandable list view to your project.

STEP 2:

Lets update your activity_main.xml file first.

main_activity.xml

STEP 3:

Create bg_answer.xml and bg_question.xml files that would show in the background of the ELV (Expandable List View).

bg_question.xml

• First go to drawable -> right click -> new drawable resource file -> bg_question.xml , and add the above piece of code in the newly created file.

bg_answer.xml

• Now go to drawable -> right click -> new drawable resource file -> bg_answer.xml , and add the above piece of code in the newly created file.

STEP 4:

Create exp_list_header.xml and exp_list_body.xml. These two files will setup the views that we want to have in the header of the ELV (i.e. questions text) and in the body of ELV (i.e. answers text).

exp_list_header.xml

• Go to layout->right click-> New Layout Resource File-> exp_list_header.xml , and add this code in that file.

exp_list_body.xml

• Go to layout->right click-> New Layout Resource File-> exp_list_body.xml , and add this code in that file.

If you have reached till here then it’s great as you have finished with the UI design segment of the ELV. Now let’s do some coding in Java.

STEP 5:

Create a new java class named ExpandableListViewApadtor.java. This class has the main motive of linking our data to the expandable list that is declared in the activity_main.xml.

ExpandableListViewAdaptor.java

This is the messiest part but necessary to do. Let us understand this part a bit.

Let’s see what all things are passed in the constructor and why?

1. context -> This is necessary for the adaptor to know where it has to inflate the data.

2. dataHeader -> This array list is storing strings as the heading of our data. (here it is questions set)

3. listHashMap -> This is a map of all the questions with their answers linked to it. Here we have List of strings mapped to a single string because we can have multiple answers to a question.

If you are unaware of Hash maps, then you will find this link, very helpful.

getChildView and getGroupView are the main functions where we inflate our layout and link data to it. We have parameters like groupPosition and childPosition to very well link the data to headings and body.

Rest of the functions are pretty self explanatory.

Congratulations on successfully understanding and implementing the toughest step. Now we are one step away from seeing the list view on our app.

STEP 6:

Add the expandable List View to MainActivity.java and add data that is to be linked in the Adaptor Class.

MainActivity.java

In initialize, you can add your own questions. Here, I have added some random questions.

Now run your app to see this screen:

Finally Accomplished App

Congratulations on completing your tutorial of Expandable List View. This was a quite easy one.

Here are some more exciting Expandable Lists That I have made :

Some of my UI Designs

Also you can visit this video to know about the UI of T-Commerce App.

UI Of T-Commerce Explained Here.

Hope this helped you guys. For any queries regarding this tutorial, feel free to comment. And as promised, I am including an open source library in the References, that you can use to make exciting ELV.

References

diegodobelo/AndroidExpandingViewLibrary

Pranshu-Tripathi/ExpandableListView