In Mobile App Development
CardView in RecyclerView Android Studio Kotlin Tutorial - read the full article about app development tutorial, Mobile App Development and Native and cross-platform solutions from Code With Cal on Qualified.One
Youtube Blogger
hey android developers my names cal and in todays kotlin and android studio tutorial were going to be building a recyclerview which is nested with a whole bunch of different cardviews the card views were going to populate with books just as an example so yeah well have the image and then a couple of pieces of text so the author and the title of the book going to also implement an on click listener or an on click interface so that when you click on one of the cards it takes you to a more detailed version of that book new android studio project empty activity calling this one card view recycler view tutorial kotlin is our programming language and just hit finish first thing were going to do is open up our res drawable folder and just drag in our book covers so these are just images i pulled off the web ive never read any of these books but they just look like they had good covers to me so just drag those into our drawable folder then were going to go adjust the colors were just going to remove all of these colors and add in a dark gray then were going to delete the night theme head into our themes and just remove all the color secondary stuff and then just set our color primary to our dark gray and our variant to black cool so lets close off both of those now and head into our main activity just going to hit split and were going to remove the text view and add in a recycler view its going to give it a width of match parent and a height of match parent as well and were going to give our recycle view an id of recyclerview and by clicking on this circle here it shows in the left pane which file is currently open and opens the folder and thats opened up our layout folder so were just going to right click and say new layout resource file im going to call this card cell and our root element is going to be a linear layer were going to hit split to open it up and then inside here were just going to create a card view so its an androidx card view width and height is match parent and were going to give it a corner radius of 15dp margin were going to give it 10dp so it just sits a little bit off the edge android clickable is true and our card elevation is 70p so feel free to play around with all of those values they really just look and feel and then inside here were going to create a linear layout which has a width and height of match parent which also has an orientation of vertical inside that linear layout were going to create an image view with width and height wrap content source is just a placeholder image so really choose any of them adjust view bounds is equal to true content description were just going to call this cover and were also going to give it an id cover were going to extract that string resource so that error message goes away or that warning and then below our image view were going to insert a text view which is going to have a width of match parent height of wrap content gravity center were going to get some title placeholder text and extract that string resource as well im going to give the text color to be black text size 15sp lines 2 so that must have two lines and no more our text style is bold and then were going to copy and paste that down and just call this one our author placeholder were going to change the text color to that darker gray and make the font size a little smaller remove the bold and just make it so theres only one line were going to extract that placeholder string resource as well and the cards looking just a little bit long so we need to change the layout height to wrap content so continuing on with our layout im going to right click and create a new empty activity im going to call this detail activity and were going to open up the xml file for that hit split and were going to change the parent to a linear layout were going to set the orientation to vertical and then were just going to head into our card cell were going to copy and paste the image view and the text views were going to set the gravity equal to center on the image view and set the width to 150dp were going to copy down the ids because i forgot to give our textviews an id so just calling that one title and the one below at author and well head back in and give those ids to our card cell as well then back into our detail were going to copy paste down the text view one more time because we also want to give this view our description were going to change the text color to black and remove the lines one were going to give a margin top 10dp and were actually going to do that for all of our views in here so even the image view will give that margin top 10dp and then were just going to make all of the font sizes a little bit bigger cool so i think thats all the layout finished what well do next is head into the build gradle and just enable view binding and inside our android were just going to type build features giving it the curly brackets and then view binding is equal to true and then just sync our project cool so we can close off that and all of our views so ill xml files and were going to right click and create a new kotlin class were going to call this book our book class is going to have a variable cover which is of type int which will be pointing to an image resource a variable called author which is a string were also going to give it a title which is also a string a description and before we give it an id were actually going to create our book list which is just the mutable lists of our book object and then were going to say our id is of type int and its equal to our book list size and this is a very basic auto incrementing id and its just looking at the book list size and giving it an id based off of the size cool so we can head into our main activity now and were going to create a function were just going to call it populate books create that below and rather than typing all the information for our book im just going to copy and paste what ive done earlier and you can see all were doing here is initializing our book object were giving it this drawable resource a title and a description and then were adding it to the list and then were gonna do that for book two and book three and four and so on and so cool so next were going to right click and create a new kotlin file were going to call this card adapter and our card adapter is going to take in a variable which is a list of books and which were just going to call books and its of type recyclerview adapter our recyclerview adapter needs to have a viewholder so were going to create another kotlin class calling it cardviewholder were going to copy and paste that name into our type of our recyclerviewadapter and then were going to say our card view holder is of type recycle view view holder and its going to take a variable of a card cell binding which is a binding for our card cell dot xml file that we created earlier and were going to pass into our view holder our card cell binding dot root cool so inside our card view holder were going to create a function calling it bind book which takes a book and all we need to do is set our view based on the book that it receives so card cell binding cover set image resource to our book cover card cell binding title text is equal to our book title and then just duplicating that line and setting it to our author as well cool so now we can head back into our card adapter and you can see its giving us an error message because we havent implemented the methods and so if we click on that error message and say implement members were going to select all three and hit ok now for our get item count were just going to return our books size inside our on bind view holder were going to call our holder bind book which is the function we just created and the book were going to pass through is just calling our books array and then giving it positions inside our oncreateviewholder were going to declare a variable calling it from which is equal to layout inflator from parent giving it context and then were going to say value binding is equal to our card cell binding inflate the layout inflator is the one we just created so from our parent is our parent and attached to parent is equal to false and then were going to return a new card holder and just giving it the binding we just created cool so we can head back into our main activity now and below our populate books were going to say val main activity is equal to this but im getting ahead of myself we need to set up our view binding first so were just going to say private var binding which is of type activity main binding and this also needs to be a late init variable and then below our on create were just going to say binding is equal to activity main binding inflate giving it layout inflator and then were going to set our content view to our binding dot root now we can say our binding dot recycle view apply were going to give a layout manager equal to a new grid layout manager giving an application context and a span count of three and the adapter we need to just set to our card adapter and were just going to initialize it by giving it our book list cool so lets build and run this now and see if its all working the recycler view seems to have populated with all of the different books ive got a span count of three and you can scroll up and down and each card view seems to be populated correctly what were going to do next is implement the on click to take us to a more detailed version of each book cool so were just going to right click and create a new kotlin file im just going to call this book click listener which is an interface ive just called it book click listener and all it is is a function which is on click and its going to take a book now in our main activity were just going to make it implement this book click listener that we just created and thats going to give us an error message saying we need to implement the members which we will and so were just going to move this on click up a little bit higher and so in our on click were just going to create an intent which is just going to take us to our detail activity so just giving an application context and our detail activity class our intent were going to put some extra so were going to pass it through the id of our book so were just going to create a sort of constant variable just calling it book extra and should actually be caps as just good practice to make that caps and then im going to copy that and put it in our extra as well as our book id and were just going to call start activity passing it our intent now heading into our card view holder we just want it to receive one more variable which is a click listener which is of our book click listener now were just going to call card cell binding and we havent given our card view an id so lets go in and do that so just giving our card view an id of card view now we can reference that from our binding so just saying card cell binding card view set on click listener im going to give it curly brackets and just say click listener on click and giving it the book now we can copy that click listener because we just basically need to pass it through our adapter so that we can give it to our view holder and were going to pass it through our calendar view holder and now when we set our adapter were going to also give it our main activity that we initialized earlier now inside our detail activity were going to create a late init variable binding exactly the same way as we did in our main activity were just going to say binding activity detail binding inflate giving it a layout inflator and then setting the content view to binding.root now were going to create another variable calling it book id which is equal to intent get into extra and were going to pass it our book id into extra which is just that string that we created the default value is going to be negative 1 because theres never going to be a negative size list and then were going to create another variable calling it book and were going to create a function calling it book from id this is going to take a book id which is of type int and return a book and we just need to loop through all of our books in our book list the book id equals the book id thats passed through were going to return that book otherwise return null and just allowing our book to be null by giving it a question mark now we can check to see if our book is not equal to null were going to say binding cover set image resource is equal to our book cover and the same for all of our text view so binding title text is equal to our book title and the same thing for the description and the author cool and if we build and run this one more time we can see that we can click on one of our book covers and it takes us to a more detailed view of that book so this has been one way to nest card views inside a recycle view using kotlin if you enjoyed the tutorial give it a like otherwise ill catch you guys in the next one
Code With Cal: CardView in RecyclerView Android Studio Kotlin Tutorial - Mobile App Development