JetpackCompose Buttonサンプル

JetpackComposeのButtonサンプル

MaterialTheme

前提として、使用しているThemeはこちらです

package com.jozu.jetpack.compose.tutorial.ui.theme

import android.app.Activity
import android.os.Build
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.darkColorScheme
import androidx.compose.material3.dynamicDarkColorScheme
import androidx.compose.material3.dynamicLightColorScheme
import androidx.compose.material3.lightColorScheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.SideEffect
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.toArgb
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalView
import androidx.core.view.WindowCompat

private val DarkColorScheme = darkColorScheme(
    primary = Purple80,
    secondary = PurpleGrey80,
    tertiary = Pink80,
    background = Color(0xFF000401),
)

private val LightColorScheme = lightColorScheme(
    primary = Purple40,
    secondary = PurpleGrey40,
    tertiary = Pink40,
    background = Color(0xFFFFFBFE),
)

@Composable
fun ComposeTutorialTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    dynamicColor: Boolean = true,
    content: @Composable () -> Unit
) {
    val colorScheme = when {
        dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
            val context = LocalContext.current
            if (darkTheme) dynamicDarkColorScheme(context) else dynamicLightColorScheme(context)
        }

        darkTheme -> DarkColorScheme
        else -> LightColorScheme
    }
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        typography = Typography,
        content = content
    )
}

　

Filled button

Button(
    onClick = {},
    colors = ButtonDefaults.buttonColors(),
) {
    Text("ButtonDefaults.buttonColors")
}

Elevated button

Button(
    onClick = {},
    elevation = ButtonDefaults.buttonElevation(
        defaultElevation = 10.dp,
        pressedElevation = 15.dp,
        disabledElevation = 0.dp,
    ),
    colors = ButtonDefaults.elevatedButtonColors(),
) {
    Text("ButtonDefaults.elevatedButtonColors")
}

Filled tonal button

Button(
    onClick = {},
    colors = ButtonDefaults.filledTonalButtonColors(),
) {
    Text("ButtonDefaults.filledTonalButtonColors")
}

Outlined button

Button(
    onClick = {},
    border = BorderStroke(2.dp, MaterialTheme.colorScheme.primary),
    colors = ButtonDefaults.outlinedButtonColors(),
) {
    Text("ButtonDefaults.outlinedButtonColors")
}

Text button

Button(
    onClick = {},
    colors = ButtonDefaults.textButtonColors(),
) {
    Text("ButtonDefaults.textButtonColors")
}

色を直接指定する場合

Button(
    modifier = Modifier.padding(4.dp),
    enabled = buttonEnable,
    onClick = {},
    colors = ButtonDefaults.buttonColors(
        containerColor = Color.Red,
        contentColor = Color.Green,
        disabledContentColor = Color.DarkGray,
        disabledContainerColor = Color.LightGray,
    ),
) {
    Text("ButtonDefaults.buttonColors")
}

角丸ボタン（左右に平らな部分なし）

Button(
    onClick = {},
    shape = RoundedCornerShape(percent = 50),
) {
    Text("RoundedCornerShape(percent = 50)")
}

角丸ボタン（左右に平らな部分あり）

// ％指定
Button(
    onClick = {},
    shape = RoundedCornerShape(percent = 10),
) {
    Text("RoundedCornerShape(percent = 10)")
}

// dp指定
Button(
    onClick = {},
    shape = RoundedCornerShape(size = 10.dp),
) {
    Text("RoundedCornerShape(size = 10.dp)")
}

角カットボタン

// ％指定
Button(
    modifier = Modifier.padding(4.dp),
    enabled = buttonEnable,
    onClick = {},
    shape = CutCornerShape(percent = 10),
) {
    Text("CutCornerShape(percent = 10)")
}

// dp指定
Button(
    modifier = Modifier.padding(4.dp),
    enabled = buttonEnable,
    onClick = {},
    shape = CutCornerShape(size = 4.dp),
) {
    Text("CutCornerShape(size = 4.dp)")
}

ShapeをPathで指定

// 三角
Button(
    modifier = Modifier.padding(4.dp),
    enabled = buttonEnable,
    onClick = {},
    shape = GenericShape { size, layoutDirection ->
        moveTo(size.width / 2f, 0f)
        lineTo(size.width, size.height)
        lineTo(0f, size.height)
    },
) {
    Text("GenericShape")
}

ダウンロードした画像を角丸にしてボタンにする

Coilを使用します。
Coilは、ネット上の画像をダウンロードして表示してくれるライブラリです。自動でキャッシュも行ってくれます。

この画像(我が家のわんこです)を使用して

こんな感じのボタンにするコードです。
Rippleも白で入れています。

implementation("io.coil-kt:coil-compose:2.4.0")

    AsyncImage(
        modifier = Modifier
            .size(width = 300.dp, height = 100.dp)
            .clip(RoundedCornerShape(percent = 10))
            .clickable(
                indication = rememberRipple(color = Color.White),
                interactionSource = remember { MutableInteractionSource() },
                onClick = {
                    coroutineScope.launch {
                        snackbarHostState.showSnackbar("犬種はバーニーズです")
                    }
                }
            ),
        model = "https://raw.githubusercontent.com/jozuko/ComposeTutorial/main/image/arron.png",
        contentDescription = null,
        contentScale = ContentScale.Crop,
    )