Surface

Composable Component

The Surface is a building block component that will be used for any element on TV such as buttons, cards, navigation, or a simple background etc. This non-interactive Surface is similar to Compose Material's Surface composable

Android

@Composable
fun Surface(
    modifier: Modifier = Modifier,
    tonalElevation: Dp = 0.dp,
    shape: Shape = SurfaceDefaults.shape,
    colors: SurfaceColors = SurfaceDefaults.colors(),
    border: Border = SurfaceDefaults.border,
    glow: Glow = SurfaceDefaults.glow,
    content: @Composable (BoxScope.() -> Unit)
)

Parameters


modifier	Modifier to be applied to the layout corresponding to the surface
tonalElevation	When `color` is `ColorScheme.surface`, a higher the elevation will result in a darker color in light theme and lighter color in dark theme.
shape	Defines the surface's shape.
colors	Defines the background & content color to be used in this Surface. See `SurfaceDefaults.colors`.
border	Defines a border around the Surface.
glow	Diffused shadow to be shown behind the Surface. Note that glow is disabled for API levels below 28 as it is not supported by the underlying OS
content	defines the `Composable` content inside the surface

Android

@Composable
fun Surface(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    tonalElevation: Dp = 0.dp,
    shape: ClickableSurfaceShape = ClickableSurfaceDefaults.shape(),
    colors: ClickableSurfaceColors = ClickableSurfaceDefaults.colors(),
    scale: ClickableSurfaceScale = ClickableSurfaceDefaults.scale(),
    border: ClickableSurfaceBorder = ClickableSurfaceDefaults.border(),
    glow: ClickableSurfaceGlow = ClickableSurfaceDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable (BoxScope.() -> Unit)
)

Parameters


onClick	callback to be called when the surface is clicked. Note: DPad Enter button won't work if this value is null
modifier	Modifier to be applied to the layout corresponding to the surface
onLongClick	callback to be called when the surface is long clicked (long-pressed).
enabled	Controls the enabled state of the surface. When `false`, this Surface will not be clickable. A disabled surface will still be focusable (reason: https://issuetracker.google.com/302955429). If you still want it to not be focusable, consider using the Non-interactive variant of the Surface.
tonalElevation	When `color` is `ColorScheme.surface`, a higher the elevation will result in a darker color in light theme and lighter color in dark theme.
shape	Defines the surface's shape.
colors	Defines the background & content colors to be used in this surface for different interaction states. See `ClickableSurfaceDefaults.colors`.
scale	Defines size of the Surface relative to its original size.
border	Defines a border around the Surface.
glow	Diffused shadow to be shown behind the Surface. Note that glow is disabled for API levels below 28 as it is not supported by the underlying OS
interactionSource	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this surface. You can use this to change the surface's appearance or preview the surface in different states. Note that if `null` is provided, interactions will still happen internally.
content	defines the `Composable` content inside the surface

Android

@Composable
fun Surface(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    tonalElevation: Dp = Elevation.Level0,
    shape: SelectableSurfaceShape = SelectableSurfaceDefaults.shape(),
    colors: SelectableSurfaceColors = SelectableSurfaceDefaults.colors(),
    scale: SelectableSurfaceScale = SelectableSurfaceDefaults.scale(),
    border: SelectableSurfaceBorder = SelectableSurfaceDefaults.border(),
    glow: SelectableSurfaceGlow = SelectableSurfaceDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable (BoxScope.() -> Unit)
)

Parameters


selected	whether or not this Surface is selected
onClick	callback to be invoked when the selectable Surface is clicked.
modifier	`Modifier` to be applied to the layout corresponding to the surface
onLongClick	callback to be called when the selectable surface is long clicked (long-pressed).
enabled	Controls the enabled state of the surface. When `false`, this Surface will not be clickable. A disabled surface will still be focusable (reason: https://issuetracker.google.com/302955429). If you still want it to not be focusable, consider using the Non-interactive variant of the Surface.
tonalElevation	When `color` is `ColorScheme.surface`, a higher the elevation will result in a darker color in light theme and lighter color in dark theme.
shape	Defines the surface's shape.
colors	Defines the background & content colors to be used in this surface for different interaction states. See `SelectableSurfaceDefaults.colors`.
scale	Defines size of the Surface relative to its original size.
border	Defines a border around the Surface.
glow	Diffused shadow to be shown behind the Surface. Note that glow is disabled for API levels below 28 as it is not supported by the underlying OS
interactionSource	an optional hoisted `MutableInteractionSource` for observing and emitting `Interaction`s for this surface. You can use this to change the surface's appearance or preview the surface in different states. Note that if `null` is provided, interactions will still happen internally.
content	defines the `Composable` content inside the surface

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled