Custom ListView Android

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

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.

Adding ListView in MainActivity

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

<?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>

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

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.

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

<?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>

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

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;
    }
}

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.

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();
    }
}

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.

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

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);
    }
}

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

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 🙂

Comments

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

Shobhit Srivastava says

December 23, 2015 at 11:22 am

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

Emmanuel says

February 24, 2016 at 6:56 pm

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

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.

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

- 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.
  
Gaurav swarankar says

September 23, 2017 at 3:57 am

I want to contact you sir.

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

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

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.

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.

de says

July 10, 2018 at 10:11 am

Could you explain elaborately how does MylistAdapter.getView work ?

Tony says

October 4, 2018 at 3:56 pm

Thank you so much for your tutorial.

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.

Custom ListView Android – Building Custom ListView with Images

The ListView We Are Going to Make?

Pre-Requisites

Custom ListView Android Tutorial

Creating a new Project

Adding Images

Adding ListView in MainActivity

Custom List Layout

Data Model for List Item

Custom Adapter Class for ListView

Custom ListView Android

Custom ListView Android Source Code

Related

About Belal Khan

Comments

Leave a Reply to de Cancel reply

About Simplified Coding

Quick Links

The ListView We Are Going to Make?

Pre-Requisites

Custom ListView Android Tutorial

Creating a new Project

Adding Images

Adding ListView in MainActivity

Custom List Layout

Data Model for List Item

Custom Adapter Class for ListView

Custom ListView Android

Custom ListView Android Source Code

Sharing is Caring:

Related

About Belal Khan

Comments

Leave a Reply to de Cancel reply

About Simplified Coding

Quick Links

Categories