Kotlin XML ListView Tutorial: Basic Implementation with ArrayAdapter

While Jetpack Compose represents the future of Android UI development, many existing Android applications still rely on traditional XML layouts and ListView components. This blog post covers how to implement a ListView using ArrayAdapter in Kotlin within an XML layout.

What is ListView?

ListView is a view group that displays a list of scrollable items. Each item in the list is contained in a View object automatically inserted to the list using an Adapter.

Why Use ListView?

• Display a collection of similar data.
• Traditional method widely supported on older Android versions.
• Good for simple, straightforward lists.

Basic Implementation Steps

Implementing a ListView using ArrayAdapter in Kotlin XML involves the following steps:

Step 1: Add ListView to Your XML Layout

First, add a ListView element to your XML layout file.

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

Step 2: Define Layout for Each List Item (Optional)

Create a custom layout for each item in the list if you need to display more complex data. For a simple example, let’s use a built-in layout. For demonstration purpose i will show it :-

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listItemTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:textSize="18sp"
    android:textColor="#000000"/>

Step 3: Implement ListView in Kotlin Activity

In your Kotlin Activity, implement the following steps:

1. Get a reference to the ListView from your layout.
2. Create an ArrayAdapter to bind data to the ListView.
3. Set the ArrayAdapter as the Adapter for the ListView.

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

class MainActivity : AppCompatActivity() {

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

        // 1. Get a reference to the ListView
        val myListView: ListView = findViewById(R.id.myListView)

        // 2. Prepare your data
        val items = arrayOf("Apple", "Banana", "Cherry", "Date", "Fig")

        // 3. Create an ArrayAdapter
        val adapter = ArrayAdapter(this, android.R.layout.simple_list_item_1, items)

        // 4. Set the adapter to the ListView
        myListView.adapter = adapter
    }
}

In the code above:

• R.id.myListView is the ID of the ListView in the XML layout.
• items is an array of strings that will be displayed in the list.
• android.R.layout.simple_list_item_1 is a built-in layout provided by Android, showing simple text items.

Step 4: Using a Custom Layout (item_layout.xml)

If you have created custom XML for your list item (as mentioned in Step 2) then apply code like this:

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

class MainActivity : AppCompatActivity() {

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

        // 1. Get a reference to the ListView
        val myListView: ListView = findViewById(R.id.myListView)

        // 2. Prepare your data
        val items = arrayOf("Apple", "Banana", "Cherry", "Date", "Fig")

        // 3. Create an ArrayAdapter using the custom layout
        val adapter = ArrayAdapter(this, R.layout.item_layout, R.id.listItemTextView, items)

        // 4. Set the adapter to the ListView
        myListView.adapter = adapter
    }
}

Change you custom view like as following

<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/listItemTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp"
    android:textSize="18sp"
    android:textColor="#000000"/>

• R.layout.item_layout this will load Custom item Layout

• R.id.listItemTextView :Custom layout textview ID

Advanced Usage

ListView supports features such as:

• Item Click Listener: Implement a listener to handle clicks on individual items.
• Filtering: Implement filtering to dynamically update the list based on user input.
• Custom Adapters: Create more complex adapters using BaseAdapter or RecyclerView.Adapter for better performance and more flexible views.

Handling Item Clicks

myListView.setOnItemClickListener { _, _, position, _ ->
    val selectedItem = items[position]
    // Handle item click
    println("Clicked: $selectedItem")
}

Conclusion

ListView combined with ArrayAdapter offers a simple and efficient way to display scrollable lists in Android using traditional XML layouts and Kotlin. While newer technologies like RecyclerView and Jetpack Compose provide more advanced capabilities and better performance, ListView remains a valuable option for many use cases, especially in existing applications and simpler list implementations. Ensure to consider modern alternatives like RecyclerView for better performance, especially with large datasets.