Listing Activity using ListView in Android Studio – Kotlin

In this article, we will learn how to develop a Listing Activity using Listview in Android Studio in Kotlin. At the end of this tutorial, the following screen will be designed.

Products Listing Activity - Handy Opinion

BaseAdapter is a base class of general implementation of an Adapter that can be used in ListView. Whenever you need a customized list, make your own adapter and extend the base adapter on it.

Activity Main XML File

Copy and Paste the following code in your activity_main.xml file.

<?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">

<ListView
    android:id="@+id/simpleListView"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:divider="@color/material_blue_grey_800"
    android:dividerHeight="1dp"
    android:footerDividersEnabled="false" />
</LinearLayout>

List View Item XML File

Now we have to create a new list item XML in your Android Studio with the name of list_item. Copy the below code in activity_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="match_parent"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/ic_launcher_foreground" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="18dp"
        android:textSize="18dp"
        android:textColor="@color/black" />
</LinearLayout>

MainActivity Code

First, we need to initialize the ListView object that we have added in XML. Then we will assign an adapter to the list view to populate the list items. We will also create Custom Adapter to display the country names with images. All Flag images are store inside a drawable folder.

package com.example.productlistingkotlin

import android.app.Activity
import android.os.Bundle
import android.view.View
import android.widget.ListView


class MainActivity : Activity() {
    var simpleList: ListView? = null
    var countryList = arrayOf("Pakistan", "Turket", "Saudi Arabia", "Iraq", "Qatar")
    var flags = intArrayOf(R.drawable.pakistan, R.drawable.turkey, R.drawable.saudiarabia, R.drawable.iraq, R.drawable.qatar)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        simpleList = findViewById<View>(R.id.simpleListView) as ListView
        val customAdapter = CustomAdapter(applicationContext, countryList, flags)
        simpleList!!.adapter = customAdapter
    }
}

CustomAdapter Code

Now we have to create a Custom Adapter java class that will extend from the BaseAdapter. In this class, we have the getView() method which gets called automatically to populate each list item. We also need to override getcount() method to return the total list items count. Copy and Paste the following code in your CustomAdapter.java file.

package com.example.productlistingkotlin

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


class CustomAdapter(
    applicationContext: Context?,
    countryList: Array<String>,
    flags: IntArray
) :
    BaseAdapter() {
    lateinit var context: Context
    var countryList: Array<String>
    var flags: IntArray
    var inflter: LayoutInflater
    override fun getCount(): Int {
        return countryList.size
    }

    override fun getItem(i: Int): Any? {
        return null
    }

    override fun getItemId(i: Int): Long {
        return 0
    }

    override fun getView(
        i: Int,
        view: View,
        viewGroup: ViewGroup
    ): View {
        var view = view
        view = inflter.inflate(R.layout.list_item, null)
        val country = view.findViewById<View>(R.id.textView) as TextView
        val icon =
            view.findViewById<View>(R.id.icon) as ImageView
        country.text = countryList[i]
        icon.setImageResource(flags[i])
        return view
    }

    init {
        this.countryList = countryList
        this.flags = flags
        inflter = LayoutInflater.from(applicationContext)
    }
}

That’s it. This is how to develop a Listing Activity using Listview in the Android Studio Kotlin.

If you have any questions or suggestions, feel free to ask in the comments section below. Thanks

Next Articles

1. Products Listing Activity in Android Studio – Java
2. How to Validate an Email in Android Using Kotlin
3. Reset Password Activity in Android Studio Kotlin and Java
4. Forgot Password Activity in Android Studio Java and Kotlin

Please share this post:
Posts created 41

Ask a Question

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

%d bloggers like this: