Adicionar efeito de desfoque à imagem no Jetpack Compose

Olá pessoal, hoje quero compartilhar este pequeno artigo onde explico brevemente como criar uma imagem desfocada no Android. Sem muita introdução, vamos ao que interessa.

Desfoque é um efeito visual frequentemente usado em software gráfico para reduzir a clareza ou nitidez de uma imagem ou vídeo. Ele pode ser usado para diversos fins, como reduzir as distrações no fundo de uma foto ou criar uma composição visualmente mais agradável.

Como desenvolvedores, em algum momento podemos ter a necessidade de criar imagens borradas, então hoje quero compartilhar com vocês uma solução que é compatível com Android API 31.

Quando trabalhamos com Jetpack Compose, podemos aplicar um efeito de desfoque de forma muito simples usando a função de extensão de desfoque da interface Modifier.

O problema do exemplo acima é que se ele rodar em versões abaixo do Android 12, não veremos nenhum efeito, pois essa implementação só é permitida no Android 12 (API nível 31) ou versões superiores.

Portanto, teremos que verificar se estamos executando o aplicativo em versões iguais ou superiores ao Android 12.

A primeira coisa que faremos é criar nosso código para versões anteriores ao Android 12. Para isso, usaremos RenderScript e ScriptIntrinsicBlur. Criaremos uma função que pode ser composta chamada “LegacyBlurImage” que nos dará um produto Image de um bitmap previamente processado.

@Composable
private fun LegacyBlurImage(
  bitmap: Bitmap,
  blurRadio: Float,
  modifier: Modifier = Modifier.fillMaxSize()
) {
  
  val renderScript = RenderScript.create(LocalContext.current)
  val bitmapAlloc = Allocation.createFromBitmap(renderScript, bitmap)
  ScriptIntrinsicBlur.create(renderScript, bitmapAlloc.element).apply {
      setRadius(blurRadio)
      setInput(bitmapAlloc)
      forEach(bitmapAlloc)
  }
  bitmapAlloc.copyTo(bitmap)
  renderScript.destroy()

  BlurImage(bitmap, modifier)
}

@Composable
fun BlurImage(
    bitmap: Bitmap,
    modifier: Modifier = Modifier.fillMaxSize(),
) {
    Image(
      bitmap = bitmap.asImageBitmap(),
      contentDescription = null,
      contentScale = ContentScale.Crop,
      modifier = modifier
    )
}

val bitmap = BitmapFactory
  .decodeResource(LocalContext.current.resources, R.drawable.custom_image)

if (Build.VERSION.SDK_INT < Build.VERSION_CODES.S) {
    LegacyBlurImage(bitmap, 25f)
} else {
    BlurImage(
        bitmap,
        Modifier
            .fillMaxSize()
            .blur(radiusX = 15.dp, radiusY = 15.dp)
    )
}

Você pode ver o código completo aqui .

Se você gosta do meu conteúdo e quer apoiar meu trabalho, pode me dar uma xícara de café ☕️