Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Card View 
2.1.
activity_main.xml:
2.2.
MainActivity.kt:
2.3.
Output:
3.
FAQs
4.
Key Takeaways  
Last Updated: Mar 27, 2024
Easy

Android Card View

Author Pradeep Kumar
2 upvotes
Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

In this blog, we will look into the Card View of Android. Card View allows you to display any type of data. We will discuss how Card View is created and used in an android application. 

In this article, we will be using the Android Studio application, so in case you haven't yet set up the application on your system, you can check out this article.

Card View 

CardView is just a FrameLayout with rounded corners and a shadow that is based on its elevation. It allows many views to be displayed on top of each other. Its main objective is to assist the UI design have a more rich feel and look. CardView can be used to populate a list view with items. Now we'll take a look at a simple CardView implementation. 

First, we need to create a new project in Android Studio by selecting the empty activity option. In the activity_main.xml file, we have added code for adding one ImageView which is embedded on a CardView widget.

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:cardElevation="10dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:layout_gravity="center"
        app:layout_constraintStart_toStartOf="@+id/cardView"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/cn_website" />

    </androidx.cardview.widget.CardView>

</androidx.constraintlayout.widget.ConstraintLayout>

Now, go to the MainActivity.kt file. The code for the same would look something like this:

MainActivity.kt:

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
    }
}

Output:

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

FAQs

1. How can we set the elevation of a Card?
Answer: Elevation of a card can be defined using the attribute app:cardElevation.

2. When should we use a Card View?
Answer: A CardView is useful while showing heterogeneous content, i.e., when different cards are supposed to display distinct kinds of information.

3. What is the difference between a Card and Recycler View in android?
Answer: Both components are meant to achieve a certain goal and are not practically related. The RecyclerView can be used to display a list of objects, and CardView to display some of that object's data.

Key Takeaways  

In this article, we have extensively discussed the Card View in Android and its implementation in Android Studio. We discussed how Card View could be created and used in an android application.

We hope that this blog has helped you enhance your knowledge regarding the Card View. All the widgets are enclosed inside a UI layout and if you would like to learn more about layouts, check out our article on Android UI layouts. And to learn in-depth about android development, check out our Android Development course on the Coding Ninjas website. Do upvote our blog to help other ninjas grow. Happy Coding!

Previous article
Android Scroll View
Next article
Android Grid View
Live masterclass