Exploring Android 12: Blurs, Color Filters, & Other Effects

Android 12 introduces easier method for creating common graphic effects through a new class: RenderEffect. With this class, you are able to create 3 types of effects:

1. Single effects, which is one of these effects: blur, color filter, shader effect, or bitmap effect.
2. Chain effects, which compose two effects by chaining effects (The output of first effect will be input for the second effect and so on).
3. Blended effects, which combines two effects by a certain BlendMode.

You can apply these effects to any View instance through the new setRenderEffect method.

In this article we will create a simple application that uses RenderEffect on an ImageView and a TextView as shown below:

Here’s RenderEffect in action. Notice how the image and text on the right side changes depending on the effects applied.

Where’s the Source Code?

android-12-samples/render-effect at master · hanmajid/android-12-samples

Step by Step Explanation

Follow the steps provided below to create this application.

1. Open Android Studio. Create new project with “Empty Activity” option.

2. First, we need to import some assets for our applications. Download pokemon.png and pokemon_2.png images from this folder. And then put them in your project’s res/drawable folder.

3. Next, we will create our app’s layout first. The image below shows how the layout will look like in the end. At the top we can see two ImageViews & TextViews that says “BULBASAUR”. We are going to apply effects to both the ImageView & TextView. Below that, we have a bunch of buttons that will apply the various effects.

This is what activity_main.xml should look like.

To create this layout, open activity_main.xml file and copy-paste the code snippet below:

4. Lastly, we need to update our MainActivity.kt file. You can go ahead and copy-paste the code snippet below. The most important thing to notice here is the usage of View.setRenderEffect() method and various RenderEffect’s static methods that you can use to create the three types of effects: single effects, chain effects, and blended effects. Each effect has some parameters that you can play with such as blur’s radius and color filter’s BlendMode.

5. And that’s it! Now run your app and test the effects for yourself:

Here’s RenderEffect in action. Notice how the image and text on the right side changes depending on the effects applied.

As always, thanks for reading!

—

Want to learn more about Android 12?

Check out all of our articles from “Exploring Android 12” series here:

Farhan Majid 🐾

Exploring Android 12

View list

9 stories