CardView in RecyclerView Android Studio Kotlin Tutorial

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
alt
Code With Cal ,
Youtube Blogger
alt

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