Android Compose – Apply Filter to Image

Android Compose – Apply Filter to Image

In this tutorial, we will learn how to apply a filter to an image displayed in Image composable, using color matrix, in Android Compose.

To apply a color filter to an Image, we can use colorFilter parameter of the Image composable.

Please refer color matrix tutorial to learn about the components of the matrix, and how these values in the matrix affect the resulting image.

Examples (4)

1. Display only Red Channel of the Image

In this example, we have apply a filter using color matrix, such that we display only Red channel of the given image in the Image composable.

Screenshot – Original Image

Create a Project in Android Studio with Empty Compose Activity template, and modify MainActivity.kt file as shown in the following.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.graphics.ColorMatrix
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        val colorMatrix = floatArrayOf(
            1f, 0f, 0f, 0f, 0f,
            0f, 0f, 0f, 0f, 0f,
            0f, 0f, 0f, 0f, 0f,
            0f, 0f, 0f, 1f, 0f
        )
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth(), content = {
                        Spacer(modifier = Modifier.height(50.dp))
                        Image(
                            painter = painterResource(id = R.drawable.hummingbird),
                            contentDescription = null,
                            colorFilter = ColorFilter.colorMatrix(ColorMatrix(colorMatrix)),
                        )
                    }
                )
            }
        }
    }
}

Screenshot

Project Download

The complete Android Studio Project in the above example is available for download at the following link. Download the ZIP file, uncompress it, and open with Android Studio.

2. Display only Blue and Green Channels of the Image

In the following Image composable, we display only blue and green channels of the image.

Color Matrix

Update the color matrix in the first example with the following data.

val colorMatrix = floatArrayOf(
    0f, 0f, 0f, 0f, 0f,
    0f, 1f, 0f, 0f, 0f,
    0f, 0f, 1f, 0f, 0f,
    0f, 0f, 0f, 1f, 0f
)

Screenshot

3. Swap Green and Red Channels of the Image

In the following Image composable, we display only blue and green channels of the image.

Color Matrix

Update the color matrix in the first example with the following data.

val colorMatrix = floatArrayOf(
    0f, 1f, 0f, 0f, 0f,
    1f, 0f, 0f, 0f, 0f,
    0f, 0f, 1f, 0f, 0f,
    0f, 0f, 0f, 1f, 0f
)

Screenshot

4. Boost Blue Channel of the Image

In the following Image composable, we increase the value of the blue channel by 100f.

Color Matrix

Update the color matrix in the first example with the following data.

val colorMatrix = floatArrayOf(
    1f, 0f, 0f, 0f, 100f,
    0f, 1f, 0f, 0f, 0f,
    0f, 0f, 1f, 0f, 0f,
    0f, 0f, 0f, 1f, 0f
)

Screenshot

Conclusion

In this Android Jetpack Compose Tutorial, we learned how to apply a filter to an Image using color matrix.