Blurring the Traces. Android RenderEffects #1: the blur… | by Chet Haase | Android Builders | Nov, 2022


Android RenderEffects #1: the blur impact

Right here’s the video model of this text (and extra!)

On the most elementary degree, visible components on Android (like Buttons, textual content, and different UI or customized components) are usually drawn by calls to the Canvas APIs, like drawLine(), drawText(), drawBitmap(), and so forth. Your code might not name these strategies immediately except you might be drawing objects in a customized view, however they’re known as in your behalf when the UI parts in your software are drawn.

Every drawing primitive tells the render what, the place, and the way to attract the article

All the above APIs will let you arrange attributes for particular person draw*() calls, whenever you wish to have an effect on particular person drawing operations (resembling drawing a line inside a customized view). However what if you wish to use attributes for all drawing operations in a View? For instance, what if you wish to color-tint a button (which consists of a number of separate drawing operations internally), or apply a shader on a View?

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

Along with objects that encapsulate current Paint attributes, RenderEffect additionally launched a brand new impact which permits simple blurring of View or RenderNode contents:

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)

I wrote a easy app to see how blurs might be utilized in a UI. Particularly, I needed to reveal how a blur can be utilized to assist “pop” the foreground content material out from the background, a lot as digicam focus helps isolate the image topic from the background.

A format containing image thumbnails. Clicking on an image reveals an enlarged view of it.
seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener{
override enjoyable onProgressChanged(seekBar: SeekBar, progress: Int,
fromUser: Boolean) {
updateEffect(progress.toFloat())
}
// begin/cease overrides stubbed out...
})
enjoyable updateEffect(progress: Float) {
if (progress > 0) {
val blur = RenderEffect.createBlurEffect(
progress, progress, Shader.TileMode.CLAMP)
pictureGrid.setRenderEffect(blur)
} else {
pictureGrid.setRenderEffect(null)
}
}
Image gallery with blur RenderEffect utilized to the container



Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles