ListSubHeader

Component in Wear Material 3 Compose

A two slot based composable for creating a list sub-header item. [ListSubHeader]s offer slots for an icon and for a text label. The contents will be start and end padded.

ListSubHeader scales itself appropriately when used within the scope of a [TransformingLazyColumn].

Last updated: 2025-03-21 11:59

Installation

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

Overloads

@Composable
fun ListSubHeader(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = ListHeaderDefaults.subHeaderContentColor,
    contentPadding: PaddingValues = ListHeaderDefaults.SubHeaderContentPadding,
    transformation: SurfaceTransformation? = null,
    icon: (@Composable BoxScope.() -> Unit)? = null,
    label: @Composable RowScope.() -> Unit,
)

Parameters

name	description
modifier	The modifier for the [ListSubHeader].
backgroundColor	The background color to apply - typically Color.Transparent
contentColor	The color to apply to content.
contentPadding	The spacing values to apply internally between the background and the content.
transformation	Transformer to be used when header appears inside the container that needs to dynamically change its content separately from the background.
icon	A slot for providing icon to the [ListSubHeader].
label	A slot for providing label to the [ListSubHeader].

Code Example

ListHeaderSample

@Preview
@Composable
fun ListHeaderSample() {
    val scrollState = rememberScalingLazyListState()

    ScreenScaffold(scrollState = scrollState, modifier = Modifier.background(Color.Black)) {
        contentPadding ->
        ScalingLazyColumn(
            state = scrollState,
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            contentPadding = contentPadding
        ) {
            item { ListHeader { Text("Settings") } }
            item {
                ListSubHeader(
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_connectivity),
                            contentDescription = "Connectivity",
                        )
                    },
                    label = { Text("Connectivity") }
                )
            }
            item {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = {},
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_bluetooth),
                            contentDescription = "Bluetooth",
                            modifier = Modifier.size(ButtonDefaults.IconSize)
                        )
                    },
                ) {
                    Text("Bluetooth")
                }
            }
            item {
                Button(
                    modifier = Modifier.fillMaxWidth(),
                    onClick = {},
                    icon = {
                        Icon(
                            painter = painterResource(R.drawable.ic_wifi),
                            contentDescription = "Wifi",
                            modifier = Modifier.size(ButtonDefaults.IconSize)
                        )
                    },
                ) {
                    Text("Wifi")
                }
            }
            item { ListSubHeader { Text("Display") } }
            item {
                Button(modifier = Modifier.fillMaxWidth(), onClick = {}) {
                    Text("Change Watchface")
                }
            }
            item { Button(modifier = Modifier.fillMaxWidth(), onClick = {}) { Text("Brightness") } }
        }
    }
}