ListView With ItemClickListener using Kotlin
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.
- Let’s get started.
- 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.
- Continue by clicking next => Empty Activity and Finish.
Contents
Creating a new kotlin project
Adding ListView to our Activity
Open your activity_main.xml and copy paste the code below.
|
1 2 3 4 5 6 7 8 |
<!--?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> |
Adding fruits to drawable folder
Creating Resource Layout file to hold RecyclerView data
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!--?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> |
Writing Custom Adapter that extends base adapter
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
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. } } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
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 } } |
