jetpack compose - Image from bitmap

Compose Image From Bitmap

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

This android application development tutorial will instruct us on how we can show an image object on an Image widget surface from a Bitmap resource. The Image widget has different constructors to show images from different sources, such as to display a bitmap image it has a constructor, and to show a vector image on the surface it has another constructor.

To display a bitmap on the Image surface we will use the Image specified constructor which has the parameter ‘bitmap’. We will pass the ‘ImageBitmap.imageResource()’ value to the ‘bitmap’ parameter of the Image widget constructor. This ‘ImageBitmap.imageResource()’ method has a required parameter named ‘id’. Now we can pass a drawable resource id for this method ‘id’ parameter value. Finally, our Image widget displays our provided bitmap image on its surface.

As with other constructors, we can change the Image widget image size, filter color, content scale algorithm, opacity, alignment, filter quality, and many more by its elements.

The following android kotlin code is written in an android studio IDE. Just copy the code and paste it into your composable file, and run the app on the emulator to see the result. We also provided a screenshot of the device screen to understand it clearly.

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.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.res.imageResource
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(0xFFFEFEFA))
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(32.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                bitmap = ImageBitmap
                    .imageResource(
                        id = R.drawable.flowers
                    ),
                contentDescription ="Localized description"
            )

            Image(
                bitmap = ImageBitmap
                    .imageResource(
                        id = R.drawable.flowers
                    ),
                contentDescription ="Localized description",
                colorFilter = ColorFilter.tint(
                    color = Color(0xFF6495ED),
                    blendMode = BlendMode.Saturation
                )
            )
        }
    }


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