[Android/Kotlin] Viewpager에서 Glide 이미지 Blur, 투명하게

앱에서 만약 사려고 하는 제품이 품절이다?

그러면 제품 이미지가 블러처리 되도록 보이게 만들어야 한다

 

제품의 사진은 여러개이므로 viewpager를 사용한 상황이였고,

서버에서 받아온 imageURL을 glide로 하나하나 뿌렸다

 

그러면 glide를 이용해서 blur를 처리하면 되겠구나! 해서 찾아보니

좋은 라이브러리가 있어 기록해본다

https://github.com/wasabeef/glide-transformations

 

1. gradle 추가

repositories {
  mavenCentral()
}

dependencies {
  implementation 'jp.wasabeef:glide-transformations:4.3.0'
  // If you want to use the GPU Filters
  implementation 'jp.co.cyberagent.android:gpuimage:2.1.0'
}

 

2. 사용하고 싶은 곳에 apply() 하면 된다

if (soldOut) {
    Glide.with(context)
        .load(imageURL)
        .apply(RequestOptions.bitmapTransform(BlurTransformation(25, 3)))
        .placeholder(R.drawable.img_image_loading)
        .into(mImageView)
} else {
    Glide.with(context)
        .load(imageURL)
        .placeholder(R.drawable.img_image_loading)
        .into(mImageView)
}

 

* blur

BlurTransformation(25, 3)

에서 2번째 인자는 흐릿함의 정도로 1은 제일 약한 blur처리가 된다

 

* 이미지 흰색으로 불투명하게

.apply(RequestOptions.bitmapTransform(ColorFilterTransformation(Color.parseColor("#80ffffff"))))

 

블러 처리 전

 

블러 처리한 후(sampling:3)

 

흰색으로 불투명하게 처리