Hello guys, I been trying on compose to have a list view and if an item is selected then I need to...

# compose

[Bagadeshkumar R]

Hello guys,

I been trying on compose to have a list view and if an item is selected then I need to make the selected item to move slightly to the right thereby making item drawing outside the lazy Column.

How to achieve this? Any idea is welcome.

Thanks in advance.

[Steffen Funke]

Something like this?

LazyColumn(
            modifier = Modifier.fillMaxWidth()
        ) {
            var selected by mutableStateOf("")
            items(myItems) { item ->
                val isSelected = item == selected
                ListItem(
                    modifier = Modifier
                        .clickable { selected = item }
                        .offset(x = if (isSelected) 20.dp else 0.dp)
                ) {
                    Text(item)
                }
            }
        }

[Steffen Funke]

Basically comes down to storing the selected item somewhere (preferredly in ViewModel) - and then apply an offset-Modifier to the item, based on wether it is the selected item_._

The offset is not animated here, but that could be added via animateDpAsState, or the likes.

[Bagadeshkumar R]

The idea was to have like the following image.

What you have mentioned will work in the this case since it needs to be drawn outside the Column. @Steffen Funke

[Steffen Funke]

Hm I am not sure if there is a way to change clipping with a LazyColumn , maybe some of the Compose experts can chime in.

If not, then fake-overlaying the selected item over the list would probably be an option.
Other than that, you would need to make sure what happens if the cell is only half in view (scroll into viewport?).

[Bagadeshkumar R]

Yeah that fake overlaying is an option but it seems bit of hack than a solution that's why never looked it up.

Anyway I'll check if any other solutions comes up.

[Adib Faramarzi]

I’m interested in this as well. Basically we need an equivalent of clipChildren = false of some sort.

[Bagadeshkumar R]

Extactly I'm been searching for this in compose docs but couldn't find anything @Adib Faramarzi

[Adam Powell]

If you turned off child clipping on a LazyColumn you'd also be turning off clipping for its scrolling edges. You're going to be looking at smoke and mirrors of some form to accomplish what's in the mockup above

[Adam Powell]

You might also consider making the actual LazyColumn wider than its visual container

[Bagadeshkumar R]

Hey, just wanted to update I'm able to achieve to exact design by using fake setup as in having a box and lazy column in a box.

[Steffen Funke]

Sometimes, you have to fake it 🙂