Simplified Coding

  • About
  • Contact Us
  • Advertise
  • Privacy Policy
You are here: Home / Android Application Development / Custom ListView Android – Building Custom ListView with Images

Custom ListView Android – Building Custom ListView with Images

August 1, 2015 by Belal Khan 16 Comments

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.

Contents

  • 1 The ListView We Are Going to Make?
  • 2 Pre-Requisites
  • 3 Custom ListView Android Tutorial
    • 3.1 Creating a new Project
    • 3.2 Adding Images
    • 3.3 Adding ListView in MainActivity
    • 3.4 Custom List Layout
    • 3.5 Data Model for List Item
    • 3.6 Custom Adapter Class for ListView
    • 3.7 Custom ListView Android
  • 4 Custom ListView Android Source Code
    • 4.1 Sharing is Caring:
    • 4.2 Related

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 List View Android Images 

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.

activity_main.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="net.simplifiedlearning.customlistviewandroid.MainActivity">
 
<ListView
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
 
</RelativeLayout>

  • 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.

my_custom_list.xml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:padding="15dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
 
    <TextView
        android:id="@+id/textViewName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@+id/imageView"
        android:layout_toRightOf="@+id/imageView"
        android:paddingBottom="10dp"
        android:text="Spiderman"
        android:textAlignment="center"
        android:textSize="35dp"
        android:textStyle="bold" />
 
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="150dp"
        android:layout_height="150dp" />
 
    <TextView
        android:id="@+id/textViewTeam"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textViewName"
        android:layout_toEndOf="@+id/imageView"
        android:layout_toRightOf="@+id/imageView"
        android:paddingTop="10dp"
        android:text="Spiderman"
        android:textAlignment="center"
        android:textSize="25dp"
        android:textStyle="bold" />
 
    <Button
        android:id="@+id/buttonDelete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/imageView"
        android:layout_toEndOf="@+id/imageView"
        android:layout_toRightOf="@+id/imageView"
        android:background="#FF0000"
        android:text="Delete" />
 
 
</RelativeLayout>

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.

Hero.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
package net.simplifiedlearning.customlistviewandroid;
 
/**
* Created by Belal on 9/14/2017.
*/
 
public class Hero {
 
    int image;
    String name, team;
 
    public Hero(int image, String name, String team) {
        this.image = image;
        this.name = name;
        this.team = team;
    }
 
    public int getImage() {
        return image;
    }
 
    public String getName() {
        return name;
    }
 
    public String getTeam() {
        return team;
    }
}

  • 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.

MyListAdapter.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
package net.simplifiedlearning.customlistviewandroid;
 
import android.content.Context;
import android.content.DialogInterface;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v7.app.AlertDialog;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
 
import java.util.List;
 
/**
* Created by Belal on 9/14/2017.
*/
 
//we need to extend the ArrayAdapter class as we are building an adapter
public class MyListAdapter extends ArrayAdapter<Hero> {
 
    //the list values in the List of type hero
    List<Hero> heroList;
    
    //activity context
    Context context;
    
    //the layout resource file for the list items
    int resource;
 
    //constructor initializing the values
    public MyListAdapter(Context context, int resource, List<Hero> heroList) {
        super(context, resource, heroList);
        this.context = context;
        this.resource = resource;
        this.heroList = heroList;
    }
 
    //this will return the ListView Item as a View
    @NonNull
    @Override
    public View getView(final int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        
        //we need to get the view of the xml for our list item
        //And for this we need a layoutinflater
        LayoutInflater layoutInflater = LayoutInflater.from(context);
        
        //getting the view
        View view = layoutInflater.inflate(resource, null, false);
 
        //getting the view elements of the list from the view
        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);
 
        //getting the hero of the specified position
        Hero hero = heroList.get(position);
 
        //adding values to the list item
        imageView.setImageDrawable(context.getResources().getDrawable(hero.getImage()));
        textViewName.setText(hero.getName());
        textViewTeam.setText(hero.getTeam());
 
        //adding a click listener to the button to remove item from the list
        buttonDelete.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                //we will call this method to remove the selected value from the list
                //we are passing the position which is to be removed in the method
                removeHero(position);
            }
        });
 
        //finally returning the view
        return view;
    }
 
    //this method will remove the item from the list
    private void removeHero(final int position) {
        //Creating an alert dialog to confirm the deletion
        AlertDialog.Builder builder = new AlertDialog.Builder(context);
        builder.setTitle("Are you sure you want to delete this?");
 
        //if the response is positive in the alert
        builder.setPositiveButton("Yes", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
                
                //removing the item
                heroList.remove(position);
                
                //reloading the list
                notifyDataSetChanged();
            }
        });
 
        //if response is negative nothing is being done
        builder.setNegativeButton("No", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialogInterface, int i) {
 
            }
        });
 
        //creating and displaying the alert dialog
        AlertDialog alertDialog = builder.create();
        alertDialog.show();
    }
}

  • 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.

MainActivity.java
Java
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
package net.simplifiedlearning.customlistviewandroid;
 
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
 
import java.util.ArrayList;
import java.util.List;
 
public class MainActivity extends AppCompatActivity {
 
    //a List of type hero for holding list items
    List<Hero> heroList;
    
    //the listview
    ListView listView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //initializing objects
        heroList = new ArrayList<>();
        listView = (ListView) findViewById(R.id.listView);
 
        //adding some values to our list
        heroList.add(new Hero(R.drawable.spiderman, "Spiderman", "Avengers"));
        heroList.add(new Hero(R.drawable.joker, "Joker", "Injustice Gang"));
        heroList.add(new Hero(R.drawable.ironman, "Iron Man", "Avengers"));
        heroList.add(new Hero(R.drawable.doctorstrange, "Doctor Strange", "Avengers"));
        heroList.add(new Hero(R.drawable.captainamerica, "Captain America", "Avengers"));
        heroList.add(new Hero(R.drawable.batman, "Batman", "Justice League"));
 
        //creating the adapter
        MyListAdapter adapter = new MyListAdapter(this, R.layout.my_custom_list, heroList);
        
        //attaching adapter to the listview
        listView.setAdapter(adapter);
    }
}

  • 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.

Custom ListView Android Source Code Download

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 🙂

Sharing is Caring:

  • Tweet
  • Share on Tumblr
  • More
  • Pocket
  • Print
  • Email

Related

Filed Under: Android Application Development, Android Intermediate Tagged With: android custom listview, android custom listview adapter, android custom listview example, android listview

About Belal Khan

I am Belal Khan, I am currently pursuing my MCA. In this blog I write tutorials and articles related to coding, app development, android etc.

Comments

  1. omid says

    September 24, 2015 at 6:03 pm

    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. Shobhit Srivastava says

    December 23, 2015 at 11:22 am

    Man!!! you Are god for me. Thanx.

    Reply
  3. Emmanuel says

    February 24, 2016 at 6:56 pm

    great tutorials..thanks was very very helpful..simple and well explained

    Reply
  4. M fivez says

    March 14, 2016 at 1:30 pm

    Thank you for your detailed tutorials : they gave me the confidence to write my own app.

    Reply
  5. Vinod Patil says

    September 17, 2017 at 7:45 am

    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
    • Belal Khan says

      September 17, 2017 at 8:23 am

      You need to put the same code to send volley request.. You should tell your exact problem.

      Reply
  6. Gaurav swarankar says

    September 23, 2017 at 3:57 am

    I want to contact you sir.

    Reply
  7. Hussain says

    October 11, 2017 at 10:19 am

    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
    • Belal Khan says

      October 11, 2017 at 11:41 am

      Put a type case like
      ImageView imageView = (ImageView) view.findViewById(R.id.imageView); and do it for every line..

      Reply
      • Hussain says

        October 11, 2017 at 4:06 pm

        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
  8. brian says

    December 4, 2017 at 1:00 pm

    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
  9. MBM says

    March 22, 2018 at 1:24 am

    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
  10. sasmita says

    April 1, 2018 at 6:06 am

    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
  11. de says

    July 10, 2018 at 10:11 am

    Could you explain elaborately how does MylistAdapter.getView work ?

    Reply
  12. Tony says

    October 4, 2018 at 3:56 pm

    Thank you so much for your tutorial.

    Reply
  13. imran says

    October 27, 2018 at 4:05 pm

    when I upload some 10 mb jpg file in drawable folder then my app don’t launching in my phn when I run it.

    Reply

Leave a Reply to de Cancel reply

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

Search




Download our Android App

Simplified Coding in Google Play

About Me

Belal Khan

Hello I am Belal Khan, founder and owner of Simplified Coding. I am currently pursuing MCA from St. Xavier's College, Ranchi. I love to share my knowledge over Internet.

Connect With Me

Follow @codesimplified
Simplified Coding

Popular Tutorials

  • Android JSON Parsing – Retrieve From MySQL Database
  • Android Login and Registration Tutorial with PHP MySQL
  • Android Volley Tutorial – Fetching JSON Data from URL
  • Android Upload Image to Server using Volley Tutorial
  • Android TabLayout Example using ViewPager and Fragments
  • Retrieve Data From MySQL Database in Android using Volley
  • Firebase Cloud Messaging Tutorial for Android
  • Android Volley Tutorial – User Registration and Login
  • Android Upload Image to Server Using PHP MySQL
  • Android Navigation Drawer Example using Fragments




About Simplified Coding

Simplified Coding is a blog for all the students learning programming. We are providing various tutorials related to programming and application development. You can get various nice and simplified tutorials related to programming, app development, graphics designing and animation. We are trying to make these things simplified and entertaining. We are writing text tutorial and creating video and visual tutorials as well. You can check about the admin of the blog here and check out our sitemap

Quick Links

  • Advertise Here
  • Privacy Policy
  • Disclaimer
  • About
  • Contact Us
  • Write for Us

Categories

Android Advance Android Application Development Android Beginners Android Intermediate Ionic Framework Tutorial JavaScript Kotlin Android Others PHP Advance PHP Tutorial React Native

Copyright © 2017 · Simplified Coding· All rights Reserved. And Our Sitemap.All Logos & Trademark Belongs To Their Respective Owners·

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.