[Android]画像の端が丸くならない時に確認して欲しいこと

画像の端が丸くならない時に確認して欲しいこと

Imageを使って画像を表示して画像の端っこを丸くするようなデザインをする時のお話です。
プロフィールアイコンとかを作る際に画像の角を丸くしていい感じに表示したいですよね。
しかし、、、丸くするようにコードを書いているんだけど・・・丸くならない。。。？？
こんな時ってありませんか？
私はこれで沼ったので備忘録兼、誰かのお役に立てればと思います。

まずは画像を表示してみる

画像を表示してみます。
画像の大きさは大きめの画像で1024px*512pxのものを用意しました。

@Composable
@Preview
fun App() {
    MaterialTheme {
        var showContent by remember { mutableStateOf(false) }
        Column(
            modifier = Modifier
                .safeContentPadding()
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Image(
                painter = painterResource(Res.drawable.neko_year),
                contentDescription = "Cat Image"
            )
        }
    }
}

表示はこんな感じです。

この画像を小さくして角を丸くしてみましょう。

画像のサイズを変更して角を丸くする

画像のサイズを変更しましょう。
今回は大きさを200.dp * 200.dpに変更します。
さらに角を丸くします。
modifierを変更してみましょう。

@Composable
@Preview
fun App() {
    MaterialTheme {
        Column(
            modifier = Modifier
                .safeContentPadding(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Image(
                painter = painterResource(Res.drawable.neko_year),
                contentDescription = "Cat Image",
                modifier = Modifier.size(200.dp).clip(RoundedCornerShape(16.dp))
            )
        }
    }
}

modirierでそれぞれ指定しました。

Modifier種類	指定
Size	200.dp
Clip	RoundedShape(16.dp)

画面を見てみましょう。

画像は小さくなりましたが、想定したものと違いますね。
画像の角が丸くなっていません。なぜでしょうか？

実はこれは角が丸くなっているのです。
背景色を追加してみるとわかりやすいです。
backgroundを変更してみます。

@Composable
@Preview
fun App() {
    MaterialTheme {
        Column(
            modifier = Modifier
                .safeContentPadding()
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Image(
                painter = painterResource(Res.drawable.neko_year),
                contentDescription = "Cat Image",
                modifier = Modifier.size(200.dp).clip(RoundedCornerShape(16.dp))
                    .background(Color.Gray)
            )
        }
    }
}

背景に灰色をつけてみました。

ちゃんと角が丸くなっていることがわかります。
ただ、画像の角は丸くなっていないのです。

何が起きているか？

これはImageの中に指定した画像のスケールをそのままで小さくしていることが原因です。
Imageの特性として、sizeで大きさを変更した際にスケール（1024:512(2:1)）を維持します。
そのため、画像は小さくなっているのですが上下に余分な余白が生まれているのです。

【解決】画像のcontentScaleにCrop指定

解決策は、余分な余白があった際にはスケールを無視して拡大するようにします。
そのためにcontentScaleにCropを指定します。
これを設定すると画像を幅いっぱいになるように拡大し中央に配置してくれるようになります。
（Android Dvelopper 画像をカスタマイズする）

@Composable
@Preview
fun App() {
    MaterialTheme {
        Column(
            modifier = Modifier
                .safeContentPadding()
                .fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            Image(
                painter = painterResource(Res.drawable.neko_year),
                contentDescription = "Cat Image",
                contentScale = ContentScale.Crop,
                modifier = Modifier.size(200.dp).clip(RoundedCornerShape(16.dp))
                    .background(Color.Gray)
            )
        }
    }
}

確認してみましょう。

いい感じに角も丸くなりましたね。

終わり

今回、横長の画像を切り抜くときの注意点とうまく角が丸くならないときの原因と解決方法をみました。
ただ、できるならば画像のスケールは合わせたものを用意した方がいいと思います。
切り抜いても特に問題ないならばいいのですが、全体を表示させたい時には今回の方法はできないので気をつけてください。