Custom ListView with item click listener (Kotlin)

How to create a ListView with image title and description and handle on item clicks, in Kotlin, using Android Studio?

      DESCRIPTION      

In this tutorial we will learn how to make custom ListView with image, title, description, and handle item clicks. I'm displaying Toast on item clicks you can do your own functionality such as going to some activity etc.

       VIDEO       

      SOURCE CODE      

Step 1: Create a new project OR Open your project

Step 2: Add some images in res>drawable folder

Step 3: Create a new "Android Resource File" in res>layout and name it as row.xml

Step 4: Create two Kotlin classes named as "Model.kt", and "MyListAdapter.kt"

Step 5: Code

row.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"
    android:padding="10dp">

    <ImageView
        android:id="@+id/iconIv"
        android:src="@color/colorAccent"
        android:layout_width="80dp"
        android:layout_height="80dp" />
    <LinearLayout
        android:layout_margin="5dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:orientation="vertical">
        <TextView
            android:id="@+id/titleTv"
            android:text="Title"
            android:textSize="15sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
        <TextView
            android:id="@+id/descTv"
            android:text="Description"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>

</LinearLayout>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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="match_parent" />

</LinearLayout>

Model.kt

package com.blogspot.devofandroid.kotlinpractice

class Model(val title:String, val desc:String, val photo:Int )

MyListAdapter.kt

package com.blogspot.devofandroid.kotlinpractice
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 MyListAdapter(var mCtx:Context , var resource:Int,var items:List<Model>)
    :ArrayAdapter<Model>( mCtx , resource , items ){




    override fun getView(position: Int, convertView: View?, parent: ViewGroup?): View {

        val layoutInflater :LayoutInflater = LayoutInflater.from(mCtx)

        val view : View = layoutInflater.inflate(resource , null )
        val imageView :ImageView = view.findViewById(R.id.iconIv)
        var textView : TextView = view.findViewById(R.id.titleTv)
        var textView1 : TextView = view.findViewById(R.id.descTv)


        var person : Model = items[position]

        imageView.setImageDrawable(mCtx.resources.getDrawable(person.photo))
        textView.text = person.title
        textView1.text = person.desc


        return view
    }

}

MainActivity.kt

package com.blogspot.devofandroid.kotlinpractice
import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.widget.ListView
import android.widget.Toast

class MainActivity : AppCompatActivity() {

    lateinit var listView : ListView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        listView = findViewById(R.id.listView)
        var list = mutableListOf<Model>()

        list.add(Model("Title One",   "Description One...",   R.mipmap.ic_launcher  ))
        list.add(Model("Title Two",   "Description Two...",   R.mipmap.ic_launcher_round  ))
        list.add(Model("Title Three", "Description Three...", R.mipmap.ic_launcher  ))
        list.add(Model("Title Four",  "Description Four...",  R.mipmap.ic_launcher_round  ))
        list.add(Model("Title Five",  "Description Five...",  R.mipmap.ic_launcher  ))
        
        listView.adapter = MyListAdapter(this,R.layout.row,list)

        listView.setOnItemClickListener{parent, view, position, id ->

            if (position==0){
                Toast.makeText(this@MainActivity, "Item One",   Toast.LENGTH_SHORT).show()
            }
            if (position==1){
                Toast.makeText(this@MainActivity, "Item Two",   Toast.LENGTH_SHORT).show()
            }
            if (position==2){
                Toast.makeText(this@MainActivity, "Item Three", Toast.LENGTH_SHORT).show()
            }
            if (position==3){
                Toast.makeText(this@MainActivity, "Item Four",  Toast.LENGTH_SHORT).show()
            }
            if (position==4){
                Toast.makeText(this@MainActivity, "Item Five",  Toast.LENGTH_SHORT).show()
            }
        }

    }
}

Step 4: Output