ListView With ItemClickListener using Kotlin

Richard | April 21, 2018 | Android, Kotlin | No Comments

Hi guys, In this tutorial we are going to learn how to implement ListView with ItemClickListener using Kotlin. In this tutorial we will display a list of fruit names, images and a short description which in this case we are going to use scientific name of that fruit, When an item is clicked we shall display a toast message showing the name of item clicked.

The expected output is.

When you click on item it will display the name of clicked item.

ListView With ItemClickListener using Kotlin

Let’s get started.

Contents

1 Creating a new kotlin project
2 Adding ListView to our Activity
3 Adding fruits to drawable folder
4 Creating Resource Layout file to hold RecyclerView data
5 Writing Custom Adapter that extends base adapter
6 Share this:
7 Related

Creating a new kotlin project

To create a new kotlin project, Open your android studio click File => New Project => provide a name in this tutorial i named the project recyclerkotlin => Tick the checkbox below which says include kotlin support.

kotlin new project

Continue by clicking next => Empty Activity and Finish.

Adding ListView to our Activity

Open your activity_main.xml and copy paste the code below.


<!--?xml version="1.0" encoding="utf-8"?-->
<Relativelayout 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="com.example.larntech.listviewinkotlin.MainActivity">

<Listview android:id="@+id/listview" android:layout_width="match_parent" android:layout_height="wrap_content"></Listview>
</Relativelayout>

</Relativelayout>

Adding fruits to drawable folder

Download fruit images by clicking the link below.

Unzip copy and paste the image in the drawable folder.

download fruits

Creating Resource Layout file to hold RecyclerView data

Right click layout folder which is under res folder.

Select New => Layout Resource File and name it row_data.

This is the xml file which will hold the listview data.



<!--?xml version="1.0" encoding="utf-8"?-->
<Relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" 
android:paddingtop="20dp">

<Relativelayout 
android:layout_width="match_parent" 
android:padding="10dp" 
android:layout_height="wrap_content">

<Imageview android:id="@+id/fImage" 
android:layout_width="60dp"
android:layout_height="60dp"
android:src="@drawable/apple"/>

<Textview android:id="@+id/fname" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignparenttop="true" android:layout_marginstart="15dp" android:layout_toendof="@+id/fImage"
android:text="Apple"
android:textcolor="#212121"
android:textsize="24dp"/>

<Textview android:id="@+id/fdesc" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignstart="@+id/fname" android:layout_below="@+id/fname" 
android:text="Malus Domenstica" 
android:textsize="20dp" 
android:textstyle="normal|italic"/>
    </Relativelayout>
</Relativelayout>

<Relativelayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"

android:paddingtop="20dp">

<Relativelayout

android:layout_width="match_parent"

android:padding="10dp"

android:layout_height="wrap_content">

<Imageview android:id="@+id/fImage"

android:layout_width="60dp"

android:layout_height="60dp"

android:src="@drawable/apple"/>

<Textview android:id="@+id/fname" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignparenttop="true" android:layout_marginstart="15dp" android:layout_toendof="@+id/fImage"

android:text="Apple"

android:textcolor="#212121"

android:textsize="24dp"/>

<Textview android:id="@+id/fdesc" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignstart="@+id/fname" android:layout_below="@+id/fname"

android:text="Malus Domenstica"

android:textsize="20dp"

android:textstyle="normal|italic"/>

</Relativelayout>

Writing Custom Adapter that extends base adapter

Base Adapter is the general Adapter

We will use it to create list view items



class CustomAdptor : BaseAdapter(){
    override fun getView(p0: Int, p1: View?, p2: ViewGroup?): View {
        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
    }

    override fun getItem(p0: Int): Any {
        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
    }

    override fun getItemId(p0: Int): Long {
        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
    }

    override fun getCount(): Int {
        TODO("not implemented") //To change body of created functions use File | Settings | File Templates.
    }

}

class CustomAdptor : BaseAdapter(){

override fun getView(p0: Int, p1: View?, p2: ViewGroup?): View {

TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

}

override fun getItem(p0: Int): Any {

TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

}

override fun getItemId(p0: Int): Long {

TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

}

override fun getCount(): Int {

TODO("not implemented") //To change body of created functions use File | Settings | File Templates.

}

Open your MainActivity copy and paste the code below.


package com.example.larntech.listviewinkotlin

import android.app.Activity
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.view.ViewGroup
import android.widget.*

class MainActivity : AppCompatActivity() {


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

        var listView = findViewById(R.id.listview);

        val customAdptor = CustomAdptor(this)
        listView.adapter=customAdptor

        listView.setOnItemClickListener{ parent, view, position, id -&gt;
            Toast.makeText(this, "You Clicked:"+" "+position,Toast.LENGTH_SHORT).show()
        }



    }
}

class CustomAdptor(private val context: Activity): BaseAdapter() {
    //Array of fruits names
    var names = arrayOf("Apple", "Strawberry", "Pomegranates", "Oranges", "Watermelon", "Bananas", "Kiwi", "Tomato", "Grapes")
    //Array of fruits desc
    var desc = arrayOf("Malus Domestica", "Fragaria Ananassa ", "Punica Granatum", "Citrus Sinensis", "Citrullus Vulgaris", "Musa Acuminata", "Actinidia Deliciosa", "Solanum Lycopersicum", "Vitis vinifera")

    //Array of fruits images
    var image = intArrayOf(R.drawable.apple, R.drawable.strawberry, R.drawable.pomegranates, R.drawable.oranges, R.drawable.watermelon, R.drawable.banana, R.drawable.kiwi, R.drawable.tomato, R.drawable.grapes)
    override fun getView(p0: Int, p1: View?, p2: ViewGroup?): View {
        val inflater = context.layoutInflater
        val view1 = inflater.inflate(R.layout.row_data,null)
        val fimage = view1.findViewById(R.id.fimageView)
        var fName = view1.findViewById(R.id.fName)
        var fDesc = view1.findViewById(R.id.fDesc)
        fimage.setImageResource(image[p0])
        fName.setText(names[p0])
        fDesc.setText(desc[p0])
        return view1
    }

    override fun getItem(p0: Int): Any {
        return image[p0]
    }

    override fun getItemId(p0: Int): Long {
        return p0.toLong()
    }

    override fun getCount(): Int {
        return image.size
    }

}

package com.example.larntech.listviewinkotlin

import android.app.Activity

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.view.View

import android.view.ViewGroup

import android.widget.*

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_main)

var listView = findViewById(R.id.listview);

val customAdptor = CustomAdptor(this)

listView.adapter=customAdptor

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

Toast.makeText(this, "You Clicked:"+" "+position,Toast.LENGTH_SHORT).show()

}

class CustomAdptor(private val context: Activity): BaseAdapter() {

//Array of fruits names

var names = arrayOf("Apple", "Strawberry", "Pomegranates", "Oranges", "Watermelon", "Bananas", "Kiwi", "Tomato", "Grapes")

//Array of fruits desc

var desc = arrayOf("Malus Domestica", "Fragaria Ananassa ", "Punica Granatum", "Citrus Sinensis", "Citrullus Vulgaris", "Musa Acuminata", "Actinidia Deliciosa", "Solanum Lycopersicum", "Vitis vinifera")

//Array of fruits images

var image = intArrayOf(R.drawable.apple, R.drawable.strawberry, R.drawable.pomegranates, R.drawable.oranges, R.drawable.watermelon, R.drawable.banana, R.drawable.kiwi, R.drawable.tomato, R.drawable.grapes)

override fun getView(p0: Int, p1: View?, p2: ViewGroup?): View {

val inflater = context.layoutInflater

val view1 = inflater.inflate(R.layout.row_data,null)

val fimage = view1.findViewById(R.id.fimageView)

var fName = view1.findViewById(R.id.fName)

var fDesc = view1.findViewById(R.id.fDesc)

fimage.setImageResource(image[p0])

fName.setText(names[p0])

fDesc.setText(desc[p0])

return view1

}

override fun getItem(p0: Int): Any {

return image[p0]

}

override fun getItemId(p0: Int): Long {

return p0.toLong()

}

override fun getCount(): Int {

return image.size

}

That’s all, Run your app and you will have output similar to one shown below.

If you have a question or need help please comment below

To download source code click here

Learn how to create RecyclerView using kotlin

LarnTech

ListView With ItemClickListener using Kotlin

Creating a new kotlin project

Adding ListView to our Activity

Adding fruits to drawable folder

Creating Resource Layout file to hold RecyclerView data

Writing Custom Adapter that extends base adapter

Related

About The Author

Richard

Creating a new kotlin project

Adding ListView to our Activity

Adding fruits to drawable folder

Creating Resource Layout file to hold RecyclerView data

Writing Custom Adapter that extends base adapter

Share this:

Related

Related Posts

About The Author

Richard