Card View code snippet for Android Studio

Android Card View Example

In this post, I will show you how to create a Card View in Android Studio.

CardView is an android UI component that is used to show given information inside cards.It was introduced back when Google introduced support for material design in Android Studio..Using CardView layout,one can represent the information in a framed layout manner which looks beautiful and one can also customize the drop shadow,corner radius,etc. to make it more visually appealing.

To make things better, we can even combine Cardview with RecyclerView and create more beautiful apps.

However cardview is available inside an external v7 support libraries so we will have to import the libraries first.

How to import Library?

For importing library,add these lines of code to your app module’s build.gradle file and then click on Sync Now to sync the project:

dependencies {    
implementation 'com.android.support:cardview-v7:28.0.0' }

1 2	dependencies { implementation 'com.android.support:cardview-v7:28.0.0' }

How to Add CardView or Create cards?

For using the cardview, first add these lines to the xml file:-

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
    tools:context=".CardView"
   android:layout_width="fill_parent"
    android:layout_height="100dp"
    android:layout_gravity="center"
    android:layout_margin="5dp"
    >

<android.support.v7.widget.CardView

android:id="@+id/card_view"

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

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

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

tools:context=".CardView"

android:layout_width="fill_parent"

android:layout_height="100dp"

android:layout_gravity="center"

android:layout_margin="5dp"

You can also provide a custom elevation with the card_view:cardElevation attribute which will draw a better shadow effect with a larger elevation, and a lesser elevation will result in a lighter shadow.

You can change these properties to customize the appearance of the CardView widget:

To set the corner radius in your layouts, use this attribute. card_view:cardCornerRadius
To set the corner radius of your cards, use this. CardView.setRadius
To set the background color of a card, use this attribute. card_view:cardBackgroundColor

Try to play with these settings on your own and see the corresponding changes accordingly.

The image below demonstrates card view in any android app.

The Complete Code Snippet for above example is given below:-

Java (MainActivity.java)

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class CardView extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_card_view);
    }
}

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

public class CardView extends AppCompatActivity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_card_view);

}

XML (activity_main.xml)

<android.support.v7.widget.CardView 
android:id="@+id/card_view" 
xmlns:android="http://schemas.android.com/apk/res/android" 
xmlns:app="http://schemas.android.com/apk/res-auto" 
xmlns:tools="http://schemas.android.com/tools" 
tools:context=".CardView" 
android:layout_width="fill_parent" 
android:layout_height="100dp" 
android:layout_gravity="center" 
android:layout_margin="5dp" > 

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

<ImageView android:id="@+id/im_language" 
android:layout_width="60dp" 
android:layout_height="60dp" 
android:src="@drawable/ic_music" /> 

<TextView android:id="@+id/tv_language" 
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:textSize="15dp" 
android:layout_marginLeft="5dp" 
android:text="Title comes here" /> 

</LinearLayout> 

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

<android.support.v7.widget.CardView

android:id="@+id/card_view"

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

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

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

tools:context=".CardView"

android:layout_width="fill_parent"

android:layout_height="100dp"

android:layout_gravity="center"

android:layout_margin="5dp" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal">

<ImageView android:id="@+id/im_language"

android:layout_width="60dp"

android:layout_height="60dp"

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

<TextView android:id="@+id/tv_language"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:textSize="15dp"

android:layout_marginLeft="5dp"

android:text="Title comes here" />

</LinearLayout>

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

You can directly copy paste these snippets to your android studio, and they should work perfectly. Just save and run your project.

For a more detailed guide, you can also visit android’s official guide below:-

https://developer.android.com/reference/android/support/v7/widget/CardView

Comment down below if you are facing any problems.

Free Education