【Android】Imageをブラー加工する方法【Jetpack Compose】

はじめに

Imageをブラー加工したい場合ってあるよね。
xmlだと結構面倒で、Glide使ってる場合なんかはwasabeefさん作のGlide Transformationを入れるとさっと実装できたりする。

僕が担当させてもらっているプロジェクトでは着々とJetpack Compose導入の準備をしていて、その過程でブラー加工をしなきゃいけない箇所があった。
xmlでやった時困った記憶があったのでかなりびびっていたのだけど、Composeではとってもシンプルかつ簡単に実装できたので紹介させて欲しい。

Modifier.blurを使う場合

そもそも、ComposeにはModifierでブラー加工のAPIが用意されていて、これを使えば一発で実装できる。

■こんな感じ

Image(
    painter = painterResource(id = R.drawable.droid),
    contentDescription = null,
    modifier = Modifier
        .blur(16.dp)
        .wrapContentSize()
        .padding(horizontal = 16.dp)
)

ただ、これってそもそも現時点(2021/11/15)ではbetaだし、Android12向けに作られてるからsdkのバージョンを31まで引き上げなきゃいけない。
今みたいな導入時期では、僕みたいに**「sdkのバージョンはあげたくないけどブラーは実装したい」**っていうワガママさん結構いるんじゃないかと思う。

Coilを使う場合

そんな時にはこれね。
xmlでGlide使ってたときは読み込みの時にブラーをかけてたな、ってのを思い出して、もしかしたらComposeのCoilにもあるんじゃないかと探してみた。
あった。

使い方は超簡単で、rememberImagePainterのbuilderにTransformationを渡すだけ。

■こんな感じ

Image(
    painter = rememberImagePainter(
        data = "https://developer.android.com/images/brand/Android_Robot.png?hl=ja",
        builder = {
            transformations(
                BlurTransformation(
                    LocalContext.current,
                    16f
                )
            )
        }
    )
)

しかもこれすごいのが、ローカルの画像もブラー加工できちゃったりする。便利〜

■こんな感じ

Image(
    painter = rememberImagePainter(
        data = R.drawable.droid,
        builder = {
            transformations(
                BlurTransformation(
                    LocalContext.current,
                    16f
                )
            )
        }
    )
)

Modifier.blurを使った場合とはぼかし具合が違うので、radiusの値をいじっていい感じに変えてあげようね。

まとめ

• sdkのバージョンが31の人はModifier.blurを使えばブラー加工できるよ。
• 31未満の人はCoilのbuilderにTransformationを渡せば実装できるよ。

一応サンプルここに置いておくね。

Glide使ってる場合も似たような感じでできるんじゃないかしら。調べてないけど。
たしかComposeだとCoil推奨だった気がするから、特に理由なければCoil使った方が良さそうな気がするけどね。

おわり。