Jetpack Compose 枠線つきの角丸

AndroidのJetpack Composeで大枠のComposeを枠線つきの角丸にする方法です。
この記事は以下のバージョンに対応しています。

	バージョン
Jetpack Compose	1.0.4
AndroidStudio	ArcticFox 2020.3.1 Patch 3

Viewの場合

Viewを枠線つきの角丸にする場合、下記のようなxmlファイルを作成し、Viewのbackgroundに定義しました。

rounded_corner_bg.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">

  <corners android:radius="20dp" />
  <stroke
    android:width="2dp"
    android:color="@color/black" />
</shape>

Jetpack Composeの場合

Row、Column、ConstraintLayoutといった大枠のComposeを枠線つきの角丸にする場合、下記のようなModifierをComposeのmodifierに定義することで実現できます。

Modifier
    .border(
        width = 2.dp,
        color = Color.DarkGray,
        shape = RoundedCornerShape(20.dp)
    )
    .background(
        color = Color.Gray,
        shape = RoundedCornerShape(20.dp)
    )

borderとbackground両方のshapeにRoundedCornerShapeを定義する点に注意が必要です。

例

RoundedHorizontalBar.kt

@Preview(showBackground = true)
@Composable
fun RoundedHorizontalBar() {
    Row(
        modifier = Modifier
            .height(60.dp)
            .fillMaxWidth()
            .padding(8.dp)
            .border(
                width = 2.dp,
                color = Color.DarkGray,
                shape = RoundedCornerShape(20.dp)
            )
            .background(
                color = Color.Gray,
                shape = RoundedCornerShape(20.dp)
            ),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Icon(
            modifier = Modifier.padding(8.dp),
            imageVector = Icons.Rounded.Done,
            contentDescription = "Done"
        )
        Text(text = "テキスト")
    }
}