Android Tutorials

Android CardView Complete Tutorial

Written by Sabith Pkc Mnr

The CardView can be marked as the beginning of material design structure of any Android Application. We can say that a CardView is a FrameLayout with a rounded corner background and shadow.

I have made a video for you to watch and learn the steps than by reading it. This way you can see the exact steps that you required to do. You can also download the source code in case if you’re a symbol of lazy hard worker 🙂

Source code given at the bottom

Let’s get started

I have added this tutorial on two variants, one you can watch the video tutorial and understand it or you can completely read this post. I suggest reading if you want to know each and every point repeatedly, this may take time, you know!

Video Tutorial 

If you want a well-explained video tutorial, then you can watch the below video from my official YouTube channel.

 

Learn through reading 

Reading is a good practice and always appreciated here 😀

 

Step 1: Add CardView Dependency in Gradle file

Open your build.gradle (Module: app) file and add the dependency for the CardView, like this:

Step 2: Add CardView in the layout XML file.

The CardView can be used in almost every type of Layouts. CardView can be added simply by adding the below codes between your main head layout tags.

Understanding the CardView
  • app:cardElevation : This is the amount of shadow you want to give for the card.
  • app:cardCornerRadius : The radius of curve associated on each end of card.
  • app:cardBackgroundColor : Same as it said, the color you want to give the background.
  • app:cardPreventCornerOverlap : The is one of the most important line that every CardView should include. This will help us to remove the irritating outline of the card.

Step 4: Adding layout inside the CardView

It is always suggested to create a LinearLayout inside the CardView which is really helpful to increase the flexibility of the card layout. Using RelativeLayout will decrease the number of styling and customizing features. Here’s a sample of CardView with LinearLayout inside it:

NOTE: Adding a padding to the main layout is a life saver and avoid stretching the card with screen end.

Below is a sample activity_main.xml layout with cardview and layout in it.

activity_main.xml

There you go! If you went up with any trouble while adding this codes to your project, then you can ask your question on below comment section. So, we are about to wrap up this tutorial and hope you guys got the idea from this tutorial. You can direct download the complete source code using the below button.

Source Code

Do you find this tutorial helpful? Do you think respecting the time I took to write this post? If so, please hit the below share buttons to share with your Android loving friends and family members and raise your support. Thank you!

About the author

Sabith Pkc Mnr

Internet Personality, YouTuber, Programmer & Web Entrepreneur! Working on the complete Android platform for more than 5 years!

Leave a Comment