Jetpack ComposeのButtonの種類

はじめに

Jetpack Composeには、マテリアルデザインのボタンの種類が5つ存在するので紹介していきます。
Android Developersの記事を参考にしています。

ボタンを配置

Composable関数内に書くことでボタンを配置できます。

@Composable
fun ButtonView() {
    Button(onClick = { }) {
        Text("Button")
    }
}

Buttonの種類

Button

primaryの色で塗りつぶされたボタンです。
メインの色なので濃いです。

Button(onClick = { }) {
    Text("Button")
}

FilledTonalButton

primaryContainerの色で塗りつぶされたボタンです。
メインの色を少し薄めた色になります。

FilledTonalButton(onClick = { }) {
    Text("FilledTonalButton")
}

OutlinedButton

枠線付きのボタンです。

OutlinedButton(onClick = { }) {
    Text("OutlinedButton")
}

ElevatedButton

ボタンが立体的になります。

ElevatedButton(onClick = { }) {
    Text("ElevatedButton")
}

TextButton

テキストのみのボタンです。

TextButton(onClick = { }) {
    Text("TextButton")
}

API サーフェス

以下の機能が用意されています。
・onClick
・enabled
・colors
・contentPadding

onClick

引数としてonClickに以下のように書いて代入する。
そうすることでボタンをタップすると、代入した処理が実行される。

Button(
    onClick = { 
        print("タップした。")
    }
) {
    Text("Button")
}

画像はsnackbarを表示させている。

enabled

引数としてenabledにtrueを代入すると活性、falseを代入すると非活性となりボタンがグレーアウトし反応しなくなる。

Button(
    onClick = { 
        print("タップした。")
    },
    enabled = false
) {
    Text("Button")
}

画像はfalseの状態。

colors

引数としてcolorsに、Composable関数のbuttonColorsをColorを指定して呼び出すことで、色を変えることができる。

Button(
    onClick = { 
        print("タップした。")
    },
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Red,
        contentColor = Color.Black
    )
) {
    Text("Button")
}

画像は背景を赤、文字を黒で指定している。

contentPadding

引数としてcontentPaddingに、Stable関数のPaddingValuesの引数に値を設定して代入することで、ボタン内のpaddingを設定できる。

Button(
    onClick = { 
        print("タップした。")
    },
    contentPadding = PaddingValues(32.dp)
) {
    Text("Button")
}

ハンバーグみたいになりました。

筆者が実装したソース

参考資料