Skip to main content

Recyclerview and Cardview example in Android [Beginner Level]

Working with Recyclerview and Cardview

Recyclerview and Cardview example in Android

Hello World, Today we are going to see how we can make a simple recyclerview with cardview in android studio. In this article, you will learn how to work with recyclerview, what is recyclerview layoutmanager? See the below gif for understanding what we are going to build.

Let's start...

What is Recyclerview in Android?

Recyclerview is an advanced version of the listview. It is used to make the repeated view and recycle them to save more memory. Recyclerview is way more efficient than listview. Recyclerview easily handles a large set of views and is very flexible. Recyclerview is like a container that renders a large set of views very efficient manner. Recyclerview is optimized to work with a large number of views and save lots of memory so that your app will freeze or hang the device.

According to the official android site:

The RecyclerView widget is a more advanced and flexible version of ListView.

In the RecyclerView model, several different components work together to display your data. The overall container for your user interface is a RecyclerView object that you add to your layout. The RecyclerView fills itself with views provided by a layout manager that you provide. You can use one of our standard layout managers (such as LinearLayoutManager or GridLayoutManager), or implement your own.

What is Cardview in Android?

CardView is a widget provided by the android to build a new look and efficient UI. You can make your app look more professional see examples below. Cardview is an amazing concept which makes your user experience better than old android UI. Cardview was released with Android version 5.0 which is android lollipop.

I have already explained what is cardview, you can read about it here.  

Enough talking now let's go to the coding part. Yay!

Using Cardview in RecyclerView with example

Making recyclerview with cardview is very simple. We need to follow certain steps which are listed below.

Step 1. Add required Dependencies in your project.

We use below dependency in our project to use recyclerview and cardview.

As we are loading images from the internet we also use glide dependency in our project, if you want to learn how to use glide then you can read this article.

Step 2. Make Data Model Class for Holding Data

First, we need to make a way to hold data that we are going to use populating in the recyclerview items.

Make a new java file in the package and we name it as

And in this file, we add below code:

In the above code, we have a class name ProfileModel which has a private string variables firstName, lastName, photo, bottomColor.

After that, we have a construct with all the variables as parameters to initialize our field variables.

And then, we make the getter method for each and all the variables to get its values.

Simple and straight forward.

Step 3. Make an item layout file for recyclerview.

In this step, we will make a layout for our a single row of recyclerview so that recyclerview uses this layout and make copies of items and add data in the layout if you are unable to understand what I said then don't worry you will understand later.

To make the item layout click on the layout folder under res folder in your project and click on new and then click on the layout resource file. We will name this as profile_item and hit enter.

See below, what our main components for our item layout.

We have a cardview as the main container and an imageview that shows the profile picture and a textview to display the name of the person and in the bottom a solid color border to make a decoration in the cardview.

To make this layout we are using the below code.

We specific the height of the cardview and make rounded border any using cardCornerRadius attribute.

To use multiple views in the cardview we need to have a container layout in the cardview.

We can't use cardview as a container we must add a layout for multiple views as child.

Next is, to make image round or circular we can use cardview and take advantage of cardCornerRadius attribute. Have you noticed in this cardview we are not using and container because we are not using multiple views we are using only ImageView as a child so no need to add any container.

After that, we added a textview to display name and in the last add a view for showing a border as decoration.

We have also set the id to all the views for later use.

Step 4. Make the Adapter class for recyclerview.

In this step, we will make an adapter class that will help to populate the data in the view and make item layout copies in the recyclerview.

Let's start by making a new java file and name it as ProfileAdapter.

After that, we need to extend this class with RecyclerView.Adapter.

At this point, you will see the error in you code. Don't worry and keep going with the article.

Now, we need to create another class for view holder but this one is going to be an inner class of the ProfileAdapter class and this class will extends RecyclerView.ViewHolder. 

At this point, you will see an error in the ProfileViewHolder, to resolve this error you need to make a default constructor with the View parameter and call the super constructor. See the below code.

Now in the ProfileViewHolder class, we will make declare all the view which we want to populate the data. So we declare an ImageView for the photo, a TextView for user name, and View for bottom line background color.

After that, we will initialize them in the contractor with their corresponding ids using the itemView variable from constructor parameter. See the below code.

Now come to adapter class, we made our viewholder class now its time to make use of it in the adapter class as generic as below.

Now we need to implement the required methods these methods are as follows:

  • onCreateViewHolder
  • onBindViewHolder
  • getItemCount
These are the mandatory methods of a Recyclerview adapter.

Implement them like below.

We need to make a constructor for our adapter class so that we can pass data from our activity to adapter class.

Make a constructor like below.

In the above code, we are getting context and data as in the list and save the values to the global variables.

Now come to the methods, let's start with the third method getItemCount.

in this method, you have to return the number of items you want to make in the recyclerview.

So we simply return our data's length or size. in this case, we use the size method of the list as we will get our data in the list.

Now come to the first method, this method class for the first time when we pass an adapter to recyclerview. In this method, we will inflate our item layout which we previously made. See the code for the reference.

And this comes the last method, onBindViewHolder method is called when view binds with the recyclerview and in this method, we write our logic for populating the data in the view. see below for better understanding.

and this ends the adapter part and probably the longest one.

The whole code should look like this.

Step 5. Set Layout Manager and Adapter to RecyclerView.

Now we can set layout manager and adapter but before doing this we need to prepare our list of data and initialize recyclerview after that we can set all the things. See the code below.

and that's it now run your app and take a look at amazing recyclerview with cardview.

If you like this article, do share this article with your batchmates and friends.

And also you can subscribe to our newsletter.

Share this Article 👇

Subscribe to our Newsletter

By subscribing to our newsletter you're agreeing with our T&C.

Popular Posts

Gradient Status bar and Toolbar in Android

How to make Gradient Toolbar and Status bar in Android

Hello there, Today we are going to learn how we can make an amazing custom toolbar with gradient effect and also apply the gradient to the status bar like below.

First, let's create a new project or open your existing one.

To make gradient to status bar and toolbar we need to edit our styles.xml file to make it no action bar theme and apply fullscreen so that we can add our custom status bar.

See below snippet of styles.xml and edit your like this.

Open res folder then open values folder and select style.xml.

First, we need to change the parent attribute and replace the value with Theme.AppCompat.Light.NoActionBar by doing this default action bar will remove.

Now we add some property in the styles.xml

This will give us the ability to add a custom status bar.

For the custom toolbar, we need to make a custom layout file.

To do that we create a new layout file by right click on the layout folder and then click on new and then cli…

What is CardView in Android?

CardView in Android
Hello World, Today we are going to see what is cardview in android and what it's advantages. 
CardView is a widget provided by the android to build a new look and efficient UI. You can make your app look more professional see examples below. Cardview is an amazing concept which makes your user experience better than old android UI. Cardview was released with Android version 5.0 which is android lollipop.
According to Android's Official Site, what is cardview:
CardView API as an easy way for you to show information inside cards that have a consistent look across the platform. These cards have a default elevation above their containing view group, so the system draws shadows below them. Cards provide an easy way to contain a group of views while providing a consistent style for the container.
What are the advantages of CardView?
Before the cardview, if we want to make something look like a card we mostly use framelayout b…

How to make splash screen in Android in 2020 [Best Guide]

How to make splash screen in Android
splash screen in android github, splash screen in android tutorials point, splash screen in android javatpoint, android studio splash screen animation, advanced splash screen in android, splash screen in android geeksforgeeks
Hello World, Today we are going to see how we can make a beautiful Splash Screen in your Android App. 
Before start coding let's see, According to Wikipedia what is splash screen:

A splash screen is a graphical control element consisting of a window containing an image, a logo, and the current version of the software. A splash screen usually appears while a game or program is launching. 

A splash page is an introduction page on a website.[1][2] A splash screen may cover the entire screen or web page, or may simply be a rectangle near the center of the screen or page. The splash screens of operating systems and some applications that expect to be run in full screen usually cover the entire screen.

So basically a Splash Screen…

Load Image from URL in Android

How to show/load Image from URL in Android App

Today, we are going to learn how we can load or show an image from the internet or URL or link and show it in the ImageView in your android app.

Let's start by creating a new android project.

After creating the project we have to add our dependency to the app level Gradle file.

Open your build.gradle (Module: app) and add these dependencies

After adding the dependencies, hit the sync now button at the top right corner.

This will add the glide dependency in your project. Now open your activity xml file and add an ImageView. Like this.

We have a ConstraintLayout as parent layout and in the ConstraintLayout, we have a child ImageView and we set its id imageView.

Now open your activity java file, and add this code in your onCreate method.

In the above code, first, we are getting our image view from xml by using findViewById.

And then, we are calling the glide library, and it's with function and passing context and after that, we are c…

How to customize button in android

How to customize button in android
Hello, Today we are going to see how we can customize the button in android. We will see how we can make a rounded corner button with background color and also see how we can gradient to the button. 
See the below gif for both examples.

First, let's see  How to change button background color in android Follow these steps to change your button background in android. To apply or change the background color of a button in android, we need to make a button in our layout and a new drawable file.
We have added our button in layout as below, 

we will make a drawable file and write the code for the background of the button.

After creating the file. Add this code in the drawable file, here we have named this file as bg_btn.xml.

In the above code, first, we specify the shape of the button by setting the root element as shape and pass attribute shape and set its value to rectangle. …

Twitter Like Button in Android

How to make Twitter like button in Android

Today, we gonna learn how to make like button the same as Twitter has on their website with animation. See the below gif.

Let's get started. First, create a new project in Android Studio if you not created already.
After creating the project, we need to add some dependencies to our project.
So first, open your build.gradle (Project: <app_name>) file and add below line in allprojects repositories section as shown below.

Now after that, we need to open our build.gradle (Module: app) and this dependency.

This is all our dependency part. Now hit the sync now button at the top right corner.
This will add the dependency in our project. 
Now we can move forward and open an activity xml file and this code in our layout for the like button.

Our activity xml file has ConstraintLayout as parent layout so we have to add constraints attributes.
As you can see in our like button we have icon_type attribute has heart value. You can add thumb or st…

JSON Rest API in Android

How to use JSON Rest API in Android App

Hello guys, Today we are going to see how we can consume JSON API in Android or we can say consume REST API in Android.
First, let's see what is REST API?
According to
REST is acronym for REpresentational State Transfer. It is architectural style for distributed hypermedia systems and was first presented by Roy Fielding in 2000 in his famous dissertation.
So basically we can fetch data and create data on the server.
Now let's make a working example on JSON API.
First, we have to create a new project in the android studio if you already not created it.
Our end result app will look like this.

To make this UI, we are using android recyclerview and cardview. To use them we need to add the dependency to our project.

After adding the dependency hit the sync button.
We need internet permission as we will fetch the data from the internet.

For demo purposes, we are using user API it is free t…

Image Slider in Android

How to make Image Slider in Android App Today, I am going to show you how you can make a decent image slider in your android app very easily without writing lots of code.

check this gif below for end result what we will be going to make.

is it look beautiful? To make this type of image slider or image carousel. Follow these simple step which is given below.

First, of course, you have to create a new project in android studio.

Choose an empty activity and then choose the app name and hit the finish button.

Wait for some time to build your project and after the build.

Move your images to your drawable folder.

here as you can see, I have move 3 images name img1, img2 and img3.

After this, now we have to add our dependency for image slider.

Add this dependency in your build.gradle(app) file

After adding the dependency hit the sync now button (top right corner).

Now go to the activity xml file.

Remove Textview from the xml file and also remove ConstraintLayout and add LinearLayout

Your fil…

LocalBroadcastManager in Android

What is LocalBroadcastManager and How to use LocalBroadcastManager in Android

Today, we are going to learn what is localbroadcastmanager and how to use it our application.

Let's start.

Whats is LocalBroadcastManager?  Just like Global Broadcast receiver where we receive various broadcasts from different applications. 
For example, we can the listener broadcast for battery percentage when it very low or we can set various listeners for various events.
We can also make our custom broadcast and can set the receiver from other applications and can communicate between different applications.
But what if you only want that your custom broadcast can only listen within the application to pass some sensitive data something like user data or some transaction information.
The problem with global broadcast is that it is system-wide and can be vulnerable which can be very harmful especially when we are working with some sensitive data.
By using local broadcast we can pass data from one point to…

Pass Data between Activities

How to pass data from one activity to other activity

Today, we are going to see how we can send data from one activity to the second activity.
So let's get started,
First, create a new project if you do not create already.
Then open your first activity xml file and we are going to add a button.
This button will be our trigger to open the second activity. So to do that we need to create a button and set on click listener.
Remove textview created by the android studio by default and add a new button like the below image.

Note that I have changed my parent layout from ConstraintLayout to LinearLayout which is optional.
I have specified id to the button e.g openAcitivityButton.
Now it's time set click listener. To do that we need to open our activity java file.

In the above code, we initialize our button name it as openActivityButton with its's id and then we are calling method setOnClickListener in the onCreate method.

At this point, we have only one activity to open the next…