CustomArrayAdapter in Android with Example

Last Updated : 05 Feb, 2025

In Android, ArrayAdapters are used for populating and controlling the ListView and Spinners. ArrayAdapter by default provides List-Items that include only single information or single TextView. In order to have a more complex layout that includes multiple information in a single List-Item such as images, text, etc. we use CustomArrayAdapter. Apps like Instagram, WhatsApp, and many more are using such a complex layout.

Step by Step Implementation of CustomArrayAdapter

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio.

Step 2: Working with the activity_main.xml file

In this step, we will add a ListView to our activity_main.xml file which is used to show the data of list Items. Go to the app > res > layout > activity_main.xml and the following code snippet.

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    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:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:dividerHeight="1dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Layout:

Step 3: Create a new layout file list_item.xml

In this step, we will create a layout file for the single list item view. Go to app > res > layout > right-click > New > Layout Resource File and name it as list_item. list_item.xml contains an ImageView and a TextView which is used for populating the ListView.

list_item.xml:

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

    <!--For image src we have used ic_launcher
        and for text "GeeksForGeeks" and "gfg" 
        they are used only for reference how it will looks"-->
    <ImageView
        android:id="@+id/androidVersionImage"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:padding="8dp"
        android:src="@mipmap/ic_launcher_round" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical">

        <TextView
            android:id="@+id/androidVersionName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="GeeksForGeeks"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/androidVersionNumber"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="gfg" />
    </LinearLayout>

</LinearLayout>

Layout:

Step 4: Create a new Java/Kotlin class “Item”

We will create a new java/kotlin class and name it as Item. Go to app > java > package > right-click > create new java/kotlin class.

Item Class:

Java

public class Item {

    private int androidVersionImage;
    private String androidVersionName;
    private String androidVersionNumber;

    // Constructor
    public Item(int androidVersionImage, String androidVersionName, String androidVersionNumber) {
        this.androidVersionImage = androidVersionImage;
        this.androidVersionName = androidVersionName;
        this.androidVersionNumber = androidVersionNumber;

    }

    // Getters and Setters method
    public int getAndroidVersionImage() {
        return androidVersionImage;
    }

    public void setAndroidVersionImage(int androidVersionImage) {
        this.androidVersionImage = androidVersionImage;
    }

    public String getAndroidVersionName() {
        return androidVersionName;
    }

    public void setAndroidVersionName(String androidVersionName) {
        this.androidVersionName = androidVersionName;
    }

    public String getAndroidVersionNumber() {
        return androidVersionNumber;
    }

    public void setAndroidVersionNumber(String androidVersionNumber) {
        this.androidVersionNumber = androidVersionNumber;
    }
}

Kotlin

package org.geeksforgeeks.demo

class Item(
    var androidVersionImage: Int,
    var androidVersionName: String,
    var androidVersionNumber: String
)

Step 5: Creating Adapter class

Now, we will create an Adapter class that acts as a bridge between the UI Component and the Data Source .i.e., androidVersionImage, androidVersionName, androidVersionNumber, and ListView. Go to the app > java > package > right-click and create a new java/kotlin class and name it as Adapter. Below is the code snippet is given for it.

Adapter Class:

Java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;

public class Adapter extends ArrayAdapter <Item> {

    ImageView imageView;
    TextView textView1, textView2;
    ArrayList <Item> androidVersionList = new ArrayList <>();

    public Adapter(Context context, int textViewResourceId, ArrayList <Item> objects) {
        super(context, textViewResourceId, objects);
        androidVersionList = objects;
    }

    // Returns total number of items to be displayed in the list.
    // It counts the value from the arraylist size
    @Override
    public int getCount() {
        return super.getCount();
    }

    // This function implicitly gets called when the listItem view is ready
    // to be displayed. Here we set the layout and add data to the views
    @Override
    public View getView(int position, View convertView, ViewGroup viewGroup) {
        View view = convertView;
        
          // Setting layout
        LayoutInflater layoutInflater = (LayoutInflater) getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        view = layoutInflater.inflate(R.layout.list_item, null);
        imageView = (ImageView) view.findViewById(R.id.androidVersionImage);
        textView1 = (TextView) view.findViewById(R.id.androidVersionName);
        textView2 = (TextView) view.findViewById(R.id.androidVersionNumber);
        
           // Adding data to the Views
        imageView.setImageResource(androidVersionList.get(position).getAndroidVersionImage());
        textView1.setText(androidVersionList.get(position).getAndroidVersionName());
        textView2.setText(androidVersionList.get(position).getAndroidVersionNumber());
        return view;
    }
}

Kotlin

package org.geeksforgeeks.demo

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ArrayAdapter
import android.widget.ImageView
import android.widget.TextView


class Adapter(context: Context?, textViewResourceId: Int, objects: ArrayList<Item>) :
    ArrayAdapter<Item?>(context!!, textViewResourceId, objects as List<Item?>) {
    var imageView: ImageView? = null
    var textView1: TextView? = null
    var textView2: TextView? = null
    var androidVersionList: ArrayList<Item> = ArrayList()

    init {
        androidVersionList = objects
    }

    // Returns total number of items to be displayed in the list.
    // It counts the value from the arraylist size
    override fun getCount(): Int {
        return super.getCount()
    }

    // This function implicitly gets called when the listItem view is ready
    // to be displayed. Here we set the layout and add data to the views
    override fun getView(position: Int, convertView: View?, viewGroup: ViewGroup): View {
        var view = convertView


        // Setting layout
        val layoutInflater =
            context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        view = layoutInflater.inflate(R.layout.list_item, null)
        imageView = view.findViewById<View>(R.id.androidVersionImage) as ImageView
        textView1 = view.findViewById<View>(R.id.androidVersionName) as TextView
        textView2 = view.findViewById<View>(R.id.androidVersionNumber) as TextView


        // Adding data to the Views
        imageView!!.setImageResource(androidVersionList[position].androidVersionImage)
        textView1!!.text = androidVersionList[position].androidVersionName
        textView2!!.text = androidVersionList[position].androidVersionNumber
        return view
    }
}

Step 6: Working with the MainActivity file

In MainActivity class we create an ArrayList for storing images and texts. These images are placed in the drawable folder(app > res > drawable). You can use any images in place of this. We get the reference of listView and set the adapter on the listView.

MainActivity File:

Java

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    ListView listView;
    ArrayList <Item> androidVersionList = new ArrayList <>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
          // Getting the reference of listView
        listView = (ListView) findViewById(R.id.listView);
        
          // Adding image and texts to list
        androidVersionList.add(new Item(R.drawable.donut, "Donut", "1.6"));
        androidVersionList.add(new Item(R.drawable.eclair, "Eclair", "2.0 - 2.1"));
        androidVersionList.add(new Item(R.drawable.froyo, "Froyo", "2.2 - 2.2.3"));
        androidVersionList.add(new Item(R.drawable.gingerbread, "GingerBreak", "2.3 - 2.3.7"));
        androidVersionList.add(new Item(R.drawable.honeycomb, "HoneyComb", "3.0 - 3.2.6"));
        androidVersionList.add(new Item(R.drawable.icecream, "IceCream", "4.0 - 4.0.4"));
        androidVersionList.add(new Item(R.drawable.jellybean, "JellyBean", "4.1 - 4.3.1"));
        androidVersionList.add(new Item(R.drawable.kitkat, "KitKat", "4.4 - 4.4.4"));
        androidVersionList.add(new Item(R.drawable.lollipop, "Lollipop", "5.0 - 5.1.1"));
        androidVersionList.add(new Item(R.drawable.marshmallow, "Marshmallow", "6.0 - 6.0.1"));

        Adapter adapter = new Adapter(this, R.layout.list_item, androidVersionList);
        
          // Setting the adapter to list
        listView.setAdapter(adapter);
    }
}

Kotlin

package org.geeksforgeeks.demo

import android.os.Bundle
import android.widget.ListView
import androidx.appcompat.app.AppCompatActivity


class MainActivity : AppCompatActivity() {
    private lateinit var listView: ListView
    private var androidVersionList: ArrayList<Item> = ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)


        // Getting the reference of listView
        listView = findViewById(R.id.listView)


        // Adding image and texts to list
        androidVersionList.add(Item(R.mipmap.ic_launcher_round, "Donut", "1.6"))
        androidVersionList.add(Item(R.mipmap.ic_launcher_round, "Eclair", "2.0 - 2.1"))
        androidVersionList.add(Item(R.mipmap.ic_launcher_round, "Froyo", "2.2 - 2.2.3"))
        androidVersionList.add(Item(R.mipmap.ic_launcher_round, "GingerBreak", "2.3 - 2.3.7"))
        androidVersionList.add(Item(R.mipmap.ic_launcher_round, "HoneyComb", "3.0 - 3.2.6"))
        androidVersionList.add(Item(R.mipmap.ic_launcher_round, "IceCream", "4.0 - 4.0.4"))
        androidVersionList.add(Item(R.mipmap.ic_launcher_round, "JellyBean", "4.1 - 4.3.1"))
        androidVersionList.add(Item(R.mipmap.ic_launcher_round, "KitKat", "4.4 - 4.4.4"))
        androidVersionList.add(Item(R.mipmap.ic_launcher_round, "Lollipop", "5.0 - 5.1.1"))
        androidVersionList.add(Item(R.mipmap.ic_launcher_round, "Marshmallow", "6.0 - 6.0.1"))

        val adapter = Adapter(this, R.layout.list_item, androidVersionList)


        // Setting the adapter to list
        listView.adapter = adapter
    }
}