Custom ListView Android – Building Custom ListView with Images

So folks here is another tutorial which is Custom ListView Android. You may already know about making a simple ListView for your application. And then you thought, “Can I customize my ListView?“. Then the answer is YES. You can customize it as you want.  So whatever design is in your mind for your ListView you can make it easier. This tutorial will help you in learning “How to Customize a ListView in Android?”. So let’s begin.

The ListView We Are Going to Make?

  • Before moving ahead, I would like to show you what we will be making. So here is the screenshot of the Customized ListView.
custom listview android
Custom ListView Android
  • You can see each item in our ListView has an ImageView, Two TextViews, and a Button. Now you can also change the look to whatever you want.

Pre-Requisites

  • Before moving ahead, I would like to give you all the Images that I used in this project. You can use your images if you have already. But if you want to use the pictures I used in this project you can get it from below.

Custom ListView Android Tutorial

Creating a new Project

  • As always let’s start by creating a new Android Studio Project. I created a project named CustomListViewAndroid.
  • Now first we will add all the images that we downloaded above.

Adding Images

  • On your project paste, all the images inside res->drawable that you downloaded.

drawable

Adding ListView in MainActivity

  • Now come inside activity_main.xml and add a ListView here.

  • So now we have a ListView inside our MainActivity.

custom listview android design

  • But, here we aim to create an entirely Customized ListView and to achieve this task we need a customized layout for our ListView Items.

Custom List Layout

  • So inside res->layout create a new Layout Resource File named my_custom_list.xml. (You can give any name to the file).
  • Inside this file, we will design the Layout for our List.
  • For this example, we have the design as shown below.

custom listview android list layout

  • To make the above layout for our List, we will write the following code inside my_custom_list.xml.

Data Model for List Item

  • To store the data of the List, we will use a data model class. The class will only contain the variables for all the List Items, a Constructor to initialize those attributes and getters to get those attribute values.
  • So, you need to create the following class. It is named Hero.

  • You see in the above class we have int for the image. It is because we are going to use drawable resource for the image and every drawable resource has a unique id which the Android Studio creates automatically inside R.java file. And the type of the id generated is int. That is why to identify the image we have an int here.

Custom Adapter Class for ListView

  • As we are building a customized ListView, we cannot use the predefined ArrayAdapter. Create a new class named MyListAdapter.java and write the following code.

  • If you have any confusion for the above code, please make comment on this post, and I will try to explain you the thing. 

Custom ListView Android

  • Now the last thing is making our Custom ListView. So com inside MainActivity.java and write the following code.

  • That’s it now execute the application.
custom listview android
Custom ListView Android
  • Bingo! It is working fine.

Custom ListView Android Source Code

  • Please try to do it yourself 😛 But if you are having problems (Please be honest in this part, After trying a lot, at last, get this).  You can get my source code from the link given here.

So that’s it for this Custom ListView Android Tutorial friends. Please feel free to give your feedback and ask your queries in the comment section. Thank You 🙂

19 thoughts on “Custom ListView Android – Building Custom ListView with Images”

  1. hi friend
    thank so much for your tutorials,
    they’re vere practical and useful.

    thank

    can you create a tutorial about loading more items in listView By clicking a button or anything???

    THANK YOU

    Reply
  2. very well explained……. I want to delete item in list on button click but i am loading data from server . I also have used model class(getters and setters) and custom adapter but i am unable to make Volley string request in custom adapter ….please guide me…. i am waiting for your reply….

    Reply
  3. Hi, Thanks for the tutorial. But I am having an issue with the code.

    ImageView imageView = view.findViewById(R.id.imageView);
    TextView textViewName = view.findViewById(R.id.textViewName);
    TextView textViewTeam = view.findViewById(R.id.textViewTeam);
    Button buttonDelete = view.findViewById(R.id.buttonDelete);

    Incompatible types.
    Required: android.widget.Button
    Found: android.view.View

    Please help..

    Reply
      • Thanks Belal. That worked. One more problem in adding the item to the arreylist.
        while we are adding programmatically as
        heroList.add(new Hero(“One”, “Two”));
        Is there any way to add it from String.xml? Because i have alot of items to add and i want to keep all the strings separate in the string.xml file.

        Your reply is really appreciated. Thanks once again.

        Reply
  4. Unable to start activity ComponentInfo{info.androidhive.welcomeslider/info.androidhive.introslider.Products}: java.lang.NullPointerException: Attempt to invoke virtual method ‘void android.widget.ListView.setAdapter(android.widget.ListAdapter)’ on a null object reference

    Reply
  5. Nice one… How to create a custom list view with images and some news text from sql database. example to list news items posted in database. having trouble getting images from database and the image link.

    Reply
  6. hello sir, the tutorial was great i tried it and it worked
    but i have a got some issue with adding the value of the image to the list.
    i got an error, that is
    android.content.res.Resources$NotFoundException: Resource ID #0x7f080075
    at the below line
    imageView.setImageDrawable ( context.getResources ().getDrawable( educationalLoanModel.getImage () ));
    can u please tell me where the problem lies.

    Reply
  7. thank u very much for your tutorial…
    but i have problem to show alert..i have follow all the steps
    plz told me any solution where we write code for alert show()

    Reply

Leave a Comment