ListHeader

Component in Wear Material 3 Compose

A slot based composable for creating a list header item. [ListHeader]s are typically expected to be a few words of text on a single line. The contents will be start and end padded.

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

Last updated: 2025-02-05 12:19

Installation

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

Overloads

@Composable
fun ListHeader(
    modifier: Modifier = Modifier,
    backgroundColor: Color = Color.Transparent,
    contentColor: Color = ListHeaderDefaults.contentColor,
    contentPadding: PaddingValues = ListHeaderDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
)

Parameters

name	description
modifier	The modifier for the [ListHeader].
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 container and the content.
content	Slot for [ListHeader] content, expected to be a single line of text.

Code Example

ListHeaderSample

@Composable
fun ListHeaderSample() {
    val scrollState = rememberScalingLazyListState()
    val horizontalPadding = LocalConfiguration.current.screenWidthDp.dp * 0.052f

    ScreenScaffold(scrollState = scrollState) {
        ScalingLazyColumn(
            state = scrollState,
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            contentPadding = PaddingValues(horizontal = horizontalPadding)
        ) {
            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") } }
        }
    }
}