jetpack compose - Image shadow elevation

Compose Image Shadow Elevation

The Image is a frequently used widget of android jetpack compose library that allows us to display an image object to the android mobile device screen. We can display an image object to the Image widget surface from various sources such as bitmap resources, painter resources, and even vector resources.

Without an image, we can’t visualize an android application. Most android app developers display multiple images on their app screens. The Image makes an app more beautiful. The jetpack compose library allows us to modify the image properties such as we can change the actual image size, can set the image scaling algorithms, can filter the image color by various conditions, and can change the image opacity value. After all, as with other widgets, the Image widget modifier object’s different elements allow us to tweak image properties more.

Today’s subject is, how we can add an elevation value to the Image object. By default Image widget constructors have no parameter to set an elevation value for the Image widget itself. But we can implement the Image widget elevation value using its modifier object’s ‘shadow’ element. Modifier ‘shadow()’ element function has a parameter named ‘elevation’. Simply we can set a value for this ‘elevation’ parameter to display an elevation to the Image widget.

This ‘shadow’ element also can display a shadow effect around our Image widget. We will discuss the modifier ‘shadow()’ element here. Then we will understand how we can show a shadow on an Image widget in a jetpack compose application.

The modifier ‘shadow()’ element has a ‘shape’ argument. We can set the Image shape using this ‘shape’ parameter such as circle shape, and rounded corner shape. It has two more parameters, which are ‘ambientColor’ and ‘spotColor’ to tweak the Image widget shadow effect. So the modifier ‘shadow()’ element's elevation, shape, clip, ambinetColor, and spotColor parameters allow us to draw a shadow object around the Image widget.

The following code is written in an android studio IDE. So you can easily copy it into your android studio project and check the result on an emulator device. We also displayed a screenshot of this tutorial at the bottom of the page.

MainActivity.kt


package com.cfsuman.jetpackcompose

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            MainContent()
        }
    }


    @Composable
    fun MainContent(){
        Column(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(32.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                painter = painterResource(id = R.drawable.flower6),
                contentDescription = "Localized description",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(350.dp,225.dp)
                    .shadow(
                        elevation = 8.dp,
                        shape = RoundedCornerShape(16.dp),
                        clip = true
                    )
            )

            Image(
                painter = painterResource(id = R.drawable.flower6),
                contentDescription = "Localized description",
                contentScale = ContentScale.Crop,
                modifier = Modifier
                    .size(300.dp)
                    .shadow(
                        elevation = 10.dp,
                        shape = CircleShape,
                        clip = true
                    )
            )
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //MainContent()
    }
}