How to Create Custom ListView in Android using ArrayAdapter || Custom List using ArrayAdapter in Android || Custom ListView in Android using ArrayAdapter

Custom List using ArrayAdapter in Android

Hello Friends, Today we will teach you how to create custom listview in Android using ArrayAdapter.
First open your project and add Listview in your xml.

activity_main.xml :-

<?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=".MainActivity">

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

</RelativeLayout>

Now we need to design a custom list in xml. so we need to create new xml file for list style.

custom_list_style.xml :-

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

    <ImageView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:id="@+id/list_image"
        android:src="@drawable/ic_launcher_background"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/list_title"
        android:text="List Title"
        android:layout_toRightOf="@+id/list_image"
        android:layout_margin="10dp"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/list_des"
        android:text="List Description"
        android:layout_below="@+id/list_title"
        android:layout_toRightOf="@+id/list_image"
        android:layout_marginLeft="10dp"/>

</RelativeLayout>

Code Image :-

Now we need to create Model class :-

RowItem.java :-

package com.akshayarora.myapplication;

import androidx.annotation.NonNull;

public class RowItem {
    private int imageId;
    private String title;
    private String desc;

    public RowItem(int imageId, String title, String desc) {
        this.imageId = imageId;
        this.title = title;
        this.desc = desc;
    }

    public int getImageId() {
        return imageId;
    }

    public void setImageId(int imageId) {
        this.imageId = imageId;
    }

    public String getDesc() {
        return desc;
    }

    public void setDesc(String desc) {
        this.desc = desc;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    @Override
    public String toString() {
        return title + "\n" + desc;
    }
}

Code Image :-

Now Create CustomAdapter and extends with ArrayAdapter<String>.

CustomAdapter.java :-

package com.akshayarora.myapplication;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;

import java.util.List;

public class CustomAdapter extends ArrayAdapter<String>{

    private Context context;
    private String[] title;
    private String[] description;
    private int[] image;

    public CustomAdapter(Context context, String[] title,String[] description,int[] image) {
        super(context, -1,title);
        this.context = context;
        this.title = title;
        this.description = description;
        this.image = image;
    }

    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        LayoutInflater inflater = (LayoutInflater)context.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
        View rowView = inflater.inflate(R.layout.custom_list_style,parent,false);
        TextView textView = (TextView)rowView.findViewById(R.id.list_title);
        TextView textView1 = (TextView)rowView.findViewById(R.id.list_des);
        ImageView imageView = (ImageView)rowView.findViewById(R.id.list_image);
        textView.setText(title[position]);
        textView1.setText(description[position]);
        imageView.setImageResource(image[position]);
        return rowView;
    }
}

Code Image :-

Now make some changes in MainActivity.java

MainActivity.java :-

package com.akshayarora.myapplication;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.graphics.Color;
import android.hardware.Camera;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Toast;

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

public class MainActivity extends AppCompatActivity {

    ListView listView;
    List<RowItem> rowItems;
    CustomAdapter adapter;
    String[] country = new String[]{"India", "USA", "UK", "Japan"};
    String[] countryDes = new String[]{"India's Description","USA's Description","UK's Description","Japan's Description"};
    int[] img = new int[] {R.drawable.india,R.drawable.usa,R.drawable.uk,R.drawable.japan};

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

        rowItems = new ArrayList<RowItem>();

        listView = (ListView) findViewById(R.id.listView);
        for (int i = 0; i < country.length; i++) {
            RowItem item = new RowItem(img[i],country[i],countryDes[i]);
            rowItems.add(item);
        }

        adapter = new CustomAdapter(this,country,countryDes,img);
        listView.setAdapter(adapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {

            @Override
            public void onItemClick(AdapterView<?> parent, final View view,
                                    int position, long id) {
                Toast.makeText(MainActivity.this,""+ rowItems.get(position), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Code Image :-