RenderEffect: Using Android’s new API to solve image rendering problems
Google released Android 12, preview 2 in March. Among the new features announced, there is the brand new RenderEffect API. In this article, we’ll learn what problems this API can solve and how to use it.
Currently, if we need to create a BlurEffect in any View, with an internet search we find some solutions like:
Another alternative would be to create our own complex algorithms like in the following tutorials:
- How to Blur Images Efficiently with Android’s RenderScript
- How to Blur an Image on Android
- How to Create a Dynamic Blur Effect on Android
All of these solutions will deliver what we need. However, some negative points we should consider are:
- External libs increase the chance of breaking changes in a project
- Creating algorithms increase the complexity of the project
- Inefficient use of CPU and RAM.
RenderEffect was created to solve this issue. In Android 12, we don’t need to use an external library or create a complex algorithm. We just need to add the RenderEffect in the needed View like this:
To remove the RenderEffect you just need to set null in the view, like this:
In image 1 we can see the initial state of the app. This is just an image and button that we’re going to see with the BlurEffect applied.
In image 2 we’ve applied the createBlurEffect (float radiusX, float radiusY, Shader.TileMode edgeTreatment) to the button and the Image.
In this method, we have the parameters radiusX and radiusY. Both are used to define the level and “direction” of the Blur effect. For example, the below image has a radiusY of 20, so you can see the image have a Blur effect in a vertical direction.
With just these two parameters it is possible to achieve several results, depending on what you need, and just with one line of code.
During my tests, I couldn’t identify any difference for the parameter edgeTreatment method. So let’s ignore it for now.
In image 3 we are seeing a different effect provided by the RenderEffect. In this case, we are using the createBlendModeEffect. This method permits us to combine two different RenderEffect.
In the method createBlendModeEffect(RenderEffect dst, RenderEffect src, BlendMode blendMode), we have two parameters that represent the RenderEffects that we will combine as dst and src. Also, there is a third parameter blendMode that gives us a lot of options and we’re gonna see some examples below.
Here is a little example of how we are using the blend mode:
The effects we are blending are the createBlurEffect and the createBitmapEffect. The createBitmapEffect basically adds a bitmap image in the View. So, as we can see we have the original image with the blur effect applied blended with a new Image superimposing it in the screen.
In image 3 we can see the now known blurEffect with a 20 radiusY + bitmapEffect. Using the blendMode BlendMode.SRC_ATOP.
In image 4 we have made just a small change from the previous image. Now the blendMode is BlendMode.DARKEN.
In image 5, is the same as Image 4. But now the blendMode is BlendMode.MULTIPLY.
In image 6, we have a slightly bigger variation. We applied a blurEffect with 50 in the radiusX and the radiusY. So, we can see our original image is now a lot more blurry. The blendMode is also BlendMode.HARD_LIGHT.
With only the three methods that have been presented, it is possible to achieve several results in a very simple way. Also, the RenderEffect still has other methods that are worth exploring.
A negative point that is worth mentioning is that it seems that this API will not be backported. So only apps with Android 12+ will be able to use this API.
However, it is already very interesting to be able to count on this tool, even if it only for a small number of users for now. Knowing that the Android team is concerned with improvements in this area is also very exciting.
You can be sure the Android team here at poq will be watching how this API develops closely in the meantime.
The source code from this article can be found here.
