RecyclerView using Kotlin 2021 || Android RecyclerView in Kotlin || Kotlin RecyclerView Example

hey there everyone welcome to another video of fox android so in this video we're gonna learn how to implement a recycler view using kotlin as the back end language so let me just give you a brief demonstration of what we're gonna get by the end of this video if you can see on my mobile screen so this particular activity gimmicks a news app where we have certain news headlines right so if we tap on something it goes to the next activity that feature is not implemented in this video but this is a recycler view in which we have certain items so we gonna learn how to implement this to our android application if you want to learn the same make sure you watch this video till the end so without much room let's get started so guys if you're into this channel make sure to hit that subscribe button and press the bell notification icon for seeing the 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 as well so let's first go to the main activity xml file so we're gonna implement a recyclerview here we'll set the width and the height as match parent and we'll give it id so let me just give it id recycler view only you can manipulate it according to your application we are going to design a list item basically a list item is an individual item of the recycler view in which we define the layout for that particular item and so for that i'll just right click here new layout source file and we're gonna name it as list item and again you can modify this name according to your application so now we're gonna design this list item so the very first thing i'm gonna do take is shapeable image view that is a part of our material library so we'll set the width as 80 dp and the height as 80 db as well will give it a idea of title image and we'll set the scale type as center crop adjust we want the true so let me quickly just design this then i'll let you guys know what we have done right so okay let me just take a pause here you can see i'm using this shape overlay feature right and i've set it to round corner so this is not a predefined style so let me just go to my styles if you go to themes i have created this style right so this is used to make the corners of the image as round corners right it gives a nice look if you want to skip this you can do that right but if you want it you have to just write these lines of code inside your themes xml so let me continue the design so okay guys we are done with the design so let me just emphasize on few things the very first thing is if you are uh just replicating this thing make sure that this v is capital you can also take the view with the small v it will throw a error then the app would crash right so i want to make sure that you do not do this mistake and the second thing is the color i've used is the underline color so the hash code for that is this thing if you want to use this color you can just put in this color code i'm gonna use few pictures for this tutorial so i have that in my local device so let me copy all of these and i'll put it in the drawable folder i'll also provide the link for all these pictures in the description below you can just get these images from that link right so if i set the source for this image just a so this is how our individual item would look like right we have a picture the heading and there is a divider line right that separates two items so that is all we need to do into our front end part right so now to hold the data of an individual item for example this item contains an image and a heading we need to create a data class uh your individual item can contain uh more than these things for example it can contain five things two text views a time stamp and image so you can manipulate this according to your application so let me just will create a cotton class and here you need to select data class right so i'll just uh name it as news data class right again you can manipulate it according to your application so as i told you that our list contains two items the image and the title so i'll declare two variables here so how do we do that title image and the type of it will be end because it will be storing the resource id of this images heading and it will be a string so if for example your list item contains four items you can just increase it here and declare it and now to feed this all the data that we have into the recycler view we need an adapter so for that we'll create a new cotton class i'll just name it as my adapter now this class constructor will take one argument that will be an arraylist so i'll name it as newslist and the type of fetch will be arraylist and it'll contain the objects of news class now this class will extend cyclerview.adapter and here we'll define my adapter dot my viewport right so don't worry about it we'll just create this in a while so let me first create this class so we'll name it as my viewholder and it will take this is an argument so it will extend recyclerview dot view holder and we'll pass item view here right let us implement this by pressing alt enter so now we need to implement certain methods so click here alt enter we need to implement the members will implement all these three members so okay now we have created this let me just put it below these methods right okay now when this get count method will be called we'll just return newslist dot size will return the size basically tells the the adapter that how many items are there will be there in the cycler view so we'll return this size of the arraylist that we receive and now let me just override this method quickly so okay we have referred to these two elements here for example this image image view and the heading right so if you are having more items you need to refer all those items inside this my view holder class now we'll override this oncreate viewholder and we're gonna return my viewholder object and will pass this itemview as an argument now the last thing we need to override is this onbindviewholder so we'll take the current item of this newslist inside this current item by passing the position as an argument and now we'll set the image and the title according to the position of the item set image resource and we'll get it from the current item the second thing we need to do is heading so okay that is all we need to do inside this adapter right i guess there is some error here okay basically we need to put this two brackets for the invocation of the constructor so now i'll go to the main activity where we need to implement this recycler view so i'll declare certain variables let me do that so okay we have declared these variables the first one for the recycler view and the second one is the arraylist for containing the news items and the image id and heading for storing the data of the images and the heading rate so let me initialize the image id array array of so i already have the data for these images so just to save some time i'll copy it from here and paste it here right so basically it is the zos ids of all these images still here right and the second thing we need to initialize is the heading so basically this heading will contain the headings of the news i have this as well we won't be typing it again copy it and paste it here right now we're gonna refer to the recycler view using find wipe view by id [Music] so we'll set the layout manager as linear layout manager and will pass the context here so these are certain attributes that you need to set and will initialize this array list as well so it will contain the elements of news type so now we'll just create this method get data or feeding the data inside this array list so let me quickly create this method so now we'll just loop through all these uh items of the array and we'll create object of this class and store it inside this array list so let me quickly do that so okay guys that is all we need to do to implement this thing and let me just check it okay okay one more thing you need to make it wrap content otherwise it will just cover the whole screen right so let me just quickly install this app to my cell phone and see if it is working fine or not right so okay guys the app has been installed to my cell phone as you can see on my mobile screen everything seems perfect we can see all the items inside the recycler view and i also hope that you guys have understood the code in case of 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 and if you like this video make sure to hit that thumbs up button and in case you're new to this channel make sure to hit the subscribe button and press the bell notification icon for sending the notification of the upcoming videos so that is it for today's video see another video bye [Music] you

Channel: Foxandroid

Views: 12,708

Rating: 4.7522125 out of 5

Keywords: kotlin recyclerview, android kotlin recyclerview, kotlin recyclerview android, android recyclerview, recyclerview kotlin, recyclerview androidx dependency, recyclerview androidx, androidx recyclerview example, recyclerview explained, recyclerview clip to padding, recyclerview example, recyclerview, recyclerview kotlin 2021, recyclerview kotlin foxandroid, news app recyclerview, kotlin, android studio, kotlin recyclerview example, kotlin recyclerview adapter, android tutorial

Id: UbP8E6I91NA

Length: 16min 28sec (988 seconds)

Published: Thu May 06 2021