android custom list view

Android Custom ListView Tutorial with ImageView and TextViews using Android Studio

Note: Android RecyclerView is the most advanced version of ListView. You can refer to the article on Android RecyclerView here.

In  our previous article we have discussed about how to implement Android Simple Listview. In this article we are going to discuss about android custom listview implementation with an image and text using New Android Studio 1.5.1.

In this tutorial, we are going to display a country name, its flag, its capital and currency in a listview and when a user clicks on a list item, he is taken to another activity which displays the particular country’s details. Lets get started:android custom listview

Creating Android Custom ListView:

First let us start creating Android Custom ListView by integrating the required images and colors. You can get the required images and source code from the link below:

[wpdm_package id=’785′]

Let us start by creating a single list item which we will populate in a listview. Now create an xml File in Res > Layout and name it as list_item.xml. Now type the following code:

Images inside drawable can be obtained from the source code attached to this article.

Adding the required images:

All the images used in the code can be downloaded from the source code attached to this tutorial. You can download and paste them in your drawable folder.

Adding the required Strings:

Open res > values > strings.xml file and type the following code:

Adding required color values:

Now open res > values >colors.xml file and type the following code in it:

Now we create model class in Java. Let us create a model folder by right clicking on package and create a model class named Country.java. Now add the following code to it:

Now we create a custom Adapter for our our ListView. Here I created a folder named adapter inside my package and created a class named CountryListAdapter.java to use as Custom Adapter, with the following code:

Now open res > layout >content_main.xml. If the file is missing, create a file with name content_main.xml and add the following code to it:

Here we added our Android Custom Listview to content_main.xml

Now we will open our activity_main.xml file and add the following code to it:

Now we modify the MainActivity.java as follows:

Here we added an instance of countryListAdapter in our onCreate() method and set the listview’s adapter as countryListAdapter.

Next, to start another activity when a list item is clicked, we called setOnItemClickListener() on listView and called another Activity named DetailActivity which we are going to create now.

First we edit activity_detail.xml and add the following code to it:

Here we just added an imageview and textview in our android custom listview to display the country’s flag and country’s details in brief.

We next create a file named DetailActivity.java and add the following code to it:

Here we retrieved the data from intent and set it to the textview and imageview from activity_detail.xml.

Related Posts

  • Jonathan

    Really nice was searching for sample for listview with image since a while.

  • Annabel Teng

    could you update this also? Source code not available to download?