CardView in RecyclerView Android Studio Kotlin Tutorial

hey android developers my name's cal and in  today's kotlin and android studio tutorial we're   going to be building a recyclerview which  is nested with a whole bunch of different   cardviews the card views we're going to  populate with books just as an example   so yeah we'll 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 we're 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 i've   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 we're  going to go adjust the colors we're just going   to remove all of these colors and add in a dark  gray then we're 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 let's close off both of those now and head   into our main activity just going to hit split and  we're going to remove the text view and add in a   recycler view it's going to give it a width of  match parent and a height of match parent as well   and we're 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 that's opened up our   layout folder so we're just going to right click  and say new layout resource file i'm going to call   this card cell and our root element is going  to be a linear layer we're going to hit split   to open it up and then inside here we're just  going to create a card view so it's an androidx   card view width and height is match parent and  we're going to give it a corner radius of 15dp   margin we're 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 we're 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 we're 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 we're just going to call this  cover and we're also going to give it an id cover   we're going to extract that string resource so  that error message goes away or that warning and   then below our image view we're going to insert a  text view which is going to have a width of match   parent height of wrap content gravity center  we're going to get some title placeholder text   and extract that string resource as well i'm 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 we're   going to copy and paste that down and just call  this one our author placeholder we're 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 there's only one line  we're going to extract that placeholder string   resource as well and the card's looking just a  little bit long so we need to change the layout   height to wrap content so continuing on with our  layout i'm going to right click and create a new   empty activity i'm going to call this detail  activity and we're going to open up the xml file   for that hit split and we're going to change the  parent to a linear layout we're going to set the   orientation to vertical and then we're just going  to head into our card cell we're going to copy and   paste the image view and the text views we're  going to set the gravity equal to center on the   image view and set the width to 150dp we're 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 we'll head back in   and give those ids to our card cell as well then  back into our detail we're going to copy paste   down the text view one more time because we also  want to give this view our description we're going   to change the text color to black and remove the  lines one we're going to give a margin top 10dp   and we're 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 we're just going  to make all of the font sizes a little bit bigger   cool so i think that's all the layout finished  what we'll do next is head into the build gradle   and just enable view binding and inside our  android we're 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 i'll xml files and we're going to right click   and create a new kotlin class we're 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 we're also going to give  it a title which is also a string a description   and before we give it an id we're actually going  to create our book list which is just the mutable   lists of our book object and then we're going  to say our id is of type int and it's equal to   our book list size and this is a very basic auto  incrementing id and it's 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 we're going to create a function we're  just going to call it populate books create that   below and rather than typing all the information  for our book i'm just going to copy and paste   what i've done earlier and you can see all we're  doing here is initializing our book object we're   giving it this drawable resource a title and a  description and then we're adding it to the list   and then we're gonna do that for book two and book  three and four and so on and so cool so next we're   going to right click and create a new kotlin file  we're 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 we're just going to call   books and it's of type recyclerview adapter our  recyclerview adapter needs to have a viewholder so   we're going to create another kotlin class calling  it cardviewholder we're going to copy and paste   that name into our type of our recyclerviewadapter  and then we're going to say our card view holder   is of type recycle view view holder and it's 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 we're going to pass into our   view holder our card cell binding dot root cool so  inside our card view holder we're 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 it's giving us an error message because  we haven't implemented the methods and so if we   click on that error message and say implement  members we're going to select all three and hit   ok now for our get item count we're just going  to return our book's size inside our on bind view   holder we're going to call our holder bind book  which is the function we just created and the book   we're going to pass through is just calling our  books array and then giving it positions inside   our oncreateviewholder we're going to declare a  variable calling it from which is equal to layout   inflator from parent giving it context and then  we're 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 we're 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 we're going to  say val main activity is equal to this but i'm   getting ahead of myself we need to set up our view  binding first so we're 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 we're just going to say  binding is equal to activity main binding inflate   giving it layout inflator and then we're going  to set our content view to our binding dot root   now we can say our binding dot recycle view  apply we're 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 we're just going to initialize it   by giving it our book list cool so let's build  and run this now and see if it's all working the   recycler view seems to have populated with all of  the different books i've got a span count of three   and you can scroll up and down and each card view  seems to be populated correctly what we're going   to do next is implement the on click to take us  to a more detailed version of each book cool so   we're just going to right click and create a new  kotlin file i'm just going to call this book click   listener which is an interface i've just called  it book click listener and all it is is a function   which is on click and it's going to take a book  now in our main activity we're just going to   make it implement this book click listener that we  just created and that's going to give us an error   message saying we need to implement the members  which we will and so we're just going to move this   on click up a little bit higher and so in our on  click we're 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 we're going to put some  extra so we're going to pass it through the id   of our book so we're 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 i'm going to copy that   and put it in our extra as well as our book id and  we're 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 we're just going to call card cell   binding and we haven't given our card view an id  so let's 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 i'm 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 we're going to pass it   through our calendar view holder and now when  we set our adapter we're going to also give it   our main activity that we initialized earlier now  inside our detail activity we're going to create a   late init variable binding exactly the same way  as we did in our main activity we're just going   to say binding activity detail binding inflate  giving it a layout inflator and then setting the   content view to binding.root now we're going to  create another variable calling it book id which   is equal to intent get into extra and we're 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 there's never going   to be a negative size list and then we're going to  create another variable calling it book and we're   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 that's passed through we're  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 we're 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 i'll catch you guys in the next one

Channel: Code With Cal

Views: 1,600

Rating: 4.8730159 out of 5

Keywords: android, studio, kotlin, app, view binding, binding, artic, fox, 2021, example, tutorial, beginner, grid, layout, manager, adapter, view, holder, UI, UX, card, cardview, recycler, cell, book, recyclerview, apps, development, dev, programming, code with cal, kotlin recycler view, kotlin cardview, onclick, on, click, interface, view holder, apapter, coding, program, code, developer, software, indie, how, to, basic, simple, education, build, create, easy, follow, friendly, make, learn, kotlen, start, material, design, xml, linear, artic fox

Id: tbj5VH-KzFM

Length: 10min 3sec (603 seconds)

Published: Sat Aug 28 2021