Recyclerview with Cardview Android - Recyclerview Android Studio - Recyclerview in Android -Part4(B)

I only come my name is the Moo chickens are and welcome back to the second video of user dashboard and in this dashboard part two we are going to create our recycler views and the card used or the using card news we are going to design a very secular view and this design we have created in our previous tutorial with a scroll bar and a static top bar so if you haven't void that part fun so please go and watch the part one first before moving further if you just want to learn about the recycler view then this will be enough for you you don't have to avoid that with you and also if you want to get the code or if you want to get these resources everything link is in the description let's get started with our recyclerview for the sake review it's not that difficult but you have to follow this tutorial and step by step without skipping anything so the first thing is and this is the recyclerview we have used in our tutorial so click on this and we have to assign its ID featured recycler i'm going great feature which like that and click OK ok idea signed go to the user dashboard or java file currently it is empty but we first have to create the folks recycler view featured recycler and inside oncreate - creators oops here I find you my ID or ID one picture of this side so we've related the hooks to keep our design clean and you're not going to put everything in oncreate so we have to create three functions for each recycle you the first one is featured recycler and that's it click on this bulb I can create a method which will be outside this oncreate and inside this are we going to deal with the recyclers which is the featured one so again right featured recycler dot set as each size and make it so what this line will do is basically recycler contains lot of car views some are on the screen and some are off the screen so recycler view will simply load only those views which are visible to users that's why we are using the set as fixed then the next thing we have to use is to shut the layout of recycler so right featured recycler dot set layout manager and in here we have to create new linear layout because we are using media layout it's not necessary you can select any one but I am using linear layout manager and inside we have to pass the context where we are using this basically use this means user dashboard by default it's orientation is vertical but our card use are in horizontal position so we have to mention them as well so in here right linear layout oh yes the first one is nearly match about poison and common cause false that's it we have set its orientation and we have set as fixed size to true so so far so good we have created a book and we have just created this function to put its featured recyclers elements inside it okay so get started with our recycler view we have to first design this so go to the app resource and inside the layout right click new and create a new layout the source file and name it featured design or featured card you can change the root element in here but we are going to change it inside the code - okay okay in here we are in the split view and change as I told you the constraint layout the cardio if in case this cardio is not appearing on your screen go through this and go to the design section by clicking here and in here search for card view like we have here but if this little downloadable icon is at the front of this make sure your internet connection is on then you have to click on this icon and click OK to add its dependencies in the project that's it we don't have to do anything else ok go back to the spread section and inside this card view press alt control L to align the code okay in here first thing is change its width to 160 DP and its height to 300 okay in here we want to make its corners guard corner radius to 2 DP just little wrong then we want to add elevation but make sure this is not the simple elevation but it's F card elevation the simple animation will not work so use card elevation and a teepee then we need to add some margin around the card it's okay in this card view we are going to put or we are going to add all our elements images and text and are waiting bar inside another layout which is the linear layout and it will be mash parent in height and width and it will have some padding this is the reason why I am adding everything inside this video because I want to add some extra space from the border of the card view you will just get to know in a minute so the first thing is the image and it will be mash parent in width and height will be 170 DB this toothpick so change it to 140 DP of the image size then we need to add that image and this one is so this is not the exact images that will be appeared on our design but we have to shut them dynamically this is just for the design purpose so currently you can see our image is not covering the whole area defined so for that you have to set and not tofu pudding but scale type and it should be top center so you can see our image is cropped to its defined width and height close this one then we need to add a text view and this text view will be a heading so content width and height then you define the text this is again a dummy text so it can be anything but make it quick downloads then add attack size 20 text should be an SP not in DP then we do define its color color will be color accent and one more thing it is currently not appearing here because the linear layout by default is horizontal and we make sure it's orientation is vertical so now you can see our text right the font family the one I am using for the card use are the Bell one this one if you don't know how to add these forms both the design and in here search for font family I click on this caret icon and at the below you can see we have more fonts then you can bulk of options to it okay go back to the split view okay you can see we have some extra space around this because of this linear layout but it's a little less make it 15 degrees okay we have our text then the next thing is we want to add a rating bar it will be where content width and height then its style add style because by default rating bar is in large size before style let me with the add rating 5 and then to make it style it should be small so to change its style or the size of the rating by you should GU style variable and choose the rating board or small and at the bottom you can see we have a little rating bar and its rating is shown close it after this wedding bar we have to define the last thing which is again a text view content width and height then its text will be these are just three lines over here I just wrote it myself just for the design purpose you know okay that's it for description as well so now we have to get we want to change these images and this title or maybe the description dynamically for each car do so we have to assign their IDs Oh Mitch ID will be featured image of this feature then this text view will be featured title and if in case you want to change the description as well and also we are going to use the rating but for this tutorial I am NOT going to be with the rating right now and just sign I do to the description it should display okay these are the three things we are going to change dynamically for each card view but currently we are not going to change this rating variable this 3.5 over here this is basically a floor value and I will show you how you can change it if you want to do so it's up to you so this is the card of a card is ready so once we have designed our card view then go to the java and in here we need to create a helper class which will contain these variables list image views so insert this helper class as we need to to three adapter classes with their helper classes so the best thing is to manage your bulk of classes that's why I am going to create a new package and it will be oh man dr. and click OK inside the input classes we have a home and after classes so in the previous onboarding screen you guys know we have a stutterer after so it's only one so that is why I'm not putting it inside any folder inside this movement after right click new create a new job applause this will be featured helper class and click OK so this helper class will just have the variables for the image we have to use int because it is in the resources and the resources can be fetched using the int int image then we have two strings title and also description so now the next thing you want to create is a constructor so create a constructor right-click go to the generate and click on this constructor select all these three things and click OK it will automatically create a constructor with image title and description inside this constructor we are currently setting these values who get the values we need getters so right click again go to generate and click on the scatter select all these fees and PA ok ok we have created ghetto setters basically status shutters are not created but we are setting values inside our constructor ok we you created our helper class this one ok now the main class is basically the adapter class which will hold our design and also our cold so to create a adapter class which is the main class again go to the formula doctor and right click new and create a new Java class in this please follow step by step with me it's very simple but you have to do some practice first ok so the home doctor which is featured ok so it is again a simple class so we have to extend this class with a doctor but you can see we have two adopters Android or widget but we are going to use the one with the recycler so this one with the recyclerview and it is showing l because we have to extend we have to override some methods but currently I am NOT going to override anything okay the first thing is basically adapter as I told you holds the values and put that values design or you can see it will get the design and it will get the values and work as a bridge between values and design and set these values or to the design or design to the values so the first thing is it's clear that we need both things in this adapter design and values so let's go for the values first so when you will be an array list and this array list will be the type and we have just created here the helper class featured with the class so mentioned featured help across here and this is just a variable so feature the third class we will feature locations this is the variable so to get these things we just we are just going to create its constructor so again right-click go to the generate and click on its constructor so we have this variable we need it click OK and it's added its variable in here so when we call this adapter class from our main activity then we have to pass list or the data inside this constructor and by this way we can get the data so now we have received or we have successfully take the data form over Java the next thing is we need design so for the design back here and we need to create public static class and will be featured you can name it a doctor let it be featured view holder so this will basically hold the view so this was the data this will hold the data doctor and the view holder will hold the view or the design of our recycle so it should be extends with view holder recycler view dot view holder so we had this class and in here first of all solve this error so click on this bulb icon and create constructor matching super we need it yes ok we have created a constructor the first class will have constructors and it contains values then we created a sub class in it which will hold the view and it is extended by new holder so in this class we need three things the first one is image view you name it weights then we have text views title and description then inside this item we have to create books as you know for the design hooks are necessary so we are going to get the design so for the design again we have to create the horse this time it will be image is equal to I tell you dot find view by ID because we don't have any resource layout here we don't know where is where is the file so the file will be received inside this I tell you when we call this feature view holder because the basic thing is we will pass view to this so currently we are just creating hooks we are not setting for passing the view so this is r dot ID dot alt enter to get the value or dog ID dot featured image and that's it press ctrl D times duplicate change this image to title featured description so we have created hooks and that's it for this class you close this one and no at the top in here we are using the adapter but it's adapter adapter will be of type feature dr. dot feature view folder so this this means featured adapter will be the text and design will be the future view holder ok now as we have created the constructor and also the class again go back to this line the error and click on this bulb and press from the implement map yes we need to implement all these three methods very simple and good okay class is at the bottom okay we have three simple functions the first one is by name you can see is a view holder as I told you we have to pass the view which have we have the elements but these elements will get the value from which design so we have a design is here it's name is featured card design so we have to mention somewhere in this adapter class if you want to use their design so it's again very simple inside the first one which is saying the view holder on create new holder they have to write view and let it be view because we have to pass this view to our featured view holder you can see you can see feature view holder the one we have created is receiving this view over here so we have to pass this view which is equal to lay out in theatres dot from this is parent dot get context and outside this bracket right inflate and now we have to pass the layout we have created our dot layout for featured car design and the next thing so he gets parent and also attached to who will be false and this parent is basically a view group which is at here so that's it for the view now we have to pass it to feature new folder which is this is basically just we have created an instance of the class which is here is equal to and we pass this view now we have to return it we have created a simple view which is pointing to this design and we have passed this design in feature view holder and determined very simple ok now we have our gold inside our ArrayList and in featured adapter constructor then we have in the on create view holder we have that view and we said that view to these variables and create hopes now we have to bind so this is the function this is the main function which is going to bind the design and the port so too buoyant that this is a simple way as inside the app we can see we have created a helper class which is featured helper class so feature helper class will contain all the elements so we can simply call that feature is equal to we are going to call that array which is featured locations dot get the call want to assign these elements these values which contain image text a title and description on this position each time so every time it will it depends basically on the number of elements we are going to use okay once we have passed this position then we have to set those elements so you can see we have this view holder which contain that view so we just have to write holder dot now you can see we have these three things image title and description so the first thing is which dot set image resource so it's image we have to set to be resource that image this pose will be fast from that helper class it is featured class so at this position it may be 0 at 0 position we have that image so we are going to pass it to this holder and it will automatically display on the design so control d2 times first one is title than we have description then we need get title and it's not image source it's set text being fished that's it so this is how simple and her doctor was that's it for this class and that's it for the featured adapter goal this one and also the design was ready so go this one as well go to the dot Java file and in here as I told you we have started our featured recycler basic things so the first thing is we want to we have to pass the array to our design or to the doctor so we have to first create an array just ArrayList and its type will be featured helper class and name it featured locations which will be equal to new ArrayList and we have created a simple array list with feature locations name ok after creating an ArrayList we have to write future locations dot add to add values inside this array we have to write dotted and inside we create new constructor each time of the helper class which is featured helper class and inside you can see we have to pass image title and description so the image is these are in the title here and then we have to pass the description currently I'm adding the dummy description and put semicolon at the end so duplicate it press ctrl D two times and change the image to these are basically the dummy images we have added over we have created our ArrayList at the top so after that we have to pass this array to our adapter as I told you so the next thing we need here is the global variables and declare it at the top now we can simply write adapter is new and this adapter was featured dr. and in that adapter as I told you we have to pass that ArrayList in here and it is an asking inside the constructor so this one is the featured locations and that's it so this is the ArrayList we have created at the top and we passed it to this so we have created our adapter now the last thing is simply set this featured recycler dorset dr. and we have to set this adapter right here that's it let's find out the featured adapter and it's here the third function was the get item count and we are returning at 0 but it it is not zero so we just have to return future occasions dot size so that's it now run our application again okay after a splash screen you can see we have a card views and there we go our design is ready but the problem is we have this little bottom thing at at the bottom so let's fix this in the design of the resource and open the nail this is the user dashboard go to the spec view and click on this we have the height here is 280 and we assigned the height to 300 inside our design so nuts now this time you can see our card or appearing full at the bottom but we cannot see any shadow beneath them because of the margin so we can fix this this is not an issue so now we have to design the below cards the second one and the third one but this time I am just going to design these cards and let you guys to create this recyclerview adapters you just have to copy this code and paste it again you just have to change these variables for these categories or for this for this design so to design these cards and let's go back to the layout right-click new and create a new resource file this time it's for the most viewed card design and click OK again switch back to the split view ok now let's change this constraint layout to card view and this time the card view we press all controlling the lines this card you will hold not the linear but the relative layout and inside this we also have to assign some padding as we have assigned in our previous design it will be 10 BP and for the card first add card corner radius to DP and it's called elevation the inside this relativelayout we have to create Mitch view which will be Rho DP and it's like 150 DP you can see over here then for the demo that's okay at this McDonald's icon and to fit go for the scale type and make it Center you can see the design the image is currently covering it close this one now or after that but as we are using the relative layout so we need to assign the Hyades ID will be so for the most viewed i am going to use ms under image after the image we need to add the text view which will be wrapped content and the text is going to and this is this will be placed to write off to the right side of the image which image which is MSM spoken so you can see the design also we to add some margin to its left because it's completely attached with the image so that's an eternity then asset stack size it will be 20 DP and again the font family we are going to use is one we have already used so the spoon then we have to use the weighting and for the weighting bar gain it's back from and width and height change its style to the small one as we have done in the previous videos then it will be below we again have to sign the idea to this textview and it will be most so moved it's not a mess it's MV and in here from the most viewed in the title we okay it's the rating ball will be below this title and we title and it will be right off the image and again we have to sign the mountain back 10 DP and set its waiting to this time and hold it we have to ID and the last thing is the text view which is the description one grab content width and height and the text will be again the W 1 so now we want to place it below to the wedding and to write off image then we need to add its padding to make some gap is 10 VP okay so now this card you is again ready we have to assign its ID as well to write this description inside our most viewed after closing tag so that's it for this design let's close it and now we again go to the nail right click new and create new resource file which will be for the categories category is called design and click OK again go to the split view change this constraint layouts cardview alt ctrl and line the lines in here at our common radius this time it will be 5 PP then hand elevation which is called a deviation HTP inside this this time we are going to use the relative layout again and it will be matched again we have to set its width and height in width and one two three DP I know you can see this Chad over here before the relative layout that's it and inside this relative layout we just need two things the first one is the textview with web content width and height text will be let's pose it will be the restaurant and we design touch size t SP no DP then the phone and they will be same for all all of them the next thing we want to add is unit feel it will be 110 BP site will be 1 let's setters let's add a deli meat over here this time this will be at the right side of its parent aligned parent for HP and again it will be the bottom at the lower bottom select align parent bottom true so that's it we have to assign this relative layout background and the background is going to be it can be gradient and it can also be a simple color so so for now let it be some simple tool which we have we forgot to add the margin here selphie approximately so we have designed these to card use and also if you want to change or if you want to add a gradient in here I can show you how to add a gradient so inside the adapter move the featured adapter we already created and inside where we are binding the things you can see we shut we are setting this image shot image resource title to subtext and we can do anything with this as we can do in in any activity so let's suppose we have this relative layout and its ID is a gradient color this is basically a relative layout and it is a gradient color so what I want to do will want to add gradient color to each differently so what we can do is when we get this relative layout in here we will simply set it like this fade description dot set background this one and it is it is a type of drawable background so I can I'm going to show you how you can create a gradient viable when you write it like that you have to go in here you cannot pass directly a gradient from some driveable the sector so you for that you have to create a drawable and so that this is what i am going to show you so you can add it as yourself or you can get this cold from the description below so add a gradient it's very simple simply write gradient and this time it's a very enjoyable [Music] sinus nail maybe gradient one for the first one is equal to new gradient drawable and in here we have to pass this orientation of that gradient right gradient driveable dot we have to define its orientation dot left to right top to bottom as as our design is invoice or inclusion so I suggest you to use left to right or right to left it's up to you so after orientation we have simply we have to pass color which is in the int and in here we have to pass two pillars the first one and the second one and in the coding side you you don't have to use hash or at the rate for the color but instead you have to use zero then X and then it's color so we also have to pass its opacity with double zero or double F at the start then some color like the devil F 400 something like that and then Oman 0 X again develop a double six we have a mistake here not inside these brackets but inside this outside these square brackets we have to create a curly brackets and we have two paths color inside these curly brackets so but this way we can use we can create a gradient and we can put this variant in here when where we are going to assign that gradients so that's it for this tutorial you can again get these videos you can get this links ok so let me just run the application and I have just created all these recycle views and also that he added the gradient so let me show you as you can see on the screen I appeared these most viewed cards and also all featured and then at the bottom you can see I have created these categories multiple categories multiple images so we can simply place these categories at the top and also change them from top to bottom because we have created these all designs in sections so if you want to change this design let me show you go to the layout and in here open this dashboard go to the split view let me close all the sections first and there we go inside this scroll you we have these sections so if you want to place this featured below this most viewed you can just simply cut it and paste it at the top of this because I have used the linear layout so we can change it any in any direction and also if we change our design go to the design section and in here change it to the small screen and you can see the design is perfectly fitted and also we can scroll it to its bottom so that's it for this tutorial this design is still responsive you can also get this design from the link in the description if you learn something new please like the video and if you are new to the channel please subscribe because we are going to complete this series thank you for watching take care all office

Channel: Coding With Tea

Views: 45,962

Keywords: recyclerview android, cardview android tutorial, cardview in android studio, android recyclerview, recyclerview android studio, recyclerview, recyclerview onclicklistener, recyclerview onclick, android cardview, recyclerview with cardview android, android studio recyclerview, recyclerview in android, android studio cardview, card view in android studio, recyclerview click, recyclerview in android studio, recyclerview onclicklistener to new activity, recyclerview item click

Id: FS7uTQsobyE

Length: 45min 0sec (2700 seconds)

Published: Sat Mar 14 2020