CardView in Android Tutorial – Creation and Implementation

CardView in Android – What to Know

How often do you see the cardview in your android application. Here are some important cardviews that you see everyday!!

Facebook Cardview
CardView in Facebook

You see the card view in the form of pretty pictures and like buttons everyday. But how do you create one! Lets see the required structures to create a proper cardview

If you see my tutorial on listview, we are going to follow a similar approach, but add some extra concepts into it.

CardView is part of the v7 Support Libraries, which is pretty new to the android world. According to google, cardview is used as a container to hold different items together and create a neat layout for the user. CardView has a consistent layout across devices and can be very much useful to group views together.

 

CardView – Add the dependency

Go ahead and add the dependency in your build gradle

dependencies {
    compile 'com.android.support:cardview-v7:23.1.1'
}
Add the dependency properly
Add the dependency properly in the app gradle

CardView – Creating Cards

Once you are done with importing the dependencies required for creating the card view. We will look at how the card layout is implemented.

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    
</android.support.v7.widget.CardView>

You can add anything you view inside it like below

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Monk says HI!!"
        
        android:textSize="20sp" />
</android.support.v7.widget.CardView>
creating a simple textview inside cardview
Creating a simple textview inside cardview

It is actually advised to put the card view inside a layout like LinearLayout or RelativeLayout inorder to make sure there is a viewgroup holding the card view.

CardView – Important Properties

  • BackgroundColor : Defines the background color of the card. The default attribute “background” doesn’t have any effect on card.
  • cardElevation :  The elevation is handled here. The default attribute “elevation” doesn’t have any effect on card.
  • cardMaxElevation : Defines the max elevation. Make sure you have this attribute set. The elevation can affect the aesthetics
  • cardCornerRadius : Defines the corner radius of the card. Do not provide large values here, it can affect the look very drastically.
  • cardPreventCornerOverlap : Enables/disables content padding to prevent children views to be clipped. This is important, if you want to project your text values cleanly.
  • cardUseCompatPadding : Adds space around the card view to prevent card’s shadow being clipped by the card’s parent view.

 

I found a useful tutorial here, you can take a look at it for clearer implementation of values i have mentioned above.

 

CardView – Deciding the Material Design

Designing a card view is not very difficult, however from a design aspect, we would like to impart the material design into it. This improves the over all look and feel drastically. Take a look at this design project for inspiration.

Concentrate on the theme patterns and color patterns to improve your look. There is a very big need to improve the design quality as user will not encourage a poor design.

Learn about the recycler adapter pattern here. This is a important concept, if your app is going to hold dynamic data.

The card views can be created by modelling them based on a wireframe design. You can take a look at my post here, for better understanding of the tools needed to create your android application.

“Learn and Be Curious”

Leave a Comment