Android Custom ListView With Image And Text

ListView is one of the frequently used component in Android app development. Today we are going to learn how to implement custom ListView with image and text. ListView is an composite control which groups multiple items and display them in vertical scrollable list. There are two approach to implementing ListView in Android.

  • Android Default ListView
  • Custom ListView

Here we are learn how to customizing the ListView and display multiple items such as images and text.

 

1.  Project Overview

In this tutorial we are customizing ListView with image. In each list row we are displaying one image and it’s name. For the simplicity we have added some images in drawable folder under resources directory of the project, so please download some sample images and add the images inside the drawable. This demo contains single activity which display the custom ListView looks like following screen shot.

Now let’s start by creating new project in Android Studio.

2. Create / Setup Project

1. Create a new project in Android Studio from File ⇒ New Project and select Basic Activity from the templates.

2. Open build.gradle under app directory. Add Support design and appcompact library. This both library provides the wide range of classes related user interface widgets.

Note : Make sure that implementation is new keyword to add library dependency when you use Android Studio version 3.0 or above.

3. Add following code into  colors.xml and styles.xml files.

colors.xml

styles.xml

3. Create XML Files

4. Now open the activity_main.xml and add the listview inside the file. Check the following lines of code.

5. Next step is to create the list row file. This layout file holds single items in list.. So create new file under layout named row_list_item.xml.

Above code contains ImageView, TextView which display image and it’s name side by side.

4. Create Custom ListView Adapter

6. The above code is designing part now we need some java classes to handle custom listview. Each row of the listview contains Image and Image Name so first create one model class named Image.java under model package. Add the following code into Image.java class.

 

7. The next step is to create list adapter update the data into listview. So create the new class named ImageListAdapter.java under adapter package and add following lines of code.

5. Setup ListView Activity

8. Now open you MainActivity.java and add the following lines of code. In following code there are four steps to configure listview.

  1. Initialize List-View And Image Array-List Objects.
  2. Prepare Image array0list with some static data. [In this tutorial we have fetched images from the drawable, So add some sample image into drawable]
  3. Create ImageListAdapter Object and pass context, list row files and image list as a parameter.
  4. The final step is to set adapter into ListView.

I hope you like this article. If you have followed this tutorial carefully then application run without any issue. Write us if there is any issue to implement Custom ListView In Android.

Happy Coding 🙂