How to Use CardView In Android Apps To Display Large Data Sets Efficiently

CardView is a new UI widget introduced with the new support library in Material Design.

It is more advanced and flexible version of a listview. Using CardView you can represent your information in a card manner with a drop shadow.

In technical terms, it extends the FrameLayout class and allows you to show information inside cards which have consistent look on the platform. These CardView widgets can have both, rounded corners and shadows.

In this tutorial, we’re going to share how to add CardView in an Android application with one demo.

Implementing CardView

Before we get started, you have to add the CardView dependency in build.gradle file and sync the project.

Dependencies
{
compile 'com.android.support:cardview-v7:23.3.0'
}

Once you add this dependency, it’s time to add the CardView widget in the layout XML.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:card_view="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<!-- A CardView that contains a Images and texts -->

<android.support.v7.widget.CardView
android:id="@+id/card_view"
android:layout_width="fill_parent"
android:layout_height="100dp"
android:layout_gravity="center"
android:layout_margin="5dp"
card_view:cardBackgroundColor="@color/cardview_light_background"
card_view:cardCornerRadius="2dp"
card_view:contentPadding="10dp">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">

<ImageView
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/user" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical">

<TextView
android:id="@+id/tvName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:textStyle="bold" />

<TextView
android:id="@+id/tvEmailId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/tvName"
android:layout_marginTop="10dp" />
</LinearLayout>
</LinearLayout>
</android.support.v7.widget.CardView>

</LinearLayout>

This is how you can add a simple CardView in your Android application.

Here’s how it will look after you test this demo:

cardview screenshot

 

In order to create a card with shadow, you can use card_view:cardElevation attribute.

CardView uses real elevation and dynamic shadows on Android 5.0 (API level 21) and above and falls back to a programmatic shadow implementation on earlier versions.

You can also use the following properties to customize the appearance of the CardView widget.

  • To set the corner radius in your layouts, use card_view:cardCornerRadius attribute
  • To set the corner radius in your code, use CardView.setRadius method
  • To set the background color of card, use card_view:cardBackgroundColor attribute

All in all, with these properties you can create a CardView in your Android application just like we have created in this CardLayout example. And, if you face any problem creating the same demo or applying it in your own Android app, you can contact our developers.

Hope this tutorial helped you understand the working of CardView. If you’ve any app idea in which you wish to present your information in the CardView and looking to hire an Android app development company, you can contact us.

We have also uploaded the entire source code on GitHub. Click here to download it.

This page was last edited on July 24th, 2018, at 8:15.
 
 

Contact Us Now to Use CardView in Your Android App

Get your free consultation now