Android Custom ListView with Custom Adapter Tutorial with Example - How to Create Custom ListView

Custom ListView in Android Tutorial Example

What is Custom Layout Listview ?

In this Tutorial is How to Create custom listView layout.we can design separate XML layout and use this layout is listView.

How to create Custom Layout in Listview?

Now I have Design XML file and bind custom adapter in listView. Now Create Custom ArrayAdapter class and bind XML layout file.

What is ArrayAdapter ?

Adapter is a bridge between UI component and data source that helps us to fill data in UI component. It holds the data and send the data to adapter view.And View send Data to adapter view and display UI from different different Views.

ArrayAdapter is an implementation of BaseAdapter. we need to create a custom listView and GridView. create custom adapter and extend ArrayAdapter in that custom class.

How to Create Custom Listview Example?

Create activity_main.xml File following this code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="<a href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"
    xmlns:app="<a href="http://schemas.android.com/apk/res-auto">http://schemas.android.com/apk/res-auto</a>"
    xmlns:tools="<a href="http://schemas.android.com/tools">http://schemas.android.com/tools</a>"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="<a href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"

xmlns:app="<a href="http://schemas.android.com/apk/res-auto">http://schemas.android.com/apk/res-auto</a>"

xmlns:tools="<a href="http://schemas.android.com/tools">http://schemas.android.com/tools</a>"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<ListView

android:id="@+id/list_view"

android:layout_width="match_parent"

android:layout_height="match_parent"></ListView>

</RelativeLayout>

Create item_row.xml File Following this Code.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="<a href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"
     android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="horizontal"
       android:layout_margin="10dp">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/img_view"/>

       <TextView
           android:id="@+id/tv_name"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_marginLeft="20dp"
           android:layout_gravity="center_vertical"
           />


   </LinearLayout>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="<a href="http://schemas.android.com/apk/res/android">http://schemas.android.com/apk/res/android</a>"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="horizontal"

android:layout_margin="10dp">

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/img_view"/>

<TextView

android:id="@+id/tv_name"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="20dp"

android:layout_gravity="center_vertical"

</LinearLayout>

Create Fruits.java Class Following This Code.

package com.example.bhaumik.listviewcustom;

public class Fruits {

public String name;
int image;

public Fruits(String name, int image) {
    this.name = name;
    this.image = image;
}

public String getName() {
    return name;
}

public void setName(String name) {
    this.name = name;
}

public int getImage() {
    return image;
}

public void setImage(int image) {
    this.image = image;
}

package com.example.bhaumik.listviewcustom;

public class Fruits {

public String name;

int image;

public Fruits(String name, int image) {

this.name = name;

this.image = image;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public int getImage() {

return image;

}

public void setImage(int image) {

this.image = image;

}

Create FruitAdapter.java File Following This Code.

package com.example.bhaumik.listviewcustom;
import android.content.Context;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.CheckBox;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.List;

public class FruitsAdapter extends ArrayAdapter{

Context context;
List<Fruits> list = new ArrayList<>();

public FruitsAdapter(@NonNull Context context, int resource, List<Fruits> list) {
    super(context, resource, list);
    this.context = context;
    this.list = list;
    list.addAll(list);
}


@NonNull
@Override
public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {


   VersionHolder holder = new VersionHolder();

   if (convertView == null){

       LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
       convertView = inflater.inflate(R.layout.item_row,null);


       holder.imageView = convertView.findViewById(R.id.img_view);
       holder.textView = convertView.findViewById(R.id.tv_name);


       convertView.setTag(holder);

   }else{
       holder = (VersionHolder) convertView.getTag();
   }

   Fruits fruits = list.get(position);
   holder.textView.setText(fruits.getName());
   holder.imageView.setImageResource(fruits.getImage());
   holder.imageView.setTag(list);

   return convertView;
}

public static class VersionHolder{

    public ImageView imageView;
    public TextView textView;
}

package com.example.bhaumik.listviewcustom;

import android.content.Context;

import android.support.annotation.NonNull;

import android.support.annotation.Nullable;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.CheckBox;

import android.widget.ImageView;

import android.widget.TextView;

import java.util.ArrayList;

import java.util.List;

public class FruitsAdapter extends ArrayAdapter{

Context context;

List<Fruits> list = new ArrayList<>();

public FruitsAdapter(@NonNull Context context, int resource, List<Fruits> list) {

super(context, resource, list);

this.context = context;

this.list = list;

list.addAll(list);

}

@NonNull

@Override

public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {

VersionHolder holder = new VersionHolder();

if (convertView == null){

LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

convertView = inflater.inflate(R.layout.item_row,null);

holder.imageView = convertView.findViewById(R.id.img_view);

holder.textView = convertView.findViewById(R.id.tv_name);

convertView.setTag(holder);

}else{

holder = (VersionHolder) convertView.getTag();

}

Fruits fruits = list.get(position);

holder.textView.setText(fruits.getName());

holder.imageView.setImageResource(fruits.getImage());

holder.imageView.setTag(list);

return convertView;

}

public static class VersionHolder{

public ImageView imageView;

public TextView textView;

}

Create MainActivity.java File Following This Code.

package com.example.bhaumik.listviewcustom;

import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.CompoundButton;
import android.widget.ListView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

    ListView listView;
    List<Fruits> list = new ArrayList<>();

    FruitsAdapter fruitsAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listView = findViewById(R.id.list_view);

        list = new ArrayList<>();

        list.add(new Fruits("Apple",R.drawable.apple));
        list.add(new Fruits("Banana",R.drawable.banana));
        list.add(new Fruits("Strawberry",R.drawable.strawberry));
        list.add(new Fruits("Pineapple",R.drawable.pinapple));
        list.add(new Fruits("Grape",R.drawable.grapes));


        fruitsAdapter = new FruitsAdapter(MainActivity.this,R.layout.item_row,list);
        listView.setAdapter(fruitsAdapter);

    }



}

package com.example.bhaumik.listviewcustom;

import android.support.v4.widget.SwipeRefreshLayout;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.CompoundButton;

import android.widget.ListView;

import android.widget.Toast;

import java.util.ArrayList;

import java.util.List;

public class MainActivity extends AppCompatActivity {

ListView listView;

List<Fruits> list = new ArrayList<>();

FruitsAdapter fruitsAdapter;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

listView = findViewById(R.id.list_view);

list = new ArrayList<>();

list.add(new Fruits("Apple",R.drawable.apple));

list.add(new Fruits("Banana",R.drawable.banana));

list.add(new Fruits("Strawberry",R.drawable.strawberry));

list.add(new Fruits("Pineapple",R.drawable.pinapple));

list.add(new Fruits("Grape",R.drawable.grapes));

fruitsAdapter = new FruitsAdapter(MainActivity.this,R.layout.item_row,list);

listView.setAdapter(fruitsAdapter);

}

Above the Example of I have create custom layout and custom adapter in listView. Create custom XML file to declared image and textView. |In this layout bind adapter and position wise fetch image from drawable folder and fetch name as a custom list. Now in this adapter to extends of ArrayAdapter. And Pass Fruits class.Fruits class is a getter and setter method of get data and set data in adapter.