RecyclerView - Android Studio Tutorial | Part 1

hello there and welcome to my new video in this video I'm going to show you how to implement recyclerview in your android application so I got many requests on this topic so here it is so first we're going to add a recycler view inside our main activity layout so you will get this message and just pick okay and this will basically add automatically implementation inside our build the Gradle module application file here so as you can see there it is okay so now that we have that we need to set our recycler view width and height to match the parent so it's already default value so that's good so we can proceed next next what we are going to do we are going to create two strings arrays so we're going to open our strings.xml file and here we are going to add two string arrays so the first string array will be named programming languages so here we are going to create ten different names for our programming languages so I have already chose the list of languages which I will use in this example I have also downloaded those images for those programming languages and we need to follow the order of those languages titles inside our string array so as you can see I'm almost done and next the second string array will be just a description for those for each of those programming languages but I won't be typing different description for each of those languages I will just copy and paste this simple item here this is a random description and we will use this description for for all of those programming languages so the next thing we are going to do we are going to head over to main activity and we are going to create two string arrays as well and one integer array so inside our two first string arrays we're going to set our programming language titles and description and in the second one we are going to use our our images so I'm going to copy and paste those images inside our drawable directory here okay and I'm just going to paste that here okay and now we are going to initialize those images inside our integer array so remember to follow the order in which we used our programming language titles so the first one is a C++ the second C sharp next Java JavaScript next is Quadling python ruby swift type script and the visual studio so remember to follow that order because we're going to need that inside our recycler view you will see okay and visual studio so that's it alright so next in our own create method we are going to get a resource and use a get string array method so we are going to store our string array for the programming languages inside our string variable s1 and inside our variable s 2 we are going to store string array for descriptions ok and after that we are going to add the ID for our recycler view so we forgot that to add that so here we are just going to type ID and new ID will be for example recycler view it's just that simple we don't need to complicate this so inside our main activity we're just going to add a recycler view object and inside on create method we are going to find the ID for our recyclerview okay just type that equals to find the ID find view by ID and just type r dot ID dot recyclerview okay next we're going to create a new Java class so this class will be basically a recyclerview adapter so I will call this my adapter and just click OK alright next we're going to this class will extend one more class which is a recycler view dot adapter okay recycler view dot adapter and we need to pass a one parameter here inside and that will be our inner class so we're going to create a new inner class named my view holder so we're going to create this inner class inside our main adapter class so just click this ok and we have another inner class inside our main my adapter okay so we need to extend another class which is a recycler view dot view holder and here we need to we need to add a constructor of course for our new class and for our main class which is my adapter we need to implement implement few methods here so those are on create view holder on bind view holder and get I can count so don't be scared of those of those methods I will explain everything you need to know ok so there is one more thing we need to add inside our main my adapter and that's constructor so just type public my adapter and we need to add four parameters the first parameter is of course context the second parameter will be basically a string array for titles for programming languages titles and the second one will be for descriptions so create another string array and the third one will be array for images so will be integer array okay and now on top of that we are going to add context and of course we're going to create new variables to hold our values which we will pass inside our main activity so just add that those four and now we are going to store those those values inside our constructor so just type beta 1 equals to s 1 theta 2 equals to s 2 and image images equals to images so I think we should change this parameter here to IMG maybe so we can recognize each other okay now now it looks better ok and now that we have created that I think we can initialize our class now inside the main activity and pass all the values which are necessary for this project so here in oncreate method we are going to initialize our new class and we are going to create my adapter object here and we are going to pass 4 parameters so the first parameter is context which is main activity this the second parameter is this string array for titles the second one for description and the third one for images alright so now we are we have passed those values here from main activity to my adapter class and now we are going to start working with our adapter class so as you can see now that we have passed all those values here we can proceed and start with on create view holder method here inside okay but before that I'm going to create a new layout resource file and I'm going to name that my row so this this layout will represent each and every row inside our recycler view I'm going to switch from linear layout token to constraint layout so it will be easier for me to design appropriate recyclerview so I'm going to add here a card view here so just click OK and it will Auto it will automatically add dependency inside the build inside our grid or build file ok as you can see it's automatically added so inside our card view we are going to add one image view in two text views but before that I want to add one more one more constraint layout inside the card view because I want to be able to to design those image views and text use more easily so image review here I'll just select default image for for Android okay and two text views so now we just design those text views on the right side a little bit so the first one will be a title the second one will be description and I'm just going to connect those constraints here with the first text view will be constrained to a image view so before that I'm going to change the ideas of those UI elements so may be programming language text and description text maybe for the image view we can say my image view and I think we should short we should make shorter ID for text views so I'm just going to say my text view 1 and my text for example okay okay and for the text I will just type here a title and down below description so I might change some style and text size for those text views so text size for the title will be 24 SP text style bold and for the description text size the 16 Espie and that's pretty much it so now I'm going to connect those constraints here on the left so as you can see I will set 20 margin on the left top constraint to a parent so that will be maybe five margin from the top and for the description I will connect the left constraint to a left constraint for a title top constraint to a title and that's it so now we are going to add to populate this row inside our my adapter class but you but remember your constraint layout route layout needs to have a wrap content height because if you set height to be much parent you will only see one row inside your recycler view so that's pretty much important okay so you can set basically width and height for this image view as you wish you can set a fixed size for example 100 DP width in height but in this case I already chose Whitten height for my images so inside our own great view holder I'm going to create a layout inflator object and I'm going to inflate this my Rho XML file okay and the second parameter will be actually a parent instead of this false so the second parameter will be parent and the third one will be false okay now I'm going to store this inflator inside the view so we can return the view actually so now this one quick view holder is actually connected to my view holder class down below so now we are going to pass the view inside my view holder or class here as you can see so I am passing this view in this class down below and now it is my view holder method we are going to receive that view from above and we are going to find the ID of our UI elements like to text views one image view so now let's create text view objects for a title and description let's name them just simply my text one in my text - and one image review object as well for our images so here inside our my view holder method we are going to actually find the ID by using item you here so let's find the ID it is my text one for my text - the idea is my text - of course and for image view my image view alright item view dot find view by ID okay in my image view that's fine so now that we have that we can proceed to on beam view holder so basically my view holder is communicating with one beam view holder so as you can see as a parameter here we have a my view holder class that means that means we will now set text to our two text views in one image view inside on being view holder so here we are you using holder to find the our text my text one to set the text so here I'm going to set dynamically this text one so does type holder dot my text - dot set text as well and on the image view we are going to use a method set image resource and we're going to use as well position to dynamically add those inside our recycler view okay so now now that we have finished that I'm going to create I'm going to set up adapter inside our own create method and here I'm going to set the layout manager to new linear layout manager and I'm going to pass the context okay so now let's check our application to see how it looks like I think I forgot to add something and I think I know what it is so go back to my adapter Java class and they are we forgot to to check out our method item count so we will see that now okay this is everything is fine here so here on yet item count we need to pass the number of items we have in our arrays so that's basically a number of 10 but we can get that dynamically by using the length method from images my text one or my text - it does not matter and there it is so we have successfully added those items inside our recycler view and of course you can decrease the size of those image Rios here in my row layout but for now let's stay that way and I will add the layout margin of 10 so now those those rows are separated by 10 VP so that's it for this tutorial thanks for watching guys please like this video find helpful and in the next video I'm going to show you how to implement onclicklistener for those items

Channel: Stevdza-San

Views: 171,145

Rating: 4.8976345 out of 5

Keywords: recyclerview, recycler, view, android, studio, android studio, tutorial, guide, how to, list, listview, list view, implement, onclick, on, click, listener, app

Id: 18VcnYN5_LM

Length: 16min 43sec (1003 seconds)

Published: Fri Dec 06 2019