Android: Creating Custom ListView for Beginners

After you get your hands on Android, you will find the most useful widget is the ListView. You may also feel that it’s required on every activity. Android being Open-Source, it is the most flexible mobile platform out there. Everyone, wants to customize it according to their taste. You would hardly see an app that uses the default look and feel of the widgets. But with flexibility comes complexity.
You can judge the importance of the ListView widget by the fact that there was a complete session in Google I/O on ListViews. A ListView can take any shape from a colorful contact list in whatsapp to a text filled tweet in twitter.

Unlike other tutorials, I want this article to be more general and I would try my best so that you can create a listview according to your needs rather than just a custom listview developed in this article.

By default android renders only a single TextView in each of the ListView’s row and binds string data through an adapter. But you can customize the ListView’s row and place your own widget items in it and then bind data through your own custom adapter.

First create a simple layout and declare a ListView in it. You can also place other components in this layout if you want, like a TextView to give some heading or information.
main.xml

 

Now we will create the layout for listview row. This will be the layout in which you can customize your list row. This will be re-inflated every time a new entry is made to the listview. The widgets in this layout will depend on your requirement, like if you are developing a contact list then you will only need a ImageView and TextView or if you are developing a songs list then you might consider adding another TextView for the artist name apart from album icon and album name.

For this tutorial I made something like a message app which includes a ImageView and 4 TextViews in each list item. Here is the xml layout for the same.

list_item_message.xml

 

Now we will create a simple class that would help us in binding data and getting the reference to a particular component’s value in each row.

       public class MessageDetails {
            int icon ;
            String from;
            String sub;
            String desc;
            String time;

            public String getName() {
                return from;
            }

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

            public String getSub() {
                return sub;
            }

            public void setSub(String sub) {
                this.sub = sub;
            }

            public int getIcon() {
                return icon;
            }

            public void setIcon(int icon) {
                this.icon = icon;
            }

            public String getTime() {
                return time;
            }

            public void setTime(String time) {
                this.time = time;
            }

            public String getDesc() {
                return desc;
            }

            public void setDesc(String desc) {
                this.desc = desc;
            }
        }

Next up is the brain of our ListView, yes our very own Custom Adapter.

 

Our custom adapter takes in a ArrayList of our MessageDetails class and a context as parameters. You can easily notice that all the work is done by the getView method which is called every time a list item is instantiated.
It returns a View corresponding to the data at the specified position. Here ViewGroup is the parentView i.e the ListView. We check if the convertView is not null which helps android to re-use the old View and reduce battery consumption.
I have used app’s icon as the image for all my list item but you can use your own algorithm.

Now we are ready with the setup, we just need to fill our data into the ListView. So here’s the onCreatemethod:

public class Messages extends Activity {
ListView msgList;
ArrayList<MessageDetails> details;
AdapterView.AdapterContextMenuInfo info;

@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

msgList = (ListView) findViewById(R.id.MessageList);

details = new ArrayList<MessageDetails>();

MessageDetails Detail;
Detail = new MessageDetails();
Detail.setIcon(R.drawable.ic_launcher);
Detail.setName(“Bob”);
Detail.setSub(“Dinner”);
Detail.setDesc(“Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor.”);
Detail.setTime(“12/12/2012 12:12”);
details.add(Detail);

Detail = new MessageDetails();
Detail.setIcon(R.drawable.ic_launcher);
Detail.setName(“Rob”);
Detail.setSub(“Party”);
Detail.setDesc(“Dolor sit amet, consectetur adipiscing elit. Nulla auctor.”);
Detail.setTime(“13/12/2012 10:12”);
details.add(Detail);

Detail = new MessageDetails();
Detail.setIcon(R.drawable.ic_launcher);
Detail.setName(“Mike”);
Detail.setSub(“Mail”);
Detail.setDesc(“Lorem ipsum dolor sit amet, consectetur adipiscing elit.”);
Detail.setTime(“13/12/2012 02:12”);
details.add(Detail);

msgList.setAdapter(new CustomAdapter(details , this));
}