Jetpack Compose の Button に無意識で確保されるスペース #Android

Jetpack Compose で Button 系のコンポーネントをレイアウトに詰めていると
指定してないのに謎のスペースが空いてなぜだろうとなりませんか (ならないか……)

たとえばこういうレイアウトをしてみます:

Column {
    Button(onClick = { /*TODO*/ }) {
        Text(text = "Hello")
    }
    Button(onClick = { /*TODO*/ }) {
        Text(text = "World")
    }
}

なんか微妙にスペースがあいてることに気づくかもしれません

Layout Inspector でみるとわかりやすいです:

理由

そういえば私たちはタッチしやすくなるように clickable な UI 要素にはタップターゲットサイズを考慮する必要があって、
Compose Material はバージョン 1.1.0 から 48 dp を確保してくれているからということですね:

利用可能なタップターゲットがないマテリアルコンポーネントに、最小サイズのタップターゲットを追加しました。十分な大きさのタップターゲットを確保するためにコンポーネント間のスペースを増やしているため、タップターゲットのサイズが考慮されず、コンポーネントのサイズが表示されるサイズのままであることを前提とする、既存の UI が変更される可能性があります。

タッチターゲットのサイズ調整

Compose 1.0 と比較した場合、マテリアルコンポーネントのレイアウトでは、マテリアルのアクセシビリティガイドライン（英語）に記載されているタッチターゲットサイズ（英語）を満たすようにレイアウト領域が拡大されます。たとえば、RadioButton のタッチターゲットは、最小サイズの 48x48 dp に拡大されます。RadioButton のサイズをそれ以下に設定した場合も同様です。

(ところでタップなのかタッチなのか表記が揺れていてどっちなのでしょうね)

比較

たしかに androidx.compose.material:material の 1.0.0 と 1.1.0 を使ってみて比較すると違いがわかります:

1.0.0	1.1.0

Material 3 では androidx.compose.material3:material3:1.0.0-alpha01 からこの動作ですね。
(リリースがこの変更の後だからそうだろうという感じですね)

どうしてもなくしたいとき

Composition Local の LocalMinimumTouchTargetEnforcement を false にすることで、この配慮をなくすことができるということです。

@OptIn(ExperimentalMaterial3Api::class)
CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false) {
    Column {
        Button(onClick = { /*TODO*/ }) {
            Text(text = "Hello")
        }
        Button(onClick = { /*TODO*/ }) {
            Text(text = "World")
        }
    }
}

それでも Button は通常最低 36 dp の高さが取られるということで、意識しないと異常に小さくすることはできないでしょう:

これも Note that you can override it by applying Modifier.heightIn directly on [Button]. って書いてあるように heightIn でむりやり小さくはできる…

val buttonPaddingValues = PaddingValues(all = 0.dp)
val buttonModifier = Modifier.heightIn(min = 0.dp, max = 12.dp)

@OptIn(ExperimentalMaterial3Api::class)
CompositionLocalProvider(LocalMinimumTouchTargetEnforcement provides false) {
    Column {
        Button(
            contentPadding = buttonPaddingValues,
            modifier = buttonModifier,
            onClick = { /*TODO*/ },
        ) {
            Text(text = "Hello")
        }
        Button(
            contentPadding = buttonPaddingValues,
            modifier = buttonModifier,
            onClick = { /*TODO*/ },
        ) {
            Text(text = "World")
        }
    }
}

しかしながら…

試験運用版の LocalMinimumTouchTargetEnforcement コンポジションをローカルで使用し、階層全体でこの動作を無効にできます。ただしこれは、新しい最小サイズに対応して既存の UI を更新するまでの間、一時的なエスケープハッチとなることのみを目的としています。
https://developer.android.com/jetpack/androidx/releases/compose-material?hl=ja#1.1.0-alpha05

脱出ハッチ用途ということで理由がなければありのままのほうがいいでしょう (アナと雪の女王)

Jetpack Compose の Button に無意識で確保されるスペース

理由

タッチ ターゲットのサイズ調整

比較

どうしてもなくしたいとき

タッチターゲットのサイズ調整