Custom ListView with item click using Kotlin in Android || ListView in Android || Kotlin

hey there everyone welcome to another video fox androids so in this video we're going to learn how to implement a custom list view along with the item click listener using kotlin as the back end language right i have made the same tutorial but using java is the backend language but many of you have requested to make the same tutorial in kotlin so i'm doing so so let me just give you a brief remediation of what we will get by the end of this video so you can see we have certain users inside our custom list view right so if i click on any user we move to the next activity but we do pass the data from this uh first activity to the second activity and display that data for that particular user in the second activity for example you can see here mic the phone number and the country of that user along with the picture has been displayed to this detailed activity right so let me click on some other user for example ivana craig right this is what we're gonna get by the end of this video so if you want to implement the same into your application make sure you watch this video till the end so without wasting any time let's get started so guys if you're new to this channel make sure to hit that subscribe button press the bell notification icon for receiving your notification of the upcoming videos and by the end of the video if you like the video make sure to hit that thumbs up button so let us first design the front end part so for that i'll just uh come to my main activity where i want to display this list view so we're gonna implement a list view here we'll set the width and the height as match period we'll give it id this view okay that is all we need to do in the main activity so we have put the list view in this activity so for designing the individual item we have to take a new resource file and we have to design the individual item a single item for the list view right so for that i'll just create a new layout resource file we'll name it as list item and set the layout to linear layout so now let me quickly just design this individual item then we'll discuss what we have done here right so if you're following along with the this tutorial then i would like to let you guys know that you need to implement this library for the circular image that you have used i'll put this library in the description below you can just go ahead and copy this and put it in the app level build.gradle file and sync your project right then you can proceed further so now let me quickly just design this item right um so okay guys we have designed the individual item for our list view right so here you can see we have put this image view the text views and the textview for the time as well so just to give you a better demonstration for this tutorial sake i'll be using certain images so i have those images in my local device so i'm gonna simply copy this and paste it to the drawable folder so if i just set the source for this circular image view here you can see this is how our individual item will look like now let us see that how it will look in the list view so if i just set the list item to the list item so this is how our list view will look like right so now let us dive into the back end code so before going there we need to enable the view binding so for that i'll just come to this build.gradle file so okay let this thing be completed i'm gonna skip this so guys the sync has been completed now for storing the data of the individual user we need to create a data class so just right click here cartoon class select the data class here and we'll name it as user so now inside this class i'll define certain variables right it can vary according to your requirement so for instance here we'll be using name last message message time country phone number etc so you can define all those variables uh what your application demands so let me quickly do this okay we have defined all the variables here and now we are done with the data class now to feed the data to the last view we need a adapter as we always know that if we are implementing any kind of last view recycler view so we have to make adapter so let us just create a new cotton class so i'll name it as my adapter so now the constructor of this adapter class will take certain arguments right so let me declare that so the first one will be the context the second argument it will take is basically a list that will contain the data for all the users so that will be array list so the data type for that will be user now this class will extend the arrayadapter class so let me do that real quick okay so the data type here will be user and inside the constructor of this class will pass the context that we got and the second thing is the list item resource and the last one will be arraylist right so now we are done here so here we'll overwrite a method that is getview so we need a view objects for that we'll just create an inflator the type of which will be loaded later okay here we have created object of view class so now we're gonna refer to all the individual items that we have there in the list item resource file so the first one is image view and we have i guess four text views so let me quickly do that so guys in these four variables we have referred to the elements of this class uh this basically resource file so i guess here i have forgotten to give it id here this textview it's okay we are referred to all the four elements in this adapter class message time right now we'll set the data to all the all those four elements because we have got the users inside this array list so from this array list according to the position of the item in the last view we will set the data so let me close that so okay here we have set the data to all the four elements and now we're gonna return this view so we are pretty much done with the adapter class now let us i guess there is some error it's okay we are done with the adapter class now we'll go to the main activity so let me do we first do the view binding thing so now we're gonna have a static data for feeding to this list view right so we need certain images the name last message and time so i'll create a data basically will create certain arrays that will contain this data for example for the image id array off so now let me quickly refer to all the images in the drawable folder so now we have got the ids of these images inside the drawable folder now we will define certain names so now i have these names inside my text file so i'll simply copy this to save some time and we'll paste it here right me okay guys we have got all the data inside these arrays right for example phone number last message time message and all this stuff so now let me declare arraylist we have got the reference variable for the array list let me initialize the surrey list so now we are going to use a for loop for i in name dot indices so what basically we are doing here is for example here we have nine names so we want to loop through nine times and make a user object and store it to this arraylist now okay guys now we have got all the data inside this array list so the last thing we want to do is we want to set the adapter binding dot list view dot adapter is equal to my adapter will create object of that and will pass the context and this array list right so okay now we are done with everything now we want to implement the on click feature as well so for that binding dot list view dot is clickable we will set it to true and now we gonna set the on click listener on this right set on item click listener so now we'll get the position on which the user has clicked so with the help of that position what we're gonna do is we're gonna get all the data inside these variables so now we have got all the data for that particular position where user has clicked inside these variables right now we want to send it to the next activity so for that we'll create an intent object so we have this intent object now to send the data to the next activity there is this method called put extra so that will take the key value pair so first one is the key and we have the pair so we'll do for all the four elements now we're gonna call start activity right so now here we have sent all the data the name phone number country and the image id you can add another data if you want to send to the next activity so just for your reference i've already designed this activity right i didn't want to design it because it would have wasted a lot of time this is just a simple text views and image id so let me go to the backend code for this first we'll do view binding thing okay guys this is how we get the data that has been passed from the last activity so for example here the keys were named phone country and image id right so i've used the same keys to get the data and we have used this get string extra if the data that has been passed is a string type then we'll use string extra and if it is integer we'll use get in extra now i'm gonna set all this data to the elements of this activity so okay guys we we have set all the data to the elements all the four elements in this activity so now we are done with everything now let me quickly just install this app to my cell phone and check if it is working fine or not right okay guys the app has been installed to my cell phone as you can see on my mobile screen we have got all the users inside this list view so if i click on any user right so you can see we have got all the data the name phone number and the country for that user so i guess we have successfully implemented this feature to our android application and i also hope that you guys have understood the code in case you have any doubt you can always ask me in the comment section or you can dm me on instagram the instagram username will be there on your screen right now i'll also put the link for the source code in the description below if you want you can check out the source code as well and if you like the video make sure to hit that thumbs up button and in case you're new to this channel make sure to hit that subscribe button and press the bell notification icon for seeing notification of the upcoming videos so that is it for today's video see another video bye [Music] you

Channel: Foxandroid

Views: 52,972

Keywords: customlistview, item click listener, custom listview android tutorial, custom listview android kotlin, listview example in kotlin, listview in kotlin, listview image with text in android, item click listener listview android, kotlin, android kotlin, custom listview, how to create custom listview, listview item click listener kotlin, listview kotlin, listview adapter kotlin, custom listview adapter kotlin, custom listview with item click listener, item click listener listview, 2021

Id: KPvYXXERLjk

Length: 19min 43sec (1183 seconds)

Published: Sat May 01 2021