Android Developers
Published in

Android Developers

Blurring the Lines

Android RenderEffects #1: the blur effect

Here’s the video version of this article (and more!)

First, A Word about Drawing on Android

Each drawing primitive tells the render what, where, and how to draw the object

And Then There is RenderEffect

static RenderEffect createBitmapEffect(Bitmap bitmap)
static RenderEffect createColorFilterEffect(ColorFilter colorFilter)
static RenderEffect createShaderEffect(Shader shader)
static RenderEffect createChainEffect(RenderEffect outer,
RenderEffect inner)

Blurred Vision

static RenderEffect createBlurEffect(float radiusX, float radiusY,
Shader.TileMode edgeTreatment)
static RenderEffect createBlurEffect(float radiusX, float radiusY,
RenderEffect inputEffect,
Shader.TileMode edgeTreatment)
View.setRenderEffect(renderEffect RenderEffect)
RenderNode.setRenderEffect(renderEffect RenderEffect)

Example

A layout containing picture thumbnails. Clicking on a picture shows an enlarged view of it.
seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener{
override fun onProgressChanged(seekBar: SeekBar, progress: Int,
fromUser: Boolean) {
updateEffect(progress.toFloat())
}
// start/stop overrides stubbed out...
})
fun updateEffect(progress: Float) {
if (progress > 0) {
val blur = RenderEffect.createBlurEffect(
progress, progress, Shader.TileMode.CLAMP)
pictureGrid.setRenderEffect(blur)
} else {
pictureGrid.setRenderEffect(null)
}
}
Picture gallery with blur RenderEffect applied to the container

--

--

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