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.

Table of Contents

1 The ListView We Are Going to Make?
2 Pre-Requisites
3 Custom ListView Android Tutorial
4 Custom ListView Android Source Code

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.

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>

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>

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;

}

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.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

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

}

That’s it now execute the application.

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 🙂

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

Expand Your Knowledge: Next Tutorial Picks

Kotlin Concurrency: coroutineScope vs supervisorScope Explained

Android Interview Questions Blueprint: Your Ultimate Reference

Kotlin Ktor Android Client – Simplifying Android Networking

Android Proto DataStore Mastery with Kotlin

SQLiteOpenHelper Tutorial – Performing CRUD in SQLite

Android Login and Registration Tutorial with PHP MySQL