EdgeButton

Component in Wear Material 3 Compose

Wear Material3 [EdgeButton] that offers a single slot to take any content.

The [EdgeButton] has a special shape designed for the bottom of the screen, as it almost follows the screen's curvature, so it should be allowed to take the full width and touch the bottom of the screen. It has 4 standard sizes, taking 1 line of text for the extra small, 2 for small and medium, and 3 for the large. See the standard values on [ButtonDefaults], and specify it using the buttonSize parameter. Optionally, a single icon can be used instead of the text.

This button represents the most important action on the screen, and must take the whole width of the screen as well as being anchored to the screen bottom.

[EdgeButton] takes the [ButtonDefaults.buttonColors] color scheme by default, with colored background, contrasting content color and no border. This is a high-emphasis button for the primary, most important or most common action on a screen. Other possible colors for different levels of emphasis are: [FilledTonalButton] which defaults to [ButtonDefaults.filledTonalButtonColors] and [OutlinedButton] which defaults to [ButtonDefaults.outlinedButtonColors]

[EdgeButton] is not intended to be used with an image background.

Edge button can be enabled or disabled. A disabled button will not respond to click events.

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.wear.compose:compose-material3:1.0.0-alpha27")
}

Overloads

@Composable
fun EdgeButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    buttonSize: EdgeButtonSize = EdgeButtonSize.Small,
    enabled: Boolean = true,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    border: BorderStroke? = null,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit,
)

Parameters

name	description
onClick	Will be called when the user clicks the button
modifier	Modifier to be applied to the button. When animating the button to appear/ disappear from the screen, a Modifier.height can be used to change the height of the component, but that won't change the space available for the content (though it may be scaled)
buttonSize	Defines the size of the button. See [EdgeButtonSize].
enabled	Controls the enabled state of the button. When false, this button will not be clickable
colors	[ButtonColors] that will be used to resolve the background and content color for this button in different states. See [ButtonDefaults.buttonColors].
border	Optional [BorderStroke] that will be used to resolve the border for this button in different states.
interactionSource	an optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this button. You can use this to change the button's appearance or preview the button in different states. Note that if null is provided, interactions will still happen internally.
content	Slot for composable body content displayed on the Button. Either an Icon or Text.

Code Examples

EdgeButtonSample

@Composable
fun EdgeButtonSample() {
    Box(Modifier.fillMaxSize()) {
        Text("Confirm", Modifier.align(Alignment.Center))
        EdgeButton(
            onClick = { /* Do something */ },
            buttonSize = EdgeButtonSize.Medium,
            modifier = Modifier.align(Alignment.BottomEnd)
        ) {
            Icon(
                Icons.Filled.Check,
                contentDescription = "Check icon",
                modifier = Modifier.size(ButtonDefaults.IconSize)
            )
        }
    }
}

EdgeButtonListSample

@Composable
fun EdgeButtonListSample() {
    val state = rememberScalingLazyListState()
    ScreenScaffold(
        scrollState = state,
        bottomButton = {
            EdgeButton(
                onClick = {},
                buttonSize = EdgeButtonSize.Large,
                colors = buttonColors(containerColor = Color.DarkGray)
            ) {
                Text("Ok", textAlign = TextAlign.Center)
            }
        }
    ) {
        ScalingLazyColumn(
            state = state,
            modifier = Modifier.fillMaxSize(),
            autoCentering = null,
            contentPadding = PaddingValues(10.dp, 20.dp, 10.dp, 100.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            items(10) {
                Card(onClick = {}, modifier = Modifier.fillMaxWidth(0.9f)) { Text("Item #$it") }
            }
        }
    }
}