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?

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:

Exploring Android 12

9 stories

--

--

--

Android Engineer @ Bobobox.co.id

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Flutter: Make ExpansionTile work as ExpansionPanelList.radio

August Development Update

Unreal Engine : Advance Key Binding

Mini: Embrace Reactivity. Flux & Android

[Infographic] Zero-Touch enrollment for everyone

Healthier cleaner code in your Android projects

Turn OFF the Quick Open Camera Setting on Android 12

2D Mobile Game: Player Jump Optimized!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Farhan Majid 🐾

Farhan Majid 🐾

Android Engineer @ Bobobox.co.id

More from Medium

Exploring Android RoleManager

How to Observe Application,Activity and Fragment States in Android

BeeHive View in Android

Step-by-step Guides to add Android App Icon