BlurLayout

FrameLayout extension to support blurred semitransparent backgrounds in Android.

Motivation

There's no default support in Android for blurring views' semitransparent backgrounds taking into account all the layers behind the blurred background (which is frequently used in such design patterns as glassmorphism).

BlurLayout is what solves this issue.

Get started

Add Dependency

implementation("com.avito.android:blur-layout:1.1.1")

Initialize library

Initialize layout in

BlurLayout.init(
    onApplyBlur = { bitmap, blurRadius ->
        Toolkit.blur(inputBitmap = bitmap, radius = blurRadius)
    },
)

Use via XML

1. Wrap all the elements that should be taken into account while blurring view's semitransparent background with

   <com.avito.android.blurlayout.BlurLayout />
   .

2. Specify

   BlurLayout
   parameters.

   <!--id of the blurred background target.
   Might be omitted when there's single child.-->
   app:blurLayout_targetChildId="..."
   
   <!--Might be omitted if target view implements BlurLayout.BlurRadiusProvider.-->
   app:blurLayout_blurRadius="..."
   
   <!--Optional parameter to apply rounded corners to the blurred background.
   Might be omitted if target view implements `BlurLayout.CornerRadiusProvider`-->
   app:blurLayout_targetChildBackgroundCornerRadius="..."
   

3. Specify target view's background. E.g.

   android:background="#80FFFFFF"
   .

Single child example

<com.avito.android.blurlayout.BlurLayout
    android:background="@drawable/background_rocks"
    app:blurLayout_blurRadius="25"
    app:blurLayout_targetChildBackgroundCornerRadius="16dp">

    <View android:background="#80FFFFFF" />

</com.avito.android.blurlayout.BlurLayout>

For the full example refer to layout_example_rocks.xml

Multiple children example

<com.avito.android.blurlayout.BlurLayout
    android:background="@drawable/background_gradient"
    app:blurLayout_blurRadius="25"
    app:blurLayout_targetChildBackgroundCornerRadius="16dp"
    app:blurLayout_targetChildId="@id/blurred_background_view">

    <ImageView android:src="@drawable/ic_apple" />

    <ImageView
        android:id="@+id/blurred_background_view"
        android:background="#80FFFFFF"
        app:srcCompat="@drawable/ic_avito_logo" />

    <ImageView android:src="@drawable/ic_strawberry" />

</com.avito.android.blurlayout.BlurLayout>

For the full example refer to layout_example_fruits.xml

Use via code

BlurLayout(context = this).apply {
    // add children
}.setBlurredBackgroundForTargetChild(
    targetChild = TODO("Might be omitted if single child"),
    blurRadius = TODO(
        "Might be omitted if target view implements BlurLayout.BlurRadiusProvider"
    ),
    targetChildBackgroundCornerRadius = TODO(
        "Might be omitted if target view implements BlurLayout.CornerRadiusProvider"
    )
)