RemoteEdgeButton

Functions summary

Unit
@Composable
@RemoteComposable
RemoteEdgeButton(
    onClick: Action,
    modifier: RemoteModifier,
    buttonSize: RemoteEdgeButtonSize,
    enabled: RemoteBoolean,
    colors: RemoteButtonColors,
    border: RemoteDp?,
    borderColor: RemoteColor?,
    shape: RemoteShape,
    contentPadding: RemotePaddingValues,
    content: @Composable @RemoteComposable RemoteRowScope.() -> Unit
)

Wear Material 3 RemoteEdgeButton that offers a single slot to take any content.

Functions

RemoteEdgeButton

@Composable
@RemoteComposable
fun RemoteEdgeButton(
    onClick: Action,
    modifier: RemoteModifier = RemoteModifier,
    buttonSize: RemoteEdgeButtonSize = RemoteEdgeButtonSize.Small,
    enabled: RemoteBoolean = true.rb,
    colors: RemoteButtonColors = RemoteEdgeButtonDefaults.buttonColors(),
    border: RemoteDp? = null,
    borderColor: RemoteColor? = null,
    shape: RemoteShape = RemoteEdgeButtonDefaults.shape(buttonSize),
    contentPadding: RemotePaddingValues = RemoteEdgeButtonDefaults.ContentPadding,
    content: @Composable @RemoteComposable RemoteRowScope.() -> Unit
): Unit

Wear Material 3 RemoteEdgeButton that offers a single slot to take any content.

The RemoteEdgeButton 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.

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. This assumes that the Remote Compose Player is taking the full width of the screen.

RemoteEdgeButton has 4 standard sizes, taking 1 line of text for extra small, 2 for small and medium, and 3 for large. Specify it using the buttonSize parameter. Optionally, a single icon can be used instead of text.

RemoteEdgeButton takes the RemoteEdgeButtonDefaults.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: filled tonal button which defaults to RemoteEdgeButtonDefaults.filledTonalButtonColors and outlined button which defaults to RemoteEdgeButtonDefaults.outlinedButtonColors.

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

Example of a RemoteEdgeButton:

import androidx.compose.remote.creation.compose.action.valueChange
import androidx.compose.remote.creation.compose.state.rememberMutableRemoteInt
import androidx.compose.remote.creation.compose.state.rs
import androidx.wear.compose.remote.material3.RemoteEdgeButton
import androidx.wear.compose.remote.material3.RemoteEdgeButtonSize
import androidx.wear.compose.remote.material3.RemoteText

val tapCount = rememberMutableRemoteInt(0)
val countSuffix = " (".rs + tapCount.toRemoteString() + " taps)"

RemoteEdgeButton(
    onClick = valueChange(tapCount, tapCount + 1),
    modifier = modifier,
    buttonSize = RemoteEdgeButtonSize.Small,
) {
    RemoteText("Tap me!".rs + countSuffix)
}

Example of a RemoteEdgeButton with an icon:

import androidx.compose.remote.creation.compose.action.valueChange
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.size
import androidx.compose.remote.creation.compose.state.rememberMutableRemoteInt
import androidx.compose.remote.creation.compose.state.rs
import androidx.wear.compose.remote.material3.RemoteEdgeButton
import androidx.wear.compose.remote.material3.RemoteEdgeButtonDefaults
import androidx.wear.compose.remote.material3.RemoteEdgeButtonSize
import androidx.wear.compose.remote.material3.RemoteIcon
import androidx.wear.compose.remote.material3.previews.utils.TestImageVectors

val tapCount = rememberMutableRemoteInt(0)

RemoteEdgeButton(
    onClick = valueChange(tapCount, tapCount + 1),
    modifier = modifier,
    buttonSize = RemoteEdgeButtonSize.ExtraSmall,
) {
    RemoteIcon(
        imageVector = TestImageVectors.VolumeUp,
        contentDescription = "Volume Up".rs,
        modifier =
            RemoteModifier.size(
                RemoteEdgeButtonDefaults.iconSizeFor(RemoteEdgeButtonSize.ExtraSmall)
            ),
    )
}

Example of a RemoteEdgeButton with filled tonal colors:

import androidx.compose.remote.creation.compose.action.valueChange
import androidx.compose.remote.creation.compose.state.rememberMutableRemoteInt
import androidx.compose.remote.creation.compose.state.rs
import androidx.wear.compose.remote.material3.RemoteEdgeButton
import androidx.wear.compose.remote.material3.RemoteEdgeButtonDefaults
import androidx.wear.compose.remote.material3.RemoteEdgeButtonSize
import androidx.wear.compose.remote.material3.RemoteText

val tapCount = rememberMutableRemoteInt(0)

RemoteEdgeButton(
    onClick = valueChange(tapCount, tapCount + 1),
    modifier = modifier,
    buttonSize = RemoteEdgeButtonSize.Medium,
    colors = RemoteEdgeButtonDefaults.filledTonalButtonColors(),
) {
    RemoteText("Filled Tonal".rs)
}

Example of a RemoteEdgeButton with multi-line text:

import androidx.compose.remote.creation.compose.action.valueChange
import androidx.compose.remote.creation.compose.state.rememberMutableRemoteInt
import androidx.compose.remote.creation.compose.state.rs
import androidx.wear.compose.remote.material3.RemoteEdgeButton
import androidx.wear.compose.remote.material3.RemoteEdgeButtonSize
import androidx.wear.compose.remote.material3.RemoteText

val tapCount = rememberMutableRemoteInt(0)

RemoteEdgeButton(
    onClick = valueChange(tapCount, tapCount + 1),
    modifier = modifier,
    buttonSize = RemoteEdgeButtonSize.Large,
) {
    RemoteText("Longer multi-line\nShort label".rs)
}
Parameters
onClick: Action

Will be called when the user clicks the button.
modifier: RemoteModifier = RemoteModifier

Modifier to be applied to the button. Size-related modifiers should not be used directly on RemoteEdgeButton to alter content sizing; the button is designed to take the full width of the screen and its height is determined by buttonSize. When animating the button to appear/disappear, a height modifier can change the height of the component, but won't change the space available for the content.
buttonSize: RemoteEdgeButtonSize = RemoteEdgeButtonSize.Small

The size of the button, defaults to RemoteEdgeButtonSize.Small.
enabled: RemoteBoolean = true.rb

Controls the enabled state of the button. When false, this component will not respond to user input.
colors: RemoteButtonColors = RemoteEdgeButtonDefaults.buttonColors()

RemoteButtonColors that will be used to resolve the colors used for this button. See RemoteEdgeButtonDefaults.buttonColors.
border: RemoteDp? = null

The border stroke width for the button.
borderColor: RemoteColor? = null

The color of the border.
shape: RemoteShape = RemoteEdgeButtonDefaults.shape(buttonSize)

Defines the button's shape. Defaults to RemoteEdgeButtonDefaults.shape.
contentPadding: RemotePaddingValues = RemoteEdgeButtonDefaults.ContentPadding

The spacing values to apply internally between the container and the content.
content: @Composable @RemoteComposable RemoteRowScope.() -> Unit

The content displayed inside the button.