Android Kotlin: How to set CardView elevation

This code demonstrates setting the elevation of a CardView programmatically in an Android application written with Kotlin. It achieves this by defining an extension function and utilizing properties available on the CardView class.

Explanation:

MainActivity.kt:
- The onCreate function inflates the layout (activity_main.xml) and sets the content view.
- It retrieves a reference to the second CardView (cardViewBottom) using its ID.
- The code then sets the elevation property of the card to 4dp using the dpToPixels extension function. This function converts the provided dp value (density-independent pixels) to the equivalent pixel size based on the device's display metrics.
- Finally, the maxCardElevation property is set to 6dp, defining the maximum elevation the card can reach when pressed.
Extension function - dpToPixels:
- This extension function takes an integer representing dp and the context of the application as arguments.
- It uses TypedValue.applyDimension to convert the dp value to pixels based on the context's display metrics.
activity_main.xml:
- This file defines the layout for the activity. It includes two CardViews stacked on top of each other.
- The first CardView showcases setting elevation through XML attributes. It defines properties like cardElevation and cardMaxElevation directly in the layout file.
- The second CardView utilizes the ID cardViewBottom which is referenced in the code to set elevation programmatically.

Summary:

This example provides a flexible approach for managing CardView elevation in your Android application. You can define default elevations in the layout file and adjust them dynamically in code using the provided extension function. This allows for creating a more responsive and interactive user experience.

MainActivity.kt


package com.example.jetpack

import android.content.Context
import android.os.Bundle
import android.util.TypedValue
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

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

        // set second card view elevation programmatically
        cardViewBottom.elevation = 4.dpToPixels(this)
        cardViewBottom.maxCardElevation = 6.dpToPixels(this)
    }
}


// extension function to convert dp to equivalent pixels
fun Int.dpToPixels(context: Context):Float = TypedValue.applyDimension(
    TypedValue.COMPLEX_UNIT_DIP,this.toFloat(),context.resources.displayMetrics
)

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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#EDEAE0">

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:cardBackgroundColor="#7B68EE"
        app:cardCornerRadius="12dp"
        app:contentPadding="25dp"
        app:cardElevation="4dp"
        app:cardMaxElevation="6dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center"
            android:padding="30dp"
            android:fontFamily="sans-serif-condensed-medium"
            android:text="CardView Elevation In XML"
            android:textSize="30sp" />

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cardViewBottom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="32dp"
        android:layout_marginEnd="16dp"
        app:cardBackgroundColor="#E63E62"
        app:cardCornerRadius="12dp"
        app:contentPadding="25dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/cardView">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:padding="30dp"
            android:fontFamily="sans-serif-condensed-medium"
            android:text="CardView Elevation Programmatically"
            android:textSize="30sp" />

    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

build.gradle(app) [code to add]


dependencies {
    // card view
    implementation "androidx.cardview:cardview:1.0.0"
}