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

Artifact: androidx.wear.compose.remote:remote-material3

View Source

@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 to anchor to the bottom edge of a round screen.

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.
`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.