hi! does anyone know how to center vertically the Icon or trailing elements in a ListItem? ...

# compose

[Pablo Reyes]

hi! does anyone know how to center vertically the Icon or trailing elements in a ListItem? ...

[John Nichol]

I think you want something like`Row(`
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxSize()
) { ... }

[Pablo Reyes]

thanks! but that doesn't work.. I'm using

ListItem(
        Modifier.clickable(onClick = onClick),
        icon = {
         .... // Here are the elements I want to center
        }
}

If I use a Column/Row inside the Icon it does nothing 😕.

[John Nichol]

I do this kind of alignment in Compose for Wear Chip - take a look here https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:wear/com[…]al/Chip.kt;l=226;drc=62bb9be60b438aac3cb88663c2239cf67a46eb2f

[John Nichol]

you will find icon left and vertically center aligned

[John Nichol]

we use these in LazyColumn/ScalingLazyColumn all the time

[Pablo Reyes]

great, let me take a look

[Chris Sinco [G]]

The ListItem component is an experimental Material component so it definitely has some quirks and probably bugs. One thing to note though is that it's designed to be very close to the Material spec of list item templates (see the demo on this guideline page), so deviating from that may cause unforeseen issues, e.g. putting text in the Icon slot.

[Chris Sinco [G]]

I would suggest actually rolling your own ListItem since it seems you need to customize the content in the slots more than the design spec accommodates for. In looking at the implementation of ListItem, there's not a lot going on in there besides highly templated layout decisions, so I think you could achieve the same thing pretty quickly.