[ 안드로이드 ] View에 블러처리 하기 - BlurView 라이브러리

 

 

앱 개발을 하다보면 디자인 상으로 블러 처리를 해주어야 할 때가 많은데, 이미지에 블러 처리를 해주는게 아닌 View 자체에 블러 처리가 되는 것을 원했다.

 

 

 

위와 같은 화면을 만들기 위해 해당 라이브러리를 이용했는데, 꽤 괜찮았었고 사용시 주의점 등을 기록하기 위해 해당 글을 작성했다.

 

GitHub - Dimezis/BlurView: Dynamic iOS-like blur of underlying Views for Android

 

---

라이브러리 적용

build.gradle에 아래와 같이 추가해주면 된다.

    /* BlueView */
    implementation 'com.github.Dimezis:BlurView:version-2.0.3'

 

---

사용법

 

BlurView 선언

xml에 아래와 같이 BlurView를 선언해준다.

            <eightbitlab.com.blurview.BlurView
                android:id="@+id/blurViewBackground"
                android:layout_width="0dp"
                android:layout_height="0dp"
                app:blurOverlayColor="@color/black_trans_70"

                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toBottomOf="parent"/>

 

Blur 효과 적용

단순히 BlurView만 선언하다고 해서 블러가 적용되는 것은 아니다.

 

rootView는 레이아웃 계층에서 BlurView와 가장 가까운 View를 선택하라고 가이드에 명시 되어있다.

 

무조건 가까운 뷰를 선택해야 동작하는 것은 아니다.

더 상위의 뷰를 선택해도 동작하지만, 결과만 다를 뿐이기에 원하는 결과에 맞게 적용하면 될 것 같다.

    @SuppressLint("ClickableViewAccessibility")
    private fun initBlurBackground(){
        context ?: return

        val decorView = activity?.window?.decorView
        val rootView = decorView?.findViewById<ViewGroup>(R.id.clBlurBasedLayout)!!
        val windowBackground = decorView.background

        with(bind.blurViewBackground){
            setOnTouchListener { v, event -> true }
            setupWith(rootView, RenderScriptBlur(context))
                .setFrameClearDrawable(windowBackground)
                .setBlurRadius(5f)
        }
    }

 

 

실행 결과

 

---

주의할 점

1. View ID 중복

activity의 window에서 decorView를 가져오기 때문에 rootView로 지정할 뷰의 id가 중복되는 것을 주의해야 한다.

    @SuppressLint("ClickableViewAccessibility")
    private fun initBlurBackground(){
        context ?: return

        val decorView = activity?.window?.decorView // activity의 window를 가져옴
        val rootView = decorView?.findViewById<ViewGroup>(R.id.clBlurBasedLayout)!! // ID 중복 주의
        val windowBackground = decorView.background

        with(bind.blurViewBackground){
            setOnTouchListener { v, event -> true }
            setupWith(rootView, RenderScriptBlur(context))
                .setFrameClearDrawable(windowBackground)
                .setBlurRadius(5f)
        }
    }

 

블러가 Fragment의 최상위 뷰에 적용되길 원했었기 때문에 Fragment 내에서 최상위 레이아웃을 rootView로 지정했었다.

 

val rootView = decorView?.findViewById<ViewGroup>(R.id.clParent)!! // ID 중복 주의

 

 

위와 같이 clParent라고 작성했었는데, 현재 Fragment가 아닌 홈 화면이 배경으로 보였다.

 

해당 문제의 원인은 뷰의 ID 중복이었다.

 

clParent라는 네이밍은 대부분의 레이아웃에서 공통으로 사용되고 있었고, activity의 window에서 decorView를 가져오다보니 HomeFragment의 clParent에 블러 처리가 적용된 것이다.

 

ID 중복을 해결하고 나선 정상적으로 잘 표시 되었다. 

해당 라이브러리를 사용할 때 주의해야할 듯 하다.

 

2. View가 움직이는 경우

두번 째로 주의할 점은 블러처리 되는 뷰에 움직이는 뷰가 있는 경우 블러 처리가 깨지게 된다.

 

나 같은 경우 Lottie 애니메이션도 있고, ViewPager를 통한 스와이프 동작까지 들어가 있기에 블러 처리가 깨지는 부분이 많았다.

 

그래서 ViewPager를 포함하는 레이아웃이 아닌 더 상위의 뷰에 블러 처리를 해주었고, Lottie 애니메이션 같은 경우에는 블러 화면이 표시될 때 중지하고, 블러 화면이 닫힐 때 다시 재생하는 방법으로 해결했다.