CardView and RecyclerView in Material Design
Firstly, to have some visual view about this post, you can take a look at this demo video:
A - CardView
1 – What is CardView?
CardView was brought along with Android 5.0 Lollipop. It extends FrameLayout and has rounded background with shadow by default.
CardView is convenient for displaying complex content that has multiple heterogeneous data type like images, text, videos…
2 – How to use CardView
To be able to use CardView in your application, you have to declare the required dependencies like below:
After that, in you layout XML file, you also need to declare the card_view namespace:
Now you can play with CardView :D
Like other controls, you can add CardView to the layout using XML.
You can add not only TextView into CardView:
But also other kind of controls like ImageView, Button…
As you can see on above XML code, CardView provides some properties like
- contentPadding: setting padding for CardView
- cardElevation: new concept in Material Design that represents for z axis
- cardCornerRadius: setting radius for card rounded corner
B – RecyclerView
1 – What is RecyclerView?
RecyclerView is an “upgraded” version of ListView which is more advance and flexible.
RecyclerView is a container for displaying large data sets that can be scrolled efficiently by maintaining a limited number of views.
RecyclerView also provides some default animations for common item operations like inserting or removing an item.
2 – How to use RecyclerView?
To be able to use RecyclerView in your application, you have to declare the required dependencies like below:
To use RecyclerView, you have to create 2 essential components:
- LayoutManager: positions items in RecyclerView and determines when to reuse item views that are no longer visible to the user.
- RecyclerView.Adapter: provides access to data sets items, creates views for items and binds items info to item view.
2.1 – LayoutManager
RecyclerView provides some built-in LayoutManager that you can use immediately:
- LinearLayoutManager: provides similar functions to ListView
- GridLayoutManager: lays out all items in a grid
- StaggeredGridLayoutManager: lays out all items in a staggered grid formation, supports horizontal and vertical layouts and is able to lay out items in reverse.
2.2 – RecyclerView.Adapter
Adapter provides access to all the items in dataset.
Adapter also takes responsibility to create view for each item and replace new content for the view whenever the original item is no longer visible.
3 – Demo simple RecyclerView
In this demo, we will create a simple demo to show you how to use RecyclerView in your Android application. Actually, it’s quite similar to ListView implementation.
First, place RecyclerView into your layout:
Retrieve it in your code:
If you’re 100% sure that the item layout size will not change in future, call setHasFixedSize() method with true value. This will help RecyclerView improve its performance significantly.
Next, create a LayoutManager and set it to the RecyclerView. Here, I use the built-in LayoutManager – LinearLayoutManager this simple demo. In next post, I’ll show you how to customize LayoutManager.
Then, we need to create the third essential component – the Adapter.
Before touching the Adapter, we need to create a layout for RecyclerView item:
Then, create SimpleAdapter class with below content:
As you can see in the SimpleAdapter class:
- Constructor: where we get the dataset that can be passed from parameter or created inside the constructor
- ViewHolder class: extends ViewHolder and contains all components, controls of item view
- onCreateViewHolder(): where we inflate the item layout and create ViewHolder
- onBindViewHolder(): where we manipulate item info into ViewHolder’s components and controls
- getItemCount(): return the dataset size
After that, we need to create an instance of the Adapter and assign to RecyclerView:
Run the application and enjoy the result:
C – Combine CardView and RecyclerView
After 2 sections above, we all know that CardView and RecyclerView are very powerful and flawless components.
In this section, I’ll show you how to combine CardView and RecyclerView to create stunning view displaying a dataset.
Firstly, create the layout for each item using CardView:
This demo will display a list of Movie info with name and thumbnail. So that we also need to create an entity class for Movie:
Then, create CardAdapter class that similar to SimpleAdapter above. Instead only one TextView, now the ViewHolder will have the ImageView to display the movie thumbnail as well.
Finally, invoke an instance of CardAdapter and set it to RecyclerView:
Now you can run and enjoy the result when combine CardView and RecyclerView:
D - Download Source Code CardView and RecyclerView in Material Design
I saw a lot of you asking about handling on item clicked listener in Recycler View, so I decided to implement it.
Please checkout the code on github for implementation details.
Feel free to share!