Custom ListView With Image And Text


Download Custom ListView with Image and Text sample

In custom ListView tutorial, we are going to demonstate an android ListView with Image and Text. When a list item clicked, then showing item's detail in Toast.

Customer is my model class, which I am going to use for demonstration.

Customer.java

Now, let's create CustomerAdapter class that extends ArrayAdapter as follows:

We must call a public constructor of ArrayAdapter from our constructor, as I did.

How to customize rows in custom ListView?

To customize Android Spinner we need to do 2 things:

  1. We must specify arow layout, how we want to display rows in ListView
  2. We must override getView method in our adapter class
I created a customer_row.xml under res ->layout, code of customer_row.xml is given below:

Here is screenshot, how above layout looks like:

Android ListView row

Our next step is to override getView method in CustomerAdapter. This method is called for every List item one by one and this method defines how a row listView will look a like.

Here is source of these 2 methods:

I wanted to display odd and even row in different color so I implemented my logic in initView method.

How to handle item click event of a ListView?


To handle item click event of ListView, we need to implement AdapterView.OnItemClickListener and override onItemClick method as follows:

Custom ListView example


In this example, we are going to demonstrate ListView with Image and Text.

Result

Custom spinner

Step 1: Create a new project in Android Studio and name it Custom ListView.

Step 2: Open res -> layout -> activity_main.xml and add following code

activity_main.xml

Step 3: Open res -> values -> strings.xml and replace it with below given code.

strings.xml

Step 4: Open your res ->values ->colors.xml and replace it's code with below given code of my colors.xml as follows:

colors.xml

Step 5: Create a new layout resource under res -> layout named customer_row.xml. Replace the code of customer_row.xml with below given code.

customer_row.xml

Step 6: Create a class Customer.java and replace it's code with below given code of my Customer.java as follows:

Customer.java

Step 7:Create a class CustomerAdapter.java and replace it's code with below given code of my CustomerAdapter.java as follows:

CustomerAdapter.java

Step 8: Open your MainActivity.java and replace it's code with below given code of my MainActivity.java as follows:

MainActivity.java

Step 9: Clean and run the project to see the result.


Share & Like

Tutorial topics

About ApnaTutorials.com

ApnaTutorials.com is for Java, J2ee, Html5 and android developers. All tutorials are well explained and are easy to understand. We have tested every tutorials on our developement environment before posting it in public domain.