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.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.painter.Painter
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?) {
        super.onCreate(savedInstanceState)
        window.setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE)
        setContent {
            MaterialTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    ImageTransparency()
                }
            }
        }
    }
}

@Composable
fun ImageTransparency() {
    val image: Painter = painterResource(id = R.drawable.image_trans)
    Box(content = {
        Image(
            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())
    })
}

 

Image

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 :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

51 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions