Android CardView Example

Android CardView Example


Now in android creating card views has gotten even more simpler. As with material design a new view was introduced through the support v7 library, called CardView. It can be used in many ways to display cards in android. For example, it can be used like an independent view to show floating search bar on top of the screen also it can be used to display cards in a list. In this Android CardView example we will discuss how this view can be implemented in a RecyclerView list.

Recently 5.1 version of android was released, with an update for support v7 library. This is important to know because it contained a minor update for RecyclerView package. In this tutorial of Android CardView we will also discuss how this can effect us.

Android CardView Tutorial

To start off lets understand what exactly Android CardView is? Its a new widget for Android, which can be used to display a card sort of a layout in android. As you may know Android material design is inspired from paper and ink concept. Mostly it displays views on top of each other, with shadows. In simple terms, Android CardView is such a view which has all material design properties, most importantly showing shadows according the elevation. The best part about this view is that it extends FrameLayout and it can be displayed on all the platforms of android since it’s available through the Support v7 library. Lets have a look at some of its properties:

1) CardView overlapping corners:

Java: setPreventCornerOverlap(boolean)

XML: cardView:cardPreventCornerOverlap

A unique property of Android CardView is that, it has rounded corners. The interesting part about this property is that, it clips the corners of content automatically. Unfortunately this property, as of now is not supported on devices running API 20 or low. Instead when an image covering the full CardView is displayed on these devices, a padding is added to the image to prevent the overlapping corners. To make the edges overlap this property can be used. In this case you may need to use an image with round corners. Also keep in mind this does not has an effect on API 21 and above as the clipping is automatically done.

2) CardView Content Padding:

Java: setContentPadding(int, int, int, int)

XML: cardView:contentPadding

Since when a card is displayed on screen, usually multiple views are added inside it. Fortunately Android CardView supports this unique property, through which the padding for CardView content can be set once and for all. Advantage of this property is that we don’t need to set margin or padding for each view inside the CardView individually to make it look good.

3) CardView Elevation:

Java: setCardElevation(float)

XML: cardView:cardElevation

This property defines the elevation of CardView. As you may know this one of the core concepts of Android material design. According to the elevation defined, Android system dynamically shows the shadow of any material on screen.

Android CardView Example

In this tutorial we would use a RecyclerView to show a list of CardViews. Since this tutorial is not about the working of Android RecyclerView, we would not be discussing the detailed working of RecyclerView. If you wish to learn in detail about it, please refer to this RecyclerView tutorial.

Lets have a look at the CardView xml, which I will be using in this tutorial.

Before starting off don’t forget to include these dependencies in your app gradle.

Next please a look at activity layout, which shows the RecyclerView:

In this Android CardView Example, we will use this object for supplying the data to adapter:

The activity below shows the CardView list:

Next lets have a look at the main class where RecyclerView adapter is defined. This class shows how to include an Android CardView widget in a RecyclerView:

This would give an output screen with CardViews like these:

Android CardView Example

As mentioned in the opening lines of this tutorial, recently an update to support v7 library was released. This update deprecated an important method called getPosition(). This method was used to return the position of view holder item. But now two new methods, getlayoutPosition() and getadapterPosition() are introduced instead of it. These methods return the position of layout in view holder and adapter position, respectively. The later one gives the position basis on the items currently in the adapter. For better understanding, please have a look at the full source code below:

Source Code


Also in the above adapter class you may see that in onCreateViewHolder method, the card_view_row is used to inflate the CardView for a RecyclerView list. Also you may observe that in this example of Android CardView, a custom on item click listener is used. This listener is used to capture the onClick event of the CardView. It is used in such a way to simplify the code. But this can be used to detect clicks of the specific views inside CardView. Just like the Google app, we can define buttons inside the card, and detect it clicks. Hope this Android CardView Tutorial helped you understand the working of CardView and RecyclerView better. Connect with us through Google+, Facebook, and Twitter for more updates.

About Mohit Gupt

An android enthusiast, and an iPhone user with a keen interest in development of innovative applications.

Leave a comment

Your email address will not be published. Required fields are marked *

34 thoughts on “Android CardView Example