Android: Card View

A card is a sheet of material that serves as an entry point to more detailed information. Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length. (from: Google Material Design)

Adding resources

Add the card view library to your project.

dependencies {
    //replace X.X.X with the latest version
    compile 'com.android.support:cardview-v7:X.X.X'
}

Add the card view to the layout.

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
<!-- content goes here -->
</android.support.v7.widget.CardView>

That’s it. :) But …

It is recommended to use a container view like RelativeLayout or LinearLayout as the first child in the card view. Then you can place the content in that layout anyway you want.

The attributes of the card view are:

• cardBackgroundColor : Defines the background color of the card. The default attribute “background” doesn’t have any effect on card.
• cardElevation : Defines the elevation. The default attribute “elevation” doesn’t have any effect on card.
• cardMaxElevation : Defines the max elevation.
• cardCornerRadius : Defines the corner radius of the card.
• cardPreventCornerOverlap : Enables/disables content padding to prevent children views to be clipped.
• cardUseCompatPadding : Adds space around the card view to prevent card’s shadow being clipped by the card’s parent view.

You can use the ones above in the XML and the ones below in JAVA:

CardView cardView = (CardView) findViewById(R.id.cardView);
cardView.setCardBackgroundColor(...);
cardView.setCardElevation(...);
cardView.setMaxCardElevation(...);
cardView.setRadius(...);
cardView.setPreventCornerOverlap(...);
cardView.setUseCompatPadding(...);

Sample Layout

The layout below is created based on the examples from the Material Design Guidelines.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:scaleType="centerCrop"
                android:src="@drawable/balon" />
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:padding="16dp">
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginBottom="8dp"
                    android:text="@string/card_title"
                    android:textColor="#000"
                    android:textSize="18sp" />
                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/card_content"
                    android:textColor="#555" />
            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/action_share"
                    android:theme="@style/PrimaryFlatButton" />
                <Button
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="@string/action_explore"
                    android:theme="@style/PrimaryFlatButton" />
            </LinearLayout>
        </LinearLayout>
    </android.support.v7.widget.CardView>
</RelativeLayout>

IMPORTANT: CardView’s shadows will be clipped if it reaches to the parent view’s borders or padding area. To prevent it, either add padding and clipToPadding=”false” to the parent or add cardUseCompatPadding=”true” to the card view.

You can see the effect of the cardCornerRadius and cardElevation below.

From left to right; cards’ elevation and radius are 2dp (default), 4dp and 8dp.

For the buttons in the card, check Material Buttons Post. But quickly, here is the style of the buttons:

<style name="PrimaryFlatButton" parent="Theme.AppCompat.Light">
    <item name="android:buttonStyle">
        @style/Widget.AppCompat.Button.Borderless.Colored
    </item>
    <item name="colorAccent">#FFAB40</item>
</style>

The end.

BONUS: Check this web site for exploring amazing assets. This is where I found the image in the sample layout. http://thestocks.im