Android Custom ListView with Images and text example

In previous post, we have seen simple android ListView example. In this post, we are going to see Android Custom ListView example.
So we will create custom ListView in which each list item will have Country flag, Country name and its capital in different font size as below.

It is widely used in android apps to list number of items and select one or more items from the list.

Source code:

Step 1 :Creating Project

Create an android application project named “CustomListViewExampleApp”.

💻 Awesome Tech Resources:
  • Looking for ⚒️ tech jobs? Go to our job portal.
  • Looking for tech events? Go to tech events 🗓️ Calendar.️

Step 2 : Creating Layout

Change res ->layout -> activity_main.xml as below:

You will see below screen in design view.

Step 3: Creating layout for Row

As We have declared ListView widget in activity_main.xml. Now we need to provide layout for individual row.
  • Go to res -> layout
  • right click on layout
  • Click on New -> File.
  • Create a file named “row_item.xml” and paste below code in row_item.xml.

Step 4 :  Creating ArrayAdapter for ListView

Before creating MainActivity, we need to create CustomCountryList class for custom ListView row.
This class is used to populating data for ListVIew. getView method is get called for drawing each row.

Step 5 : Creating MainActivity

Change src/main/packageName/ as below:

If you notice, we have extended to ListActivity for this class. ListActivity class provides some methods specific to ListView.
We have declared three arrays to take care of Country textView, Capital textView and flag ImageView and customCountryList is being used to populate data in ListView.

As we have added textView to ListView as header in above code thats why we have used countryNames[position-1] while setting toast text, if you don’t use header then it should be countryNames[position].

Step 6: Put images in drawable folder

Download source code, locate res -> drawable and put images in your application ‘s res -> drawable folder.

Step 7 : Running the app

When you run the app, you will get below screen:

When you click on Bhutan list item, you will get below screen:

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *

Subscribe to our newletter

Get quality tutorials to your inbox. Subscribe now.