Create a Custom ListView

This blog helps to create a custom list view.

Steps to create a Custom List View

1. Create Layout for your listview

2. Create a class which extend the ArrayAdapter

3. Assign the Values to View.

4. Implement the Custom Adapter in the mainactivity

Create Layout for your listview

This layout are used to show the listview as a each view. You can add the multiple view in that. In this example i have added only one textview and change the property.

Sample layout [customlistview.xml]

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:background="#FF04FF" android:layout_width="fill_parent"

android:layout_height="wrap_content">

<TextView android:text="@+id/TextView01" android:id="@+id/TextView01"

android:textColor="#FFFFFF" android:textSize="25px"

android:layout_height="fill_parent" android:layout_width="fill_parent"></TextView>

</LinearLayout>

Create a class which extend the ArrayAdapter & Assign the Values to View.

• This class should extend the ArrayAdapter.

• Create a parametrized constructor which pass the Context Object, CustomLayout ID as a integer value and Items as a arraylist.

• Override getView() and assign the values in that.

Sample Custom Array Adapter Class [as a class member of mainactivity]

private class OrderAdapter extends ArrayAdapter<Order> {

private ArrayList<Order> items;

public OrderAdapter(Context context, int resource, ArrayList<Order> items) {

super(context, resource, items);

this.items = items;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

View v = convertView;

if (v == null) {

LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

v = vi.inflate(R.layout.customlistview, null);

}

Order o = items.get(position);

if (o != null) {

TextView tt = (TextView) v.findViewById(R.id.TextView01);

if (tt != null) {

tt.setText("Name: " + o.getTitleName());

}

}

return v;

}

}

Implement the Custom Adapter in the mainactivity

• Create a Instance for the custom Adapater class and ArrayList

  OrderAdapter customAdapter;

ArrayList<Order> orderList;

• get the List of Items

orderList = new ArrayList<Order>();

orderList.add(new Order("first"));

orderList.add(new Order("second"));

orderList.add(new Order("third"));

customAdapter = new OrderAdapter(this, R.layout.customlistview,

orderList);

ListView l = (ListView) findViewById(R.id.ListView01);

l.setAdapter(customAdapter);

Sample Source

MainActivity.java

public class MainActivity extends Activity {

/** Called when the activity is first created. */

OrderAdapter customAdapter;

ArrayList<Order> orderList;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

orderList = new ArrayList<Order>();

orderList.add(new Order("first"));

orderList.add(new Order("second"));

orderList.add(new Order("third"));

customAdapter = new OrderAdapter(this, R.layout.customlistview,

orderList);

ListView l = (ListView) findViewById(R.id.ListView01);

l.setAdapter(customAdapter);

}

private class OrderAdapter extends ArrayAdapter<Order> {

private ArrayList<Order> items;

public OrderAdapter(Context context, int resource,

ArrayList<Order> items) {

super(context, resource, items);

this.items = items;

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

View v = convertView;

if (v == null) {

LayoutInflater vi = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

v = vi.inflate(R.layout.customlistview, null);

}

Order o = items.get(position);

if (o != null) {

TextView tt = (TextView) v.findViewById(R.id.TextView01);

if (tt != null) {

tt.setText("Name: " + o.getTitleName());

}

}

return v;

}

}

}

Order.java

public class Order {

public Order(String titleName) {

this.titleName = titleName;

}

private String titleName;

public String getTitleName() {

return titleName;

}

public void setTitleName(String titleName) {

this.titleName = titleName;

}

}

main.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical" android:layout_width="fill_parent"

android:layout_height="fill_parent">

<TextView android:layout_width="fill_parent"

android:layout_height="wrap_content" android:text="@string/hello" />

<ListView android:id="@+id/ListView01" android:layout_height="fill_parent"

android:layout_width="fill_parent"></ListView>

</LinearLayout>

customlistview.xml

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:background="#FF04FF" android:layout_width="fill_parent"

android:layout_height="wrap_content">

<TextView android:text="@+id/TextView01" android:id="@+id/TextView01"

android:textColor="#FFFFFF" android:textSize="25px"

android:layout_height="fill_parent" android:layout_width="fill_parent"></TextView>

</LinearLayout>