Convert drawable to Bitmap in Android compose example
Learn how to convert a Drawable to Bitmap and display it on a Compose Image widget with RRTutors. Follow guide to manage and display images in Jetpack Compose.
Published September 27, 2022
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
- Convert Drawable to Bitmap
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
}
|