In this compose example we are creating image by convert Drawable to Bitmap and adding this bitmap to Image compose widget. Generally we will add images inside drawable resource folder. From there we can add them to image.
In Compose we have different way to apply drawable to image
Read drawable from Resource :
Image Constructor with Painter we can directly read drawable resource and apply to image.
@Composable fun Image( painter: Painter, contentDescription: String?, modifier: Modifier = Modifier, alignment: Alignment = Alignment.Center, contentScale: ContentScale = ContentScale.Fit, alpha: Float = DefaultAlpha, colorFilter: ColorFilter? = null ) |
Example code:
Image( // in this image we are specifying our drawable file // which we have to display on below line. painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = "Android", alignment = Alignment.Center )
|
Convert Drawable to Bitmap
In the second way frist we are reading the Drawable from resource folder and then converting this drawable to bitmap and applying to Image
Constructor for Image with Bitmap parameter
@Composable fun Image( bitmap: ImageBitmap, contentDescription: String?, modifier: Modifier = Modifier, alignment: Alignment = Alignment.Center, contentScale: ContentScale = ContentScale.Fit, alpha: Float = DefaultAlpha, colorFilter: ColorFilter? = null, filterQuality: FilterQuality = DefaultFilterQuality ) |
Example code:
val bitmap = getBitmapFromImage(ctx, R.drawable.download) Image( modifier = Modifier .height(200.dp) .width(200.dp), bitmap = bitmap, contentDescription = "Android Compose", alignment = Alignment.Center ) |
// This function creating the Bitmap by converting drawable resource @Composable private fun getBitmapFromImage(context: Context, drawable: Int): ImageBitmap { val option = BitmapFactory.Options() option.inPreferredConfig = Bitmap.Config.ARGB_8888 val bitmap = BitmapFactory.decodeResource( LocalContext.current.resources, drawable, option ).asImageBitmap() return bitmap } |
Now let run the application on your emulator/device you will see below output
Complete example code to convert Drawable to Bitmap in Android Compose
package rrtutors.com.composetextexample import android.content.Context import android.graphics.Bitmap import android.graphics.BitmapFactory import android.graphics.drawable.DrawableContainer import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.material.Scaffold import androidx.compose.material.Text import androidx.compose.material.TopAppBar import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.* import androidx.compose.ui.graphics.painter.BitmapPainter import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.painterResource import androidx.compose.ui.semantics.Role.Companion.Image import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.unit.dp import androidx.compose.ui.unit.sp import androidx.core.content.ContextCompat import rrtutors.com.composetextexample.ui.theme.greenColor @Composable fun drawbleToBitmap() { Scaffold( // in scaffold we are specifying top bar. topBar = { // inside top bar we are specifying background color. TopAppBar(backgroundColor = greenColor, // Apply Title for the Topbar title = { Text( text = "Image to Bitmap", modifier = Modifier.fillMaxWidth(), textAlign = TextAlign.Center, color = Color.White ) }) }) { //Here we are calling our actual functionality to show images drawableToBitmap() } } // Here we are created a simple compose function which will have the ui functionality @Composable fun drawableToBitmap() { val ctx = LocalContext.current // on below line we are creating a column for our ui. Column( modifier = Modifier .fillMaxWidth() .fillMaxHeight() .fillMaxSize() .padding(6.dp), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Text( modifier = Modifier.padding(6.dp), text = "Normal Image", fontWeight = FontWeight.Bold, color = greenColor, fontSize = 20.sp ) // Adding the Space between compose widgets by using Spacer Spacer(modifier = Modifier.height(20.dp)) // Create image from Resource drawable by Painter property Image( // in this image we are specifying our drawable file // which we have to display on below line. painter = painterResource(id = R.drawable.ic_launcher_foreground), contentDescription = "Android", alignment = Alignment.Center ) // on below line we are specifying spacer of height 20 Spacer(modifier = Modifier.height(20.dp)) Text( modifier = Modifier.padding(6.dp), text = "Bitmap Image", fontWeight = FontWeight.Bold, color = greenColor, fontSize = 20.sp ) // on below line we are specifying spacer of height 20 Spacer(modifier = Modifier.height(20.dp)) val bitmap = getBitmapFromImage(ctx, R.drawable.download) Image( modifier = Modifier .height(200.dp) .width(200.dp), bitmap = bitmap, contentDescription = "Android Compose", alignment = Alignment.Center ) } } // This function creating the Bitmap by converting drawable resource @Composable private fun getBitmapFromImage(context: Context, drawable: Int): ImageBitmap { val option = BitmapFactory.Options() option.inPreferredConfig = Bitmap.Config.ARGB_8888 val bitmap = BitmapFactory.decodeResource( LocalContext.current.resources, drawable, option ).asImageBitmap() return bitmap } |
Article Contributed By :
|
|
|
|
291 Views |