A modern programming language that makes developers happier.

kotlinlang

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.

Something like this?
```LazyColumn(
            modifier = Modifier.fillMaxWidth()
        ) {
            var selected by mutableStateOf("")
            items(myItems) { item -&gt;
                val isSelected = item == selected
                ListItem(
                    modifier = Modifier
                        .clickable { selected = item }
                        .offset(x = if (isSelected) 20.dp else 0.dp)
                ) {
                    Text(item)
                }
            }
        }```

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.

Screenshot 2021-11-03 at 1.15.08 PM.png

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. <@U12T7BJ4B>

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?).

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.

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

Extactly I'm been searching for this in compose docs but couldn't find anything <@U024EKNP8P3>

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

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

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.

Sometimes, you have to fake it :slightly_smiling_face: