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