CODEWITHSUNDEEP
androidkotlinandroid-jetpack-composelistitemandroid-jetpack-compose-material3
JJD
JJD

Reputation: 51882

How to customize the alignment of leadingContent and trailingContent of androidx.compose.material3.ListItem?

Given the following androidx.compose.material3.ListItem code snippet ...

ListItem(
    leadingContent = {
        LeadingIcon()
    },
    trailingContent = {
        TrailingIcon()
    },
    overlineText = {
        Text(
            text = item.text,
        )
    },
    headlineText = {
        Text(
            text = item.title,
            overflow = Ellipsis,
            maxLines = 1,
        )
    },
    supportingText = {
        if (item.subtitle.isNotEmpty()) {
            Text(
                text = item.subtitle,
                overflow = Ellipsis,
                maxLines = 1,
            )
        }
    }
)

Is there a way to vertically center the leading and trailing content/icons?
It would also be desired that the item shrinks its height if no subtitle is given. The icons should then still be centered.

Related

Upvotes: 1

Views: 669

Answers (1)

Viktor Skliarov
Viktor Skliarov

Reputation: 1917

I don't think this looks the best, but you could try setting two fixed heights for the content with item.subtitle and without item.subtitle, and wrap the Icon in a Column and set the alignment to center:

ListItem(
    modifier = Modifier.height(
        if (item.subtitle.isNotEmpty()) 84.dp else 64.dp
    ),
    leadingContent = {
        Column(
            modifier = Modifier.fillMaxHeight(),
            verticalArrangement = Arrangement.Center
        ) {
            LeadingIcon()
        }
    },
    trailingContent = {
        Column(
            modifier = Modifier.fillMaxHeight(),
            verticalArrangement = Arrangement.Center
        ) {
            TrailingIcon()
        }
    },
    ...
)

Upvotes: 0

Related Questions