ExpandableListView on Android

ListView is pretty widely used. There are situations when you would like to group/categorize your list items. To achieve such a thing on Android, you would probably use the ExpandableListView. The data to the ExpandableListView is supplied by a special kind of adapter called the SimpleExpandableListAdapter which extends the BaseExpandableListAdapter.

As with any other widget on Android, you are free to customize the widgets as per your needs. Here, I will show how to create such a custom list adapter for the ExpandableListView.

For this example, I want to show a list of vehicles with their names. Also, I want to group them according to their category.

I have 4 classes.
1. Vehicle : The parent class for the rest.
2. Car: Extends the Vehicle class.
3. Bus: Extends the Vehicle class.
4. Bike: Extends the Vehicle class.

I have a method called getRandomVehicle(String name) which returns a random vehicle instance setting the name that I pass. The vehicle can be a Bus, Car or a Bike. Its completely random.

In the ExpandableListAdapter, (the custom adapter), there's a method called addItem(Vehicle vehicle), which manages the groups and their children.

In the SampleActivity, I have initialized a blank ExpandableListAdapter and set it to the list view. Now, I start a thread, which gets a random vehicle after every 2 seconds, and adds it to the adapter, and calls the adapter to notify that the data has changed.

There are a few methods, in the ExpandableListAdapter, which you should go through carefully. I have two layout files, group_layout.xml and child_layout.xml which are used as the layout for the group views and the child views of the ExpandableListView.

There you go, you have a custom ExpandableListView. You can find the full source code for this example here, ready to run.

There are some more methods that you might be interested in, like, how to change the "arrow icon" for the group views(official doc link), or how to expand or collapse a group at will, or how to handle specific events like group collapsed or group expanded. Read the docs on ExpandableListView.

A Custom ListView for Android

I have been thinking about starting a new blog for Android stuff for quite a long time. And today, I found some time for the same. So here goes my first post. This is about developing your own custom list view. The List View is a very powerful UI element for the android platform. And it provides a lot of customizing features as well. Let’s jump into the details right away.
For this example, I will be using an example for a phone book entry, with the contacts having basic information like “name”, “phone” and “email”.

Step 1: Lets create a POJO class for the phone book.
Class name : Phonebook.java
Not a complex code. Just the three fields, a constructor and the getters and setters. That’s it.
Step 2: Lets create the layout that each row of the List View is going to look like. I prefer to do this layout in xml rather than through coding/programmatically. xml stuff is pretty easy to develop.
File name : phone_row.xml 

This layout has three Text Views, tvContact, tvMobile and tvMail which we will be using in our code. We don’t need to touch any other elements from this file, if you should have to edit this xml, do it carefully.

Step 3: Now, lets create a class which our custom adapter will be calling to render each row of the List View. Here, we need the layout file created in Step 2. This class should extend any layout type, e.g, LinearLayout, TableLayout, etc. In my example, I am using a LinearLayout.

Class name : PhonebookAdapterView.java
In this class, create a constructor with two parameters, Context and the Pojo class Phonebook. And, inside the constructor, set the fields to the text views. The “this.setTag(entry)” will enable us to get info on the phonebook entry, when we use the listener for List View.

Update: I have deleted this class from the example, and have used the efficient way recommended for ListView. Checkout out the code.

Step 4: Now, create the Phonebook adapter class which extends the BaseAdapter. This will be used to set a list of Phonebook items to the list view with our customized layout.

Class name : PhonebookAdapter.java
This class has a bit of coding, and changes to be made in the default methods that comes in when you extend the BaseAdapter class, however it is simple enough. A new constructor and two new private members is all that you have to include.
Override the methods as given in the code. The method getView is the important one. Here, we call our PhonebookAdapterView class.

Now, you are done. Your custom list view has been created. The final step would be testing the custom list view. Just create and activity with a listview. Then create an instance of the PhonebookAdapter class passing the parameters (Context and list of Phonebook objects)

Then, set this adapter to the list view. You are done. Here is the output.
Here is the link where you can find all the source code as an Android Project (1.5 compatible).

 Full source code is here.

Update: I have updated the example, to include a button on each line item, which when clicked, removes that item from the List View.