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 …

custom listview android tutorial

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.

[sociallocker id=1372]  Custom List View Android Images [/sociallocker]

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.

[sociallocker id=1372] Custom ListView Android Source Code Download[/sociallocker]

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 🙂

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x