RecyclerView using Jetpack Compose | LazyColumn | Jetpack Compose | 2023

hey guys welcome back to another video fox Android so in this video we're gonna learn how to implement recycler View using jetpack compose right so as you guys know that nowadays we are designing our front end using jetpack compose gone are the days when we were using XML now the Google is telling us to design the front end using jetpack compose and recyclerview is such an important component of the UI that one should know how to implement using the new techniques right so that is what we are gonna discuss and learn in this video so let me just give you a brief demonstration of what we will get by the end of this video so if you can see on my emulator I have this app opened inside which we have this is cycler view so if I just scroll it we have lot many items right and each item consists of three things two text views right the course is one takes two and we have this number here it is 39 so two text twos and one button so if we tap on this button he can see that particular item of the cyclerview expands and we can see another text right if we just tap again it shrinks right and here also so you can tap on any button so this is what you're gonna get and this is what we're gonna learn by the end of this video so if you want to implement the same to your Android application make sure you watch this video till the end so without Much Ado let's get started foreign [Music] using jetpack so for that just go here new project and select this empty compose Activity Click next give the name and finish I have already created a new project here right and we're going to work in this project so the very first thing we are going to do is we are going to create an list item that is what we used to do in XML format we have our list item then we use that list item inside the recyclerview so for creating the list items we are going to create a function a composable function right so we are going to enerate it with composable now we have this function this will get the name as an argument right the basically the course word that we were using that is the argument that has been passed here so this this particular function will represent individual item of the recycler View so the very first thing inside this we need a surface we're going to set the color of the surface so material theme Dot colors dot primary date then we're going to set the modifiers so okay we have created the surface so if you do not know about these attributes this color modifier I already have a video on the basics of Jetpack compose I'll just you can just click on this High button and you can watch that video first if you want if you're not aware about these things if you have worked with jetpack compost then you know that's why we use this modifiers right so this is the surface of the list item that we are going to design and inside that we need a column so we are going to set the modifier for the column as well this modifier 24 DB and we want this column to get the maximum width so we'll call fill Max width right so this is one column so if I can show you the emulator so now we have created this column this whole thing is one column and inside this we are going to create a row so that row will contain these three things right so let us just do that let me just close the simulator installed into import and inside this we are going to get a column here right so we're going to set the weight as 1f so now inside this column we need two text views text the very first text right so this text will be course and the second text it will be the name that will get as an argument right and we'll set this style material theme dot typography dot H4 dot copy Point weight is equal to font weight so okay we have said the two text views so basically these two textures are these ones right and now we are going to add a button here so this is where column ends right and we are going to add it inside the row so outlined button and for the time being we are going to leave it empty the on click right here we are going to define the text will be show more right now let us just call this function inside our preview so here we are going to call this function list item and let us just pass one now this is render it and see what we have designed so far so here you can see one list item is shown right we have two text views and one button right so we have designed a list item now we are going to create another composable function let's just close this and we are going to create another composable and we are going to name it as recycler View and here we are going to create a list is equal to that will contain thousand items so basically this will contain a list that will contain numbers from 1 to 1000 right now inside this we are having this lazy column so basically this lazy column did all the work for the recycler view so the basic difference between the column and the lazy column is that if you use the normal column it will compose all the items so all these thousand items whenever you run the application but in case of lazy column it will only compose The View when it is visible to the screen so if you just scroll up to the 50 item it will only compose 50 items right it will compose the item as soon as it is visible to the screen so that is the benefit of lazy columns so you can consider lazy column as recycled view it doesn't work exactly like recycle view but more or less it is like recyclerview only right so we are going to use the modify here modify dot padding we are going to add the padding here the vertical padding of 4 DB right and inside this we are going to run a loop so items and here we are going to call the list item right and we'll pass the name here so okay that is pretty much everything we need to do so let's just call here the cyclobute we have called this function now let's just refresh this so he can see right all the items has been loaded to the recyclerview now let us try to run this app okay we have the numbers take we forgot to call this a cycle view here so just delete till here and call the recycler View just read on the app so you can see we can see the emulator but there is one issue if we just tap on this button nothing happens right but in the emulator when we used to tap on this button it used to expand and we can see some text so now we need to implement that so for that we are going to go to this list item and here first we need to declare some variables so the very first variable that we are going to declare is is a Boolean variable that will remember if someone has stabbed on this but not so we are going to declare that expanded and here we have a property of remember so what we'll do is it'll remember the state of this Boolean variable right so mutable state of here we need to call false right so for each item it will remember the state of each item if it has been clicked or not it if it is expanded or not now the second thing is we are going to declare extra padding the variable called extra padding bye by animated so if yes I do not know if you have seen that or not but whenever I used to tap on this button when it expands it will do some spring type animations right it will just uh expand then context a little bit and then expand again right it will give a spring like animation so for that we'll use animate DPS state right and here we are going to use if expanded dot value so if this value is true then we want it to be 24 DB else it should be zero DB right if it has not been expanded we want it to be 0 DB so animation specs are ring damping ratio spring Dot will set to medium bouncy right stiffness ring dot step Loop done so we have declared these two variables now we are going to use them right so the very first thing we want to modify as the action of this on click so whenever the user Taps on this button we want to alter the value of our Boolean variable right so extend expanded dot value is equal to negative expanded dot value okay we have done that and inside this we want to change the text based on the condition of this variable so if expanded dot value so if it is true that means someone has tapped on this button so you want to change the text to show list else we want to keep it as show more only right now we want to add another text view inside the parent column so this ends here right so you want to add a text view here but we're going to use the if condition expanded Dot value is true then we want to add a column right column modify is equal to modifier now we want to add the padding here so what will be the value of the padding so first we want to add it to the bottom only and the extra padding that we have declared on the top we want to use that dot OS at least 0.tp right because we do not want it to go to a negative value otherwise it will crash our application so here now we'll add the text so text and I have this laram Epsom I'll just copy this and paste it here all right we are pretty much done for this I guess everything looks good now let us just try to run this app okay there is some issue I guess okay let's just return this there was some issue with the brackets so you can see the app if I just tap on this button the text at the bottom is visible light and you can see that animation the spring type effect is there whenever I use to tap on this let's just uh this design doesn't look so good so let's just try to modify this so for that what you will do is you'll go to is UI dot theme and here you need to Define some colors so I have already colors with me so I'll just copy it from here you can just type in these colors so copy and then you want to go to this themes right and just modify this by this line of code done now let's just rerun the app so you can see now this looks good right this particular design we have changed and now if I just tap on the button the text is visible in black color right and it does give a good nice effect so this is how we implemented cycler View using jetpack compose so if you have noticed that using a jetpack compose it's cyclerview implementation is pretty easy you do not need any adapter anything you can easily add these things right but in case of recycled View using XML it was a very tedious task most of the person do not even understand the code in that case so this is how you implement it I'll put the link for the source code in the description below if you want the source code you can just go to that link and you can clone this particular app right so I hope that you guys have understood the code but still if you're in route you can always ask me in the comment section I can name your Instagram the Instagram username will be there on screen right now and if you like the video don't forget to hit the thumbs up button in case you want this channel make sure to hit that subscribe button press the Bell notification icon for some notification of the upcoming videos so that is it for today's videos see another video bye [Music] thank you foreign

Channel: Foxandroid

Views: 4,800

Keywords: recyclerview, jetpack compose, lazy column, android studio, recyclerview using jetpack compose, jetpack compose tutorial, kotlin, jetpack compose lazycolumn, jetpack compose recyclerview, jetpack compose cardview, lazycolumn, recyclerview in jetpack compose, how to implement recyclerview using jetpack compose, android jetpack compose, expanded recyclerview jetpack compose, expnaded recyclerview, recyclerview onclick, recyclerview cardview, foxandroid, 2023

Id: YC80LJy6HLo

Length: 17min 13sec (1033 seconds)

Published: Mon Jul 10 2023