Android Listview With Image And Text In Android Studio Example

Android Listview with image and text example tutorial will guide you today.

Listview is used when you want to display multiple items which have a dynamic number of items.

We will create a listview which contains image and text in it’s every row item.

I have put one divider between every listview row item. Divider helps user to differentiate among listview items easily.

Watch this video to have a brief idea about the output of this tutorial.

Step 1. Create a new project

Make a new project in the Android Studio.

Step 2. Necessary Images

We require few images in this example to use them in the listview.

Click on the below link to download these images.

download this images

You can learn how to add items to the drawable folder here in step 2. (No need to create xml file in drawable, just copy and paste images in drawable).

Now put these images in the drawable folder.

Step 3. Update activity_main.xml

copy and paste following code

I have taken one listview in the above code.

Step 4. Create java class named CustomeAdapter.java 

copy following code in it.

  • getView() method will create layout for every listview row item.

Below two lines from getView() method will set the Image and Text.

  • Compiler will get the appropriate object from the imageModelArrayList using position.
  • From that object, it will use getName() and getImage_drawable() method to get related text and image resource.

Layout File

While developing listview, we need to create adapter class in which we can define code for each cell of listview.

We need to create one layout resource file(lv_item.xml here in our example, you can name it as you like) in the resource folder.

This file will contain components like TextView,ImageView, etc. as per requirement.

This file represents a single cell of the listview. In our example it contains one ImageView and one TextView.

Thus, every row will contain one image and one text.

In getView() method, lv_item.xml is inflated, and all the components of lv_item can be set here for each cell of listview as per requirement.

Code for lv_item.xml is like:

Step 5. Create a class named ImageModel.java

Add following source code in it.

Step 6. Finally, update MainActivity.java class.

Copy and paste below code in MainActivity.java

Consider below source code

  • I have declared one integer array in above code.
  • This integer array includes the drawable references to the images which are stored in the drawable folder.
  • We have used this integer reference to set the images in the imageview in adapter class.

  • Above code have declared a string variable. This variable includes the names of the vehicles.
  • Adapter have used this string array to fill the text in every row of the listview.

Read below code for populateList() method

  • populateList() method will create one arraylist. This arraylist contains the objects of the ImageModel class.
  • Compiler will create the object of the ImageModel class and will add it into the arraylist in the every iteration of the for loop.
  • After the successful operation of populateList() method, we will send arraylist to the adapter.

Now run your project, and yes, it will work like shown in the video.

If you have any questions regarding this tutorial, feel free to ask in comment section.

Related Tutorials

  1. RecyclerView with CardView Android
  2. Android RecyclerView with Button

Kotlin Version

Kotlin version of this tutorial : Android Kotlin Listview Example

ReyclerView can give much more speed and smoothness in the android app.

Hence, it is recommended look at above tutorial at once and learn it to make it in your next app.

Download Code for Android Listview With Image and Text

[sociallocker]Download Demo Code[/sociallocker]

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

6 Responses

  1. george says:

    I go to app>java>comp……>new>java class and named “CustomAdapter”
    copy and paste to it.
    I get an error “CustomeAdapter is public, should be declared in the filename “CustomeAdapter.java”

    if I remove the word “public” and make local, no error but crash when I run it
    Thanks

  2. shiva says:

    Caused by: java.lang.NullPointerException: Attempt to invoke virtual method ‘void android.widget.ListView.setAdapter(android.widget.ListAdapter)’ on a null object reference

    Fix:
    MainActivity.java
    Add the below line:
    ListView lv=(ListView) findViewById(R.id.MissinglistView);
    lv.setAdapter(customeAdapter);

  3. Shafiq says:

    Can I set different image as background for each row of listview . plz plz answer . i am troubling with this problem.

    • Hardik Parsania says:

      Obviously you can..set image at your root layout (Relative or linear layout) as a background image and make it’s height and width as match_parent

Leave a Reply

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