Create Custom ListView

ListView is one of the interesting and complicated viewgroups in Android. ListView contains a collection of scrollable list items. In this post I am going to explain how to create a custom ListView, which contains images and texts.

Step 1: Create a new Project named MyCustomListView

Refer: How to Create and Run Your First Android Project

Step 2: Create listview_screen.xml

Create a xml file named as listview_screen.xml under res/layout. This file is the screen layout that contains our custom listview.

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

<linearlayout 
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_height="fill_parent" android:layout_width="fill_parent" 
android:orientation="vertical">

    <listview android:id="@+id/myCustomListView" 
    android:layout_height="wrap_content" 
    android:layout_width="fill_parent">
    </listview>

</linearlayout>

Step 3: Create custom_listview_item.xml

Here you will create a xml file named custom_listview_item.xml under res/layout. This layout file  determines the contents of each listitem within our listview. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/image_listitem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"/>

    <TextView
        android:id="@+id/text_listitem"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginLeft="20dp"
        android:text="dfdfdf"
        />

</LinearLayout>

Step 4: Create CustomListAdapter class

Next you have to create a custom list adapter class extended from BaseAdapter. This custom adapter class is used to set as the adapter of our custom ListView.

import java.util.ArrayList;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomListAdapter extends BaseAdapter{

 Context _context;
 private ArrayList<String> _list;  

 public CustomListAdapter(Context context, 
                             ArrayList<String> listItems) {
  _context= context;
  _list = listItems; 
 }

 public int getCount(){
  return _list.size();
 }
 
 public long getItemId(int position){
  return position;
 }

 public Object getItem(int position){
  return _list.get(position);
 } 

 //this function will be called to draw each row 
        //for the listview
 public View getView(int position,View convertView,ViewGroup parent){
   ViewContainer container = new ViewContainer();       

   if(convertView == null){  
  LayoutInflater inflater = LayoutInflater.from(_context);
  convertView = inflater.inflate(R.layout.custom_listview_item,parent, false);
  convertView.setTag(container); 
  container.listIcon = (ImageView)convertView.findViewById(R.id.image_listitem);
  container.listText = (TextView)convertView.findViewById(R.id.text_listitem);     

 }
 container = (ViewContainer) convertView.getTag();
 ImageView myListIcon = container.listIcon;
 TextView myListText = container.listText;

 myListIcon.setBackgroundDrawable(_context.getResources().getDrawable(R.drawable.list_icon));
 myListText.setText(_list.get(position));
 

 container = null;
 return convertView;
  }
  private class ViewContainer{
 private ImageView listIcon; 
 private TextView listText;
  }
}

Step 5: Create MyCustomViewActivity class

Finally, you need to create MyCustomViewActivity class extended from Activity, where we will set the custom adapter to our listview.

import java.util.ArrayList;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;

public class MyCustomListViewActivity extends Activity {   

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.listview_screen);       

        ArrayList<String> arrListItems = new ArrayList<String>();
        arrListItems.add("ListItem1");
        arrListItems.add("ListItem2");
        arrListItems.add("ListItem3");
        arrListItems.add("ListItem4");
        arrListItems.add("ListItem5");
                       
        ListView listView = (ListView)findViewById(R.id.myCustomListView);
        listView.setAdapter(new CustomListAdapter(this, arrListItems));         
    }
}

That's it.. now you need to just run the project and you will see the output as follows.

Cheers,
Have a nice day. View Complete List of Tips