CustomArrayAdapter in Android with Example

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

Example

In this example, we are going to make an app for different versions of Android OS which is having an ImageView and a TextView which shows the version name. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language.

Step by Step Implementation

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. . Note that select Java as the programming language.

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 listItems. Go to the app > res > layout > activity_main.xml and the following code snippet.

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:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:dividerHeight="2dp" />

</RelativeLayout>

Before moving further let’s add some color attributes in order to enhance the app bar. Go to app > res > values > colors.xml and add the following color attributes. 

XML

<resources>
    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#16E37F</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

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.

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>

Step 4: Create a new Java class Item.java

We will create a new java class and name it as Item. Item.java contains three private member variables androidVersionImage, androidVersionName, androidVersionNumber. Later on, we will create an ArrayList of this Item type. Go to app > java > package > right-click > create new java 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;
    }
}

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 class and name it as Adapter. Below is the code snippet is given for it.

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

Step 6: Working with the MainActivity.java file

In MainActivity.java 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.

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

Output: Run On Emulator