Android CardView With Image and Text Using Kotlin

android cardview kotlin example
Android CardView

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

Create Project

Open Android Studio and create a new project. Give the project name CardView.

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 and sync project.

implementation 'com.google.android.material:material:1.6.1'

XML Code

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

Here is the final xml code of activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<androidx.appcompat.widget.LinearLayoutCompat 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.cardview.widget.CardView
        android:id="@+id/touchCard"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="28dp"
        app:cardCornerRadius="16dp"
        app:cardElevation="4dp">

        <androidx.appcompat.widget.LinearLayoutCompat
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:adjustViewBounds="true"
                android:contentDescription="@string/card_image"
                android:src="@drawable/dog" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:fontFamily="sans-serif-medium"
                android:paddingHorizontal="16dp"
                android:paddingVertical="12dp"
                android:text="@string/love_is_a_four_legged_word"
                android:textColor="@color/black"
                android:textSize="22sp" />
        </androidx.appcompat.widget.LinearLayoutCompat>
    </androidx.cardview.widget.CardView>
</androidx.appcompat.widget.LinearLayoutCompat>

For adding shadow in CardView, use the cardElevation attribute as following.

app:cardElevation="4dp"

For making card corner rounded, we used the cardCornerRadius attribute as following.

app:cardCornerRadius="16dp"

Kotlin Code

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

Adding click listener on cardview. Using the following code we are changing the background color of the card to light gray.

//Changing card background color on clicking the card
        touchCard.setOnClickListener {
            touchCard.setCardBackgroundColor(Color.LTGRAY)
        }

Here is the final Kotlin code MainActivity.kt

package com.example.cardview

import android.graphics.Color
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.cardview.widget.CardView

class MainActivity : AppCompatActivity() {
    private lateinit var touchCard: CardView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        touchCard = findViewById(R.id.touchCard)

        //Changing card background color on clicking the card
        touchCard.setOnClickListener {
            touchCard.setCardBackgroundColor(Color.LTGRAY)
        }
    }
}

Output

Here is the final output.

android cardview with image and text
Android CardView

Learn Android App Development using Kotlin.

Start Learning