Android 12 RenderEffect

Blur background is the most appealing thing in Apple’s app environment.
Now we have it in android too.

lokeshdeshmukh/SplashScreenAndroid12

In Android API ≥31, We have a class :

RenderEffect : This applies common graphics effects such as blurs, color filters, Android shader effects, and more to Views and rendering hierarchies.

Example: If you want to blur a view, Lets say main Constraint Layout (As Shown Above) :

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_view2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    tools:context=".FirstFragment">

    <TextView
        android:id="@+id/textview_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_first_fragment"
        android:textColor="@color/white"
        app:layout_constraintBottom_toTopOf="@id/button_first"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/next"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textview_first" />
</androidx.constraintlayout.widget.ConstraintLayout>

Then on Click of a button you should use:

findViewById<View>(R.id.main_view2).
setRenderEffect(RenderEffect.createBlurEffect(10f, 10f, Shader.TileMode.CLAMP))
//To remove Render Effect
findViewById<View>(R.id.main_view2).setRenderEffect(null);

For view setRenderEffect function will be available above API 30.

There are 3 types of Shader Title Mode:

1. CLAMP : Replicate the edge color if the shader draws outside of its original bounds.
2. REPEAT: Repeat the shader’s image horizontally and vertically.
3. MIRROR: Repeat the shader’s image horizontally and vertically, alternating mirror images so that adjacent images always seam.

Happy Coding!