Android custom listview :

The Android custom ListView example offers the flexibility to include specific elements tailored to your ListView. You can design the ListView according to your preferences.

Not every app has the same requirements for displaying data in a ListView, necessitating customization based on the populated data.

Commonly encountered apps like YouTube, Amazon, Flipkart, Swiggy, Zomato, and others use ListView/GridView employing RecyclerView, which operates similarly. These apps have their unique customizations, such as banner images, title descriptions, product icons, and other styling choices.

Custom ListView empowers you to add the necessary fields to your ListView and customize its appearance in terms of shape and size.

Let’s now delve into the implementation of a custom ListView for Android, exploring its versatile features and customization options.

Listview :

In this Android tutorial, I will demonstrate how to create a custom ListView that displays the image, name, and number of five persons. We’ll be using a custom adapter in Android to implement this ListView.

ListView serves various purposes, as we’ve explored in previous ListView tutorials.

Generally, ListView is used to efficiently display dynamic data on the screen, replacing the need for multiple TextViews or other components.

MainActivity.java :

Providing the full code for custom listview implementation. For efficiency you may use View binding here

import android.content.Context;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.TextView;

import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    ListView listView;

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

        listView = findViewById(R.id.listView);

        int[] images = new int[] { R.drawable.one, R.drawable.two,
                R.drawable.three, R.drawable.four, R.drawable.five };

        String[] names = new String[] { "Abhi", "Abhishek", "Abhinav",
                "Ram", "Ramesh" };

        String[] numbers = new String[] { "9999999999", "8888888888",
                "7777777777", "6666666666","5555555555" };

        CustomAdapter adapter = new CustomAdapter(this, images, names, numbers);
        listView.setAdapter(adapter);

        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                // Handle item click if needed
            }
        });
    }

    private static class CustomAdapter extends BaseAdapter {

        private Context context;
        private String[] names;
        private String[] numbers;
        private int[] images;
        private LayoutInflater inflater;

        CustomAdapter(Context context, int[] images, String[] names, String[] numbers) {
            this.context = context;
            this.names = names;
            this.numbers = numbers;
            this.images = images;
            this.inflater = LayoutInflater.from(context);
        }

        @Override
        public int getCount() {
            return names.length;
        }

        @Override
        public Object getItem(int position) {
            return names[position];
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder;

            if (convertView == null) {
                convertView = inflater.inflate(R.layout.listview_row, parent, false);
                viewHolder = new ViewHolder();
                viewHolder.imageView = convertView.findViewById(R.id.imageView);
                viewHolder.txtName = convertView.findViewById(R.id.txtName);
                viewHolder.txtNumber = convertView.findViewById(R.id.txtNumber);
                convertView.setTag(viewHolder);
            } else {
                viewHolder = (ViewHolder) convertView.getTag();
            }

            viewHolder.txtName.setText(names[position]);
            viewHolder.txtNumber.setText(numbers[position]);
            viewHolder.imageView.setImageResource(images[position]);

            return convertView;
        }

        private static class ViewHolder {
            ImageView imageView;
            TextView txtName;
            TextView txtNumber;
        }
    }
}

activity_main.xml :

Adding listview and textview to xml file you can customize the screen according to your requirement with images and much more.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.androidcoding.abhi.custom_listview.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="80dp"
        android:layout_marginBottom="10dp"
        android:text="Custom ListView"
        android:textAppearance="?android:attr/textAppearanceLarge" />

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

Adding textviews and imageview to listview_row.xml

listview_row.xml :

This is the screen where you can make the customization’s for the listview i.e., in the shape, size, color and much more.

<?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="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:layout_marginTop="10dp" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#F2EAEA"
            android:orientation="vertical"
            android:padding="10dp">

            <TextView
                android:id="@+id/txtName"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Large Text"
                android:textAppearance="?android:attr/textAppearanceLarge" />

            <TextView
                android:id="@+id/txtNumber"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="5dp"
                android:text="Medium Text"
                android:textAppearance="?android:attr/textAppearanceMedium" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

AndroidManifest.xml :

There is no special permissions required for displaying the custom listview.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.androidcoding.abhi.custom_listview"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme">

        <activity
            android:name="com.androidcoding.abhi.custom_listview.MainActivity"
            android:label="@string/app_name">

            <intent-filter>

                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Android Listview Output:

The screen depicts the usage of custom listview implementation.

If you have any questions, feel free to drop them in the comments below. If you enjoyed this tutorial, show us some love by liking and sharing for more exciting updates