Android CardView With Image and Text Using Kotlin

android cardview kotlin example

Read later
Save important notes and articles from internet using arusaquotes app.

Android CardView is a popular and widely used UI component that allows developers to display information in a visually appealing manner.

CardView provides a flexible and easy-to-use way to create cards that can display images, text, and other UI elements.

In this article, we will learn how to create an Android CardView with an image and text using Kotlin.

Create Project

To begin, we need to create a new Android Studio project. Open Android Studio and create a new project by selecting "Empty Activity" from the "Create New Project" dialog box.

Give your project a name CardView and select the desired minimum SDK version.

Adding dependency

For using CardView in our project we have to add Material Design dependency. Go to app level gradle file and find material dependency. If not found, put the following code in your dependencies block.

Once the dependencies are added, we need to sync our project with Gradle by clicking on the Sync Now button.

implementation ''

Adding the CardView in Layout

Go to app > resource > layout > activity_main.xml. Add a CardView. Now add a LinearLayout having an ImageView and a TextView.

Here is an example of what the layout activity_main.xml file should look like:

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat xmlns:android=""



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

                android:textSize="22sp" />

In this layout file, we have created a CardView with a LinearLayout as its child. Inside the LinearLayout, we have an ImageView and a TextView.

To add a drop shadow effect to our CardView, we have used the cardElevation attribute and set its value to 4dp. This attribute controls the Z-axis elevation of the CardView, which determines the size and depth of the shadow.

You can adjust the value of cardElevation to make the shadow more or less prominent, depending on your design preferences.

To give our CardView rounded corners, we have used the cardCornerRadius attribute and set its value to 16dp.

This attribute controls the radius of the corners, and you can adjust it to make the corners more or less rounded, depending on your design preferences.

Kotlin Code

Go to app > java > com.example.cardview > MainActivity.kt and put the following code after initializing cardview.

To add a click listener to our CardView, we have used the setOnClickListener method and implemented a setCardBackgroundColor function to change the background color of the card to light gray.

This provides visual feedback to the user when they click on the card. You can customize the click behavior by modifying the code inside the callback function.

// Changing card background color on clicking the card
touchCard.setOnClickListener {

Below is the final Kotlin code for our MainActivity. You can copy the following code and paste it directly into your MainActivity.kt file.

package com.example.cardview
import android.os.Bundle
import androidx.cardview.widget.CardView
class MainActivity : AppCompatActivity() {
    private lateinit var touchCard: CardView
    override fun onCreate(savedInstanceState: Bundle?) {
        touchCard = findViewById(

        // Changing card background color on clicking the card
        touchCard.setOnClickListener {


To test the application, we need to run it on an Android device or emulator. Once the app is launched, if we click on the CardView with the ID touchCard, the background color of the card should be turned light grey. Here is the final output.

android cardview with image and text
Android CardView

In conclusion, CardView is a useful component in Android development that allows us to create dynamic and visually appealing user interfaces.

In this article, we have demonstrated how to create a CardView with an image and text using Kotlin, and customize it by adding a drop shadow effect, rounding the corners, and adding a click listener.

By following the steps outlined in this article, you should now have a solid understanding of how to use CardView in your own Android projects, and how to customize it to achieve your desired design.

As always, don't hesitate to experiment with different attributes and settings to find the perfect look and feel for your application.

Recommended Articles

Migrating to Material 3: A Step-by-Step Guide
How to Use Glide for Android with Kotlin: A Practical Example
Mastering Android Bottom Sheets: A Comprehensive Tutorial in Kotlin
Understanding RecyclerView in Android using Kotlin
Creating a Chatbot App like ChatGPT using Kotlin: A Step-by-Step Guide
Android CardView With Image and Text Using Kotlin
Android Floating Action Button (FAB) Using Kotlin with Example
Creating an Option Menu in Android with Kotlin
How to Create Material Alert Dialog in Android Using Kotlin