Back to Posts

Card View – An Introduction

Hello friends it’s my first blog and i am going to show you guys how to use ‘CardView’ in your android application, to give your app an dynamic and user friendly look. First of all let’s discuss about what is CardView ;

    1. Android CardView in Android SDK which was introduced with the android material design through the support v7 library.  After reading this article you should feel comfortable to put anything over a CardView.
    2. Android CardView gives you a platform to put something over it like TextView, ImageView and any android widget.It also provides a more advanced and flexible way of implementing complex and custom listview with more functionality that is required nowadays for our apps.

Today we are going to create a CardView having two TextView and one ImageView.Which will look as example given below –

These are the following steps which will be followed by us :-

  1. Building gradle.build to make package file compatible with CardView.
  2. Introducing CardView properties to .xml file i.e. layout file.
  3. Putting desired widgets in the CardView.

Open the Android Studio,start a new project named as CardView and choose “Empty Activity”.

Then we have to edit the ‘gradle.build’ file to make the project compatible with CardView.Add

compile 'com.android.support:cardview-v7:24.1.+'

add the above lines under the dependencies.And, press “Sync now”.

Look at the image given below for the reference.

Moving towards second step :-

Add the following code in your .xml file where the layout properties are defined,

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

look at the image given below for reference

Now copy  the following code in your .xml or layout file  :-

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="in.indilabz.cardview.MainActivity">

    <android.support.v7.widget.CardView

        android:layout_height="155dp"
        android:layout_width="match_parent"
        android:id="@+id/view"
        card_view:cardCornerRadius = "15dp"
        card_view:cardElevation="15dp"
        android:layout_alignParentStart="true">

    <ImageView
        android:layout_width="132dp"
        android:layout_height="132dp"
        android:id="@+id/imageView"
        android:src="@drawable/gg"
        android:layout_centerVertical="true"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="12dp"/>

    <TextView
    android:layout_width="150dp"
    android:layout_height="44dp"
    android:textAppearance="?android:attr/textAppearanceMedium"
    android:text="Mountain"
    android:textColor="#000000"
    android:textSize="28dp"
    android:id="@+id/textView"
        android:layout_alignTop="@+id/imageView"
        android:layout_alignParentEnd="true"
        android:layout_gravity="top|center"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="85dp"/>

    <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:text="India"
    android:textSize="25dp"
    android:textColor="#000000"
    android:id="@+id/textView2"
        android:layout_alignBottom="@+id/imageView"
        android:layout_alignStart="@+id/textView"
        android:layout_gravity="bottom|center"
        android:layout_marginBottom="34dp"
        android:layout_marginLeft="45dp"/>

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

After inserting the code in your .xml file, you will get an layout like the image given below :-

Don’t forget to put a source image in the drawable folder to let the image view on the ImageView present in the card view.

Here are some advise while working with CardView :-

  1. Never try to drag and drop widgets in the CardView, as,it will be thrown out of the CardView.
  2. Use only coding while moving widgets inside the CardView.

Even if you will drag CardView the elements within in it will be thrown out of the CardView.

So, always use coding while positioning Cards in your layout.

Thank you for visiting this tutorial. If you have any doubts or queries regarding this, you can comment below in our comment section. Please check our next part for remaining part of this tutorial.

In the next blog I will introduce you guys to the different elements of the CardView, which will give your Card layout an dynamic look.

Share this post

Leave a Reply

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

Back to Posts