WideButton

Component in Tv Material Compose

Material Design wide button for TV.

Last updated: 2024-10-22 13:47

Installation

dependencies {
   implementation("androidx.tv:tv-material:1.0.0")
}

Overloads

@NonRestartableComposable
@Composable
fun WideButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    background: @Composable () -> Unit = {
        WideButtonDefaults.Background(
            enabled = enabled,
            interactionSource = interactionSource,
        )
    },
    scale: ButtonScale = WideButtonDefaults.scale(),
    glow: ButtonGlow = WideButtonDefaults.glow(),
    shape: ButtonShape = WideButtonDefaults.shape(),
    contentColor: WideButtonContentColor = WideButtonDefaults.contentColor(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = WideButtonDefaults.border(),
    contentPadding: PaddingValues = WideButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

Parameters

name	description
onClick	called when this button is clicked
modifier	the [Modifier] to be applied to this button
onLongClick	called when this button is long clicked (long-pressed).
enabled	controls the enabled state of this button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
interactionSource	a 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.
background	the background to be applied to the [WideButton]
scale	Defines size of the Button relative to its original size.
glow	Shadow to be shown behind the Button.
shape	Defines the Button's shape.
contentColor	Color to be used for the text content of the Button
tonalElevation	tonal elevation used to apply a color shift to the button to give the it higher emphasis
border	Defines a border around the Button.
contentPadding	the spacing values to apply internally between the container and the content
content	the content of the button

@NonRestartableComposable
@Composable
fun WideButton(
    onClick: () -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    icon: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    background: @Composable () -> Unit = {
        WideButtonDefaults.Background(enabled = enabled, interactionSource = interactionSource)
    },
    scale: ButtonScale = WideButtonDefaults.scale(),
    glow: ButtonGlow = WideButtonDefaults.glow(),
    shape: ButtonShape = WideButtonDefaults.shape(),
    contentColor: WideButtonContentColor = WideButtonDefaults.contentColor(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = WideButtonDefaults.border(),
    contentPadding: PaddingValues = WideButtonDefaults.ContentPadding,
)

Parameters

name	description
onClick	called when this button is clicked
title	the title content of the button, typically a [Text]
modifier	the [Modifier] to be applied to this button
onLongClick	called when this button is long clicked (long-pressed).
enabled	controls the enabled state of this button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
icon	the leading icon content of the button, typically an [Icon]
subtitle	the subtitle content of the button, typically a [Text]
interactionSource	a 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.
background	the background to be applied to the [WideButton]
scale	Defines size of the Button relative to its original size.
glow	Shadow to be shown behind the Button.
shape	Defines the Button's shape.
contentColor	Color to be used for the text content of the Button
tonalElevation	tonal elevation used to apply a color shift to the button to give the it higher emphasis
border	Defines a border around the Button.
contentPadding	the spacing values to apply internally between the container and the content

Code Examples

WideButtonSample

@Composable
fun WideButtonSample() {
    WideButton(onClick = {}) { Text("Settings") }
}

WideButtonWithIcon

@Composable
fun WideButtonWithIcon() {
    WideButton(
        onClick = {},
        title = { Text("Settings") },
        icon = { Icon(imageVector = Icons.Default.Settings, contentDescription = "Settings") }
    )
}

WideButtonWithSubtitle

@Composable
fun WideButtonWithSubtitle() {
    WideButton(
        onClick = {},
        title = { Text("Settings") },
        subtitle = { Text(text = "Update device preferences") },
    )
}

WideButtonWithIconAndSubtitle

@Composable
fun WideButtonWithIconAndSubtitle() {
    WideButton(
        onClick = {},
        title = { Text("Settings") },
        subtitle = { Text(text = "Update device preferences") },
        icon = { Icon(imageVector = Icons.Default.Settings, contentDescription = "Settings") }
    )
}