Android three lines of code to achieve Gaussian blur

Design: With the frosted glass effect, the product is directly full.

Me: Ah, yes yes yes. I will go to GayHub to find out if there is a good solution

Design: GayHub? ? ?

Find a viable solution

There are many ways to achieve Gaussian blur, StackBlur, RenderScript, Glide, etc. are all good ways, but the easiest and most efficient way is to go to Github.

The keywords of the search are android blur, you can see that there are two suitable libraries, Blurry and BlurView . These two libraries have a relatively high number of stars and are still being maintained.

So, I tried it and found that BlurView is better than Blur, and I highly recommend getting started with BlurView .

Blurry

• Advantages: The API is very simple to use, the effect is also good, and it provides solutions for synchronous and asynchronous loading

• Disadvantages: There are a lot of strange bugs, and only works on ImageView

  • When using it, you will basically encounter these two bugs: issue1 and issue2 .
  • issue1(NullPointerException) already has a ready solution
  • issue2(Canvas: trying to use a recycled bitmap) has made no progress since 2017, and the probability of recurrence is still relatively high

BlurView (recommended)

• Advantages: There are almost no bugs in the process of use, and fewer codes are called during implementation. And, complex blur View can be achieved

• Disadvantages: needs to be configured in xml, and takes a few seconds to understand the concept of rootView

• How to use:

  XML：

  <androidx.constraintlayout.widget.ConstraintLayout
    ... 
    android:id="@+id/rootView"
    android:background="@color/purple_200" >
    
    <ImageView
      ... 
      android:id="@+id/imageView" />
    
    <eightbitlab.com.blurview.BlurView
      ... 
      android:id="@+id/blurView" />
  ​
  </androidx.constraintlayout.widget.ConstraintLayout>
  复制代码

  MainActivity#onCreate：

  // 这里的 rootView，只要是 blurView 的任意一个父 View 即可
  val rootView = findViewById<ConstraintLayout>(R.id.rootView)
  val blurView = findViewById<BlurView>(R.id.blurView)
  blurView.setupWith(rootView, RenderScriptBlur(this))
  复制代码

• effect achieved

  before use:

  

  After use:

  

• Tips ：

  • Views below BlurView will have Gaussian blur effect

  • rootView can select the ViewGroup closest to the BlurView

  • .setBlurRadius()Can be used to set the size of the convolution kernel, the default is 16F

  • .setOverlayColor()Color value that can be used to set the Gaussian Blur overlay

  • For example, the following parameters can be configured to achieve this effect:

    blurView.setupWith(rootView, RenderScriptBlur(this))
                .setBlurRadius(5F)
                .setOverlayColor(Color.parseColor("#77000000"))
    复制代码

    

  • Finally, add the effect of sliding: