Android Short Codes

Android Working With CardView

Android CardView
Written by Yasir Ameen

In my short time, I decided to share you very easy and short tutorial on CardView widget, which is new to Android Lollipop. In this tutorial i designed beautiful layout using CardView.  There is only xml code no java here, and result would be look like this.

CardView

So Let’s Start with Android CardView

Create a project in Android Studio with blank/empty Activity and name the project what ever you want.

you need to add following dependencies in your gradle.build system.

   dependencies {

    compile 'com.android.support:cardview-v7:23.1.1'
    compile 'com.pkmmte.view:circularimageview:1.1'
}

Understand Layout Hirearchy and Concept.

Berofe writing any xml code, first let me take you to the logic and concept behind this layout.

Items i used in this Layout

  1. LinearLayout – Root Element
  2. CardView – It is a subElement inside in LinearLayout
  3. RelativeLayout – RelativeLayout inside CardView
  4. ImageView – Banner Image layout_width=”match_parent” and layout_height=”160dp”
  5. View – CustomView represent color below image layout_height=”95dp”
  6. View – CustomView representing a black line between name and description
  7. CircularImageView – ImageView with a no shadow and same border color of View
  8. TextView – Representing Name
  9. TextView – Representing Description

 

STEP 1. Creating a CardView.

In first step just open a card_item_one.xml file insert CardView, within a CardView create a RelativeLayout.

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

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:elevation="6dp"
        card_view:cardCornerRadius="6dp">

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


STEP 2. Creating an ImageView.

Place ImageView in RelativeLayout, it is used for banner image.

 <ImageView
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:scaleType="centerCrop"
    android:id="@+id/bg_image"
    android:src="@drawable/car"/>

 

STEP 3. Creating a CustomView

I am using two CustomView here, one is simple rectangle with Material color and another one is single line which is in between Name and Description.

   <View
    android:layout_width="match_parent"
    android:layout_height="95dp"
    android:layout_marginTop="155dp"
    android:background="#F0A830"
    android:id="@+id/view" />

   <View
    android:layout_width="10dp"
    android:layout_height="1dp"
    android:alpha="0.4"
    android:background="#000000"
    android:id="@+id/line"
    android:layout_marginTop="10dp"
    android:layout_marginRight="30dp"
    android:layout_alignLeft="@+id/textView"
    android:layout_alignStart="@+id/textView"
    android:layout_below="@+id/textView"
    android:layout_alignParentRight="true"
    android:layout_alignParentEnd="true" />

STEP 4. Creating a CircularImage

Here comes a  tricky part, I used CircularImageView here i placed half of it on Banner Image and half of it View rectangle and i set the border property to false and i choose the same border color which is also a color View rectangle.

 <com.pkmmte.view.CircularImageView
    android:layout_width="80dp"
    android:layout_height="80dp"
    android:id="@+id/avatar"
    android:src="@drawable/dp"
    app:border="true"
    android:scaleType="centerCrop"
    app:border_color="#F0A830"
    app:border_width="6dp"
    android:layout_marginLeft="22dp"
    android:layout_marginStart="22dp"
    android:layout_marginBottom="42dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

STEP 5. Creating a TextView For Name and Description

Now Simply add One TextView for Name and another one for Description.

   <TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:text="Yasir Ameen"
    android:textColor="#ffffff"
    android:textSize="18sp"
    android:id="@+id/textView"
    android:layout_below="@+id/bg_image"
    android:layout_toRightOf="@+id/avatar"
    android:layout_toEndOf="@+id/avatar"
    android:layout_marginLeft="29dp"
    android:layout_marginStart="29dp" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceSmall"
    android:text="The photo of Yasir Ameen. He is an Android Application Developer and he work hard for giving thier best to the audience. Join him on facebook"
    android:textSize="10sp"
    android:lines="3"
    android:ellipsize="end"
    android:layout_marginTop="4dp"
    android:paddingBottom="4dp"
    android:paddingRight="15dp"
    android:textColor="#ffffff"
    android:id="@+id/textView2"
    android:layout_alignLeft="@+id/line"
    android:layout_alignStart="@+id/line"
    android:layout_alignParentBottom="true"
    android:layout_below="@+id/line" />

 

Creating Card One.

Now open card_item_one.xml in layout folder and and paste the following code. It is all code together which i explain above one by one.

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

    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:elevation="6dp"
        card_view:cardCornerRadius="6dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="160dp"
                android:scaleType="centerCrop"
                android:id="@+id/bg_image"
                android:src="@drawable/car"/>

            <View
                android:layout_width="match_parent"
                android:layout_height="95dp"
                android:layout_marginTop="155dp"
                android:background="#F0A830"
                android:id="@+id/view" />

            <View
                android:layout_width="10dp"
                android:layout_height="1dp"
                android:alpha="0.4"
                android:background="#000000"
                android:id="@+id/line"
                android:layout_marginTop="10dp"
                android:layout_marginRight="30dp"
                android:layout_alignLeft="@+id/textView"
                android:layout_alignStart="@+id/textView"
                android:layout_below="@+id/textView"
                android:layout_alignParentRight="true"
                android:layout_alignParentEnd="true" />

            <com.pkmmte.view.CircularImageView
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:id="@+id/avatar"
                android:src="@drawable/dp"
                app:border="true"
                android:scaleType="centerCrop"
                app:border_color="#F0A830"
                app:border_width="6dp"
                android:layout_marginLeft="22dp"
                android:layout_marginStart="22dp"
                android:layout_marginBottom="42dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceLarge"
                android:text="Yasir Ameen"
                android:textColor="#ffffff"
                android:textSize="18sp"
                android:id="@+id/textView"
                android:layout_below="@+id/bg_image"
                android:layout_toRightOf="@+id/avatar"
                android:layout_toEndOf="@+id/avatar"
                android:layout_marginLeft="29dp"
                android:layout_marginStart="29dp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:text="The photo of Yasir Ameen. He is an Android Application Developer and he work hard for giving thier best to the audience. Join him on facebook"
                android:textSize="10sp"
                android:lines="3"
                android:ellipsize="end"
                android:layout_marginTop="4dp"
                android:paddingBottom="4dp"
                android:paddingRight="15dp"
                android:textColor="#ffffff"
                android:id="@+id/textView2"
                android:layout_alignLeft="@+id/line"
                android:layout_alignStart="@+id/line"
                android:layout_alignParentBottom="true"
                android:layout_below="@+id/line" />
        </RelativeLayout>
        
    </android.support.v7.widget.CardView>


</LinearLayout>

Creating Card Two and Three.

In order to create card two and three, just copy card_item_one.xml and paste with a name of card_item_two.xml and  card_item_three.xml just change the image and text and modify android:layout_marginTop of LinearLayout which is root Element

card_item_one.xml

no android:layout_marginTop attribute used in card_item_one.xml because its first card.

card_item_two.xml

android:layout_marginTop="265dp"
because its Second card and below the top card

card_item_three.xml

 android:layout_marginTop="530dp" because its Third card and below the Second card 

Displaying All Card in MainActivity

Now open activity_main.xml and paste the following code. I used ScrollView and I am including layouts in activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context="yasir.com.androidcardview.MainActivity">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <include layout="@layout/card_template_one" />

            <include layout="@layout/card_template_two" />

            <include layout="@layout/card_template_three" />

        </RelativeLayout>

           </ScrollView>

</LinearLayout>

Run the app and enjoye.
For more about cardView you can learn from official documentation on Android Developre Site.
http://developer.android.com/training/material/lists-cards.html

 

About the author

Yasir Ameen

I'm a programmer, teacher, and speaker. I work out of my home in Pakistan, Karachi for the Mobile, especially Android Platform. I discuss about technology, gadgets, codes, the devices we’re going and we’ve been. I’m excited about community, social equity, and media.

6 Comments

  • Why you have used three xml files for 3 individual cards..you can use adapter to acheive that as your method slows down the app to load 3 xmls……moreover we cant use it when the cards are not predecided and came to know at run time.

    By the thanks for sharing

    • Yes i know we can achieve this with adapter, if you see the category of this post, you will find it in short code series.
      i just explaining the according to design not for the code efficiency.
      well thanks for comment 🙂

  • Hi
    I’m using this circularimageview in my project but it returns an error saying: Failed to find style ‘circularImageViewStyle’ in current theme. Do you know how to fix that?

  • hey and thanks for sharing when trying to build it gives a error attr radios corner does not exist
    android studio 3.0 api 16 sdk 26

Leave a Comment