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"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:padding="10dp"><ImageViewandroid:id="@+id/iconIv"android:src="@color/colorAccent"android:layout_width="80dp"android:layout_height="80dp" /><LinearLayoutandroid:layout_margin="5dp"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:orientation="vertical"><TextViewandroid:id="@+id/titleTv"android:text="Title"android:textSize="15sp"android:layout_width="match_parent"android:layout_height="wrap_content" /><TextViewandroid: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"><ListViewandroid:id="@+id/listView"android:layout_width="match_parent"android:layout_height="match_parent" /></LinearLayout>

Model.kt

package com.blogspot.devofandroid.kotlinpracticeclass Model(val title:String , val desc:String , val photo:Int )

MyListAdapter.kt

package com.blogspot.devofandroid.kotlinpracticeimport android.content.Contextimport android.view.LayoutInflaterimport android.view.Viewimport android.view.ViewGroupimport android.widget.ArrayAdapterimport android.widget.ImageViewimport android.widget.TextViewclass 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.titletextView1.text = person.descreturn view}}

MainActivity.kt

package com.blogspot.devofandroid.kotlinpracticeimport android.os.Bundleimport android.support.v7.app.AppCompatActivityimport android.widget.ListViewimport android.widget.Toastclass MainActivity : AppCompatActivity() {lateinit var listView : ListViewoverride 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