Binding Android ListView with Custom Objects using ArrayAdapter

In my previous tutorial Binding Android ListView with String Array using ArrayAdapter, I have shown you how you can bind the Android ListView control with an array of String objects. Although it was a very simple implementation, but it was useful for those who are just starting learning Android application development. As an Android developer, soon you will realize that showing simple Strings in the ListView is not what you exactly want in real-world  Android Apps, and you will often find yourself dealing with collections  of custom Java objects. In this tutorial, I have decided to show you how you can bind Android ListView with custom objects using ArrayAdapter.

Create a new Android project in Eclipse with MainActivity as your default Activity and main.xml as your default layout file. Declare a ListView control in your main.xml layout file as shown in the following code.

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">
    
   <ListView 
      android:id="@+id/listView1" 
      android:layout_height="fill_parent"
      android:layout_width="fill_parent" />

</LinearLayout>

The above code is using simple LinearLayout with vertical orientation, and a ListView is declared to cover the entire width and height of the parent container using the fill_parent as the value of both android:layout_height and android:layout:width properties. ListView also has a unique id listView1 that will be used in the MainActivity to reference the ListView control.

Before I show you the MainActivity code, you need to create a java class whose objects you will bind with the ListView. Add a new class Product in your Android project and add the following code in it.

Product.java

public class Product {
    private int id;
    private String name;
    private double price;
    
    public Product(){
        super();
    }
    
    public Product(int id, String name, double price) {
        super();
        this.id = id;
        this.name = name;
        this.price = price;
    }

    @Override
    public String toString() {
        return this.id + ". " + this.name + " [$" + this.price + "]";
    }
}

The MainActivity code is shown below first access the ListView control by passing the generated id to findViewById function. Then the array of Product objects is defined and passed as a parameter to the constructor of ArrayAdapter. Finally, the adapter is provided to ListView using setAdapter function available in ListView class. You may be wondering how the ListView will display the Product object and which property of the Product object will be displayed. The answer is very simple, by default Android ListView control renders a simple TextView inside every ListView item and TextView control can only display simple text. Notice how the toString() function is overridden in the Product class we defined above. Whatever String you will return from the object toString() function will be displayed in the TextView rendered in the ListView items.

MainActivity.java

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        ListView listView1 = (ListView) findViewById(R.id.listView1);
        
        Product[] items = { 
            new Product(1, "Milk", 21.50), 
            new Product(2, "Butter", 15.99), 
            new Product(3, "Yogurt", 14.90), 
            new Product(4, "Toothpaste", 7.99), 
            new Product(5, "Ice Cream", 10.00), 
        };
        
        ArrayAdapter<Product> adapter = new ArrayAdapter<Product>(this,
                    android.R.layout.simple_list_item_1, items);
        
        listView1.setAdapter(adapter);
    }
}

Run your project and you will be able to see the following output.