Card View (Android)

Hi guys, this blog of mine will give you an example of a new user interface widget introduced in Android support library (v7:21.0.+) that is: CardView that helps in building rich Android apps.

CardView widget, is an extension of existing FrameLayout class. This helps to wrap other UI elements as Google style cards. CardView widgets can have shadows and rounded corners.
Following the blog will show you how to use the CardView in your application.

Add CardView Support Library
Android SDK doesn’t includes the CardView class, and hence for using CardView in your project you first need to add the card view support library to your project. Android Studio users can add the following gradle dependency in your build.graddle file to add CardView to project.

dependencies {
       compile 'com.android.support:cardview-v7:21.0.+'
}

Declare CardView Layout

Now that we have added the build dependencies to project, let us go ahead to declare the CardView layout. You can define the layout of your cardView according to your needs. For example, I am adding a textview and an ImageView in my layout.

<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/card_view"

    android:layout_width="match_parent"

    android:layout_height="240dp"

    android:layout_margin="16dp">

<RelativeLayout 

    android:layout_width="match_parent"

    android:layout_height="match_parent">

<ImageView

                android:id="@+id/imgvw"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_alignParentTop="true"

                android:layout_centerHorizontal="true"

                android:layout_margin="16dp"

                android:src="@drawable/sample_image" />

             <TextView

                android:id="@+id/txtvw"

                android:layout_width="wrap_content"

                android:layout_height="wrap_content"

                android:layout_centerInParent="true"

                android:text="CardView Example" />

</RelativeLayout>

</android.support.v7.widget.CardView>

Customize CardView Appearance

The CardView layout declaration is pretty straight forward. CardView widget allows you to control the background color, shadow, corner radius etc. For using the custom attributes in XML, you need to add the following namespace declaration to your parent layout and then add your other attributes to customize your cardview style as follows.

<android.support.v7.widget.CardView 

    xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:cardView="http://schemas.android.com/apk/res-auto"

    android:id="@+id/card_view"

    android:layout_width="match_parent"

    android:layout_height="240dp"

    android:layout_margin="16dp"

   app:cardCornerRadius="8dp"

    app:cardBackgroundColor="#fff"

    app:cardElevation="4dp" ... >

<-- Define your layout here -->

</android.support.v7.widget.CardView>

That's it...Enjoy!! and always Code to make it better..!!