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:




