RecyclerView in Android Studio [Kotlin 2020]

what is going on guys welcome back to new video tutorial on how to create recyclerview with a card view that handles a click so if you have never heard of recyclerview don't worry in this tutorial i will be explaining what is recyclerview and how to use one so recyclerview is really important for you to understand because most often you have large amount of data that you want to present to the user and phone has a limited screen states where you cannot present all of your data in one layout so you need to figure out a way to present your data in a way where the user can iterate through the data and find the required item to click on so the reason that recycle view is useful is because it recycles the card view that we have based on the number of the item that you have in the data set and even for us it would be an efficient to create hundreds or thousands of card views and reference the ids so with the help of recyclerview we can create one card view and then we pass that card view to the recycler view to keep recycling them and present it in a scrollable manner so if this is what you are looking for don't worry i've got your back and let's get started on coding alright so once you have created your new project you need to implement two dependencies in your gradle script file so you need to go to gradle script and then go to gradle build with the module app extension so click on that so in dependency section you need to add two dependencies one for cod view and one for recyclerview so right below the constraints layout dependency just paste your two dependencies and then just click on this to fix this problem so once you have your two dependencies don't forget to sync your app so click on sync now and now we need to create a new layout for our card view so open resources and then go to layout and then right click on layout and then click on new and then click on layout resource file and name your layout as card layout and then you need to change this to widget card view and then click on ok so once you have your card layout.xml um hide this for a moment and click on split screen so that you start on coding and right before closing tag you need to add more attributes to your cart view widget and so you need to provide an id so the id could be card view and then you need to add a margin of 5 db and then you need to add a background color for your card view so background color and the color is green so you can choose whatever color that you want and then you need to add a corner radius to make it more round so card corner radius of 12 dp and then card elevation of 3dp and then content padding of 4dp and don't forget to change the height to wrap content so once you have your card view we need to add some attributes to your card view and you need to add your constraints layout so match parent and then wrap content and then you need to provide an id the id would be relative layout and then add padding of 16 dp and once you have that just close the tag and inside your card view you need to have one image view and two text view one for the title and one for detailed description so image view and the image view would be of 100 dp and for the height would be 100 dp as well and did not forget to provide an id and the id would be item image and then we need to constrain our image in the card view so constrain top to the top of parent and then constrain left to the left of parent as well so this is it for the image and then we need to add two textviews so um textview and the width would be 236 dp and the height would be 39dp and provide an id for it as well so the id would be item title and then we need to constrain the title to the left of the image view so constrain top to the top of parent and then we need to have constraints left to the right of the image view so we need to add constraint left to the right of the image view so item image so we need to add a margin start of 16 db to push it a little bit to the right and then we increase the text size to 30 sp and then close the tag and once you have that we need to create one more text view for our detailed description and the width would be 236 gp and the height would be 16 dp and the id would be item detail and we need to add a margin start of 16 db as well and then margin top of 80p and now we need to constrain our detailed description so that we align it underneath the item title so constrain top to the bottom of the id of item title and then constrain left to the right of item image and then we close the tag so this is it guys we will only create one card view and then we will keep recycling them with the help of recycling view and now we have one card view that has one image view and two text view one for title and one for description so once you have this you need to go to projects and then click on app and right click on that create a new kotlin file so name it recycler adapter and change the file type to class and then click on enter all right so once you have the recycler adapter class you need to implement recyclerview interface so recycler view interface and then dot adapter and pass the same recycler adapter and then we will create an inner class of view holder in a bit so the reason that you have an error here because you need to implement some members and you need to implement oncreateviewholder and get item count and onbindviewholder as well so we need to implement these methods for our recyclerview so we will get back to these three methods but now we need to solve this red line because we do not have a view holder class inside our recycler class so we need to create an inner class so that it handles the data that we passed to the card view so let's create an inner class of view holder and our class would receive an item view object with a type of view and then we need to implement recyclerview class and then view holder and then we will pass the item view to the class so once we have created our any class we need to create three variables so variable item image and the type would be an image view and then we need to have a variable item title and the type would be text view and we need one more variable for our description details so var item detail and the type would be text view and we need to initialize them so edit and then item image and that would be the view object that we will pass in oncreateviewholder so item view and then find view by id and then resources.id dot item image so this is the id that we have provided for our image view and our card layout.xml so we need to do the same for the others item title and then item view dot find view by id then resources then id then item title and then item detail and then we will assign item view object and then find view by id then resources then id so once we have initialized our three variables now we need to go to oncreateviewholder to inflate our card layout and to pass the view object to this constructor so let's do that and remove this and we need to create a view object so valve and then we need to inflate our layout so layout inflator and this from our parent dot context and then we need to inflate it and then we need to access our layout in our resource file so layout and then cut view and then we need to pass the patent object and set attach to root to false so once we have the view object we need to pass it to a view holder object and return that so return view holder object and then pass the view object to it alright so once you have this now we need to work on these two methods but prior to that we need to have our data set so we need to import our images and we need to create an array for the title and array for our details so let's do that all right so to import our image to drawable folder just drag the image and put it in drawable folder and then click on ok so once you have imported your image now we need to create three arrays one for our images and one for our titles and one for detailed descriptions so let's do that so right below our recycle adapter class we need to create our arrays so private bar and then i will call it titles and then this would be array of titles so chapter one and we need to create eight chapters so chapter two so to save time i will do the rest all right guys so i had eight chapters and now i need to create two more variables one for detailed description and one for images so private bar details and then this would be array of details so item one details and i have done it for the rest and now we need to create a private variable for the images so images and array of resources.drawable.android and then we need to keep copy pasting this image eight times because we will use the same image for all of our chapters alright so once you have done it we need to go to these two methods so that we finish the logic for our recycler adapter class so the first method just creates our card view and inflate it and pass it to our init class and the second method get item count this is really important because we need to identify how many items we are passing to our view holder so you need to return the number of the indices so titles dot size would return the number of the items that you have and now we need to work on onboard view holder so this would basically populate our data to our card view so let's do that so we have our recycle adapter object so holder and then we need to access item title and then dot text and then assign the titles array and luckily we have the position index here so position and this function would keep iterating through the array and now we need to do the same for details and images so holder and then item detail and then text and set that to details and then position and the last one is item image so holder and then item image and then set resources and then pass the images array and then pass the position to it and now we need to go to the main activity to set our layout manager and then set the adapter to the card view so in our main activity we need to create two objects one for layout manager and one for adapter so let's do that private bar and then layout manager and the type would be recycler view dot layout manager and then check if it's no and we set it to no and we do the same for the adapter so private bar and then adapter and the type would be recycler view and then adapter and the tab would be recycle adapter class that we have created and then view holder and we check if it's null and then we set it to no for now and once you have that you need to initialize them in oncreate method so layout manager and we set it to linear layout manager and then we pass this to it so once you have initialized our layout manager object we need to set this layout manager to the recyclerview container that we will set in dot main so let's split the screen so in our activity main we have a hello world we can just change this to recycler view widget and remove the hello world for a moment and then change this with to match parent and then this one to match parent as well and do not forget to add an id to it so the id would be via recycler view so once you have this container for our recyclerview we need to access this id in our main activity so just have it here and then access layout manager and then set it to our layout manager the one that you have just created here and now we need to initialize our adapter so the adapter would be recycler adapter and then we need to set it to our recycler view id and then adapter and then set it to the adapter that you have so guys this is it so let's run our app to see our result all right guys so we have successfully built our recycler view however it does not handle clicks and this is really easy all you need to do to add onclick listener in our in a class view holder our recycler adapter class and we will do it in a bit and i will show you how to change this color to black in case you do not like purple so go to recycler adapter and then go to your inner class and in here we need to set on click listener to the item view so item view and then set on click listener and once you click on the item we need to get the position of the item so while position and the type would be end and set it to adapter position and create a toast message to see if it works so toast and then item view and then context you clicked and then have a template for it and then titles and then pass the position and set the length for the message so toast length long and then show the message and this would handle the click and in our case we just show a toast message however you can do whatever you want here you can trigger a new activity or open a new fragment and pass whatever data that you want to show to your user and before we run our app i would like to show you how to change the color of the action bar just in case you want to change it go to projects and then app and then resources and then values and then click on style.xml and here you can change the color for your app so click on this and then you can go to customize in our case i will pick black and then do the same for the rest so black and black so if you run your app one more time to see the result alright so we have changed this color to black and our recycler view works perfectly and if you click any of these it would show the message so you clicked on chapter 4 and if you click on free chapter 3 has been clicked alright guys we have done it if this is your first time here and you want to learn how to build mobile applications web development and programming tutorials in general please consider subscribing and click on the bell notification so that you do not miss on anything so see you guys in the next video and happy coding

Channel: CodeWithMazn

Views: 18,286

Rating: 4.8125 out of 5

Keywords: android tutorial, recyclerview, android recyclerview, recyclerview example, recyclerview tutorial, android recyclerview tutorial, android recyclerview example, how to use recyclerview, android scrolling list, recyclerview with images, recyclerview with images and text, custom recyclerview, recyclerview android, Kotlin, android studio tutorial, android recyclerview cardview, android cardview, android cardview tutorial, android cardview and recyclerview, cardview, list, android, studio

Id: UCddGYMQJCo

Length: 15min 48sec (948 seconds)

Published: Thu Sep 10 2020