jetpack compose - Image tint

Compose Image Tint

The Image is a most frequently used widget of android jetpack compose library that allows us to display an image object on the android mobile device screen. The jetpack compose library provides us the tools to modify the image object’s appearance and color and many properties.

By default, the Image widget constructor has a parameter named ‘colorFilter’ to apply some effect of the original image color. Using this ‘colorFilter’ parameter an android app developer can apply color filters in three different ways, which are colorMatrix, lighting, and tint.

Today we will learn how we can apply tint on an Image widget’s image object using its ‘colorFilter’ parameter. Here we will pass the ‘ColorFilter.tint()’ method as the ‘colorFilter’ parameter value. We have to construct the ‘ColorFilter.tint()’ method by passing two parameters to it. One is ‘color’ and another one is ‘blendMode’.

The tint() method creates a color filter for the image that applies the blend mode given as the second parameter value. The ‘color’ argument value is used to blend source content. BlendMode is used when compositing the tint color to the destination.

There are many types of BlendMode such as ColorBurn, ColorDoge, Darken, Clear, Color, Difference, DstIn, Exclusion, Hardlight, Hue, Lighten, Luminosity, Multiply, Overlay, Saturation, Softlight, SrcAtop, SrcIn, Xor, and etc. We can pass any one of these BlendMode to the tint method as a second argument value.

But all the BlendMode has not supported the android different API levels. To determine which BlendMode is supported at the current API level, there is an extension method for that, which is ‘BlendMode.isSupported()’. This helper method allows us to determine whether the given Android API Level supports the BlendMode or not.

Open your android studio IDE and copy the following code and paste it into your composable file and run it on an emulator device to test the image tint functionality. You also can see the provided screenshot to understand the code without running it in your emulator.

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.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.BlendMode
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
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(0xFF8F9779))
                .padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Image(
                painter = painterResource(id = R.drawable.tulips),
                contentDescription = "Localized description",
                contentScale = ContentScale.Crop,
                colorFilter = ColorFilter.tint(
                    Color.Yellow,
                    BlendMode.ColorBurn
                ),
                modifier = Modifier
                    .clip(shape = RoundedCornerShape(16.dp))
                    .fillMaxWidth()
                    .height(175.dp)
            )

            Image(
                painter = painterResource(id = R.drawable.tulips),
                contentDescription = "Localized description",
                contentScale = ContentScale.Crop,
                colorFilter = ColorFilter.tint(
                    Color(0xFFCF1020),
                    BlendMode.Saturation
                ),
                modifier = Modifier
                    .clip(shape = RoundedCornerShape(16.dp))
                    .fillMaxWidth()
                    .height(175.dp)
            )

            Image(
                painter = painterResource(id = R.drawable.tulips),
                contentDescription = "Localized description",
                contentScale = ContentScale.Crop,
                colorFilter = ColorFilter.tint(
                    Color(0xFFF8DE7E),
                    BlendMode.Hue
                ),
                modifier = Modifier
                    .clip(shape = RoundedCornerShape(16.dp))
                    .fillMaxWidth()
                    .height(175.dp)
            )
        }
    }


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