How to make Image transparency with jetpack compose?

Last updated Sep 02, 2021

In this Jetpack compose tutorial we will learn how to make Image transparency with jetpack compose in Android application.

To apply transparency to image we will use imageview property alpha.

Transparency value for the alpha property in between 0-1;



Download Source code


Image( painter = image,

contentDescription = "image",

contentScale = ContentScale.FillHeight,

modifier = Modifier.fillMaxHeight(),

alpha = 0.2f )


Let's get started

Step 1: Create android application in android studio


Step 2: Follow step for setup Jetpack Compose with Android Studio

To set transparency for Image, set alpha value of Image. alpha parameter of Image takes a float value between 0.0 and 1.0 corresponding to full transparency to no transparency, respectively.

Lets add transparency  to 0.2f to given below image

Jetpack compose Transparency Image


Step 3: Add ImageTransparencyDemo composable function in MainActivity.kt


Full Code

package com.example.jetpack

import android.os.Bundle
import android.view.WindowManager
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import com.example.jetpack.ui.theme.JetPackTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        setContent {
            MaterialTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {

fun ImageTransparency() {
    val image: Painter = painterResource(id = R.drawable.image_trans)
    Box(content = {
            painter = image,
            contentDescription = "image",
            contentScale = ContentScale.FillHeight,
            modifier = Modifier.fillMaxHeight(),
            alpha = 0.2f
        Column(content = {
            Text("Image with transparency",color = Color.Black,fontSize = 30.sp,fontWeight = FontWeight.Bold)  },verticalArrangement = Arrangement.Center,horizontalAlignment = Alignment.CenterHorizontally,modifier = Modifier.fillMaxSize())



How to make Image Transparency in Jetpack Compose


Conclusion: In this Jetpack compose tutorials we covered make image transparency by applying the Alpha value from 0 to 1


Tags: Jetpack Compose

Image Alpha

Android Image Alpha with Jetpack



Article Contributed By :


Subscribe For Daily Updates

Flutter Questions
Android Questions