Another question :slightly_smiling_face: How can I mimic the Android views’ `clipChildren=false` and...

# compose

[streetsofboston]

Another question 🙂
How can I mimic the Android views’ clipChildren=false and clipToPadding=false?

[Adam Powell]

You don't need to, not clipping is Compose's default behavior.

[Adam Powell]

Is there a particular effect with a specific container you're looking for?

[streetsofboston]

Hmmm…. My UI is clipped. But the Compose is rendered inside a regular View… let me check again if I have layout-xml right….

[Adam Powell]

Can you post your compose code and what you're trying to do? Scrolling containers do clip, for example

[streetsofboston]

Ah… I have a LazyColumnForIndex

[streetsofboston]

class MainActivity : BaseActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val listData = List(20) { "Item ${it + 1}" }
        findViewById<ComposeView>(R.id.compose_view).setContent {
            WearOSPrototypeTheme(themeParameters = createMdcTheme(ContextAmbient.current)) {
                MyListView(listData)
            }
        }
    }
}

@Composable
fun MyListView(names: List<String>) {
    val listState = rememberLazyListState()

    LazyColumnForIndexed(
        items = names,
        state = listState,
        modifier = Modifier
            .fillMaxHeight()
            .fillMaxWidth()
            .drawLayer(clip = false)

    ) { index, item ->

        val itemHeight = 126.0f
        val halfItemHeight = itemHeight / 2f
        val diffIndex = index - listState.firstVisibleItemIndex
        val minScale = 0.75f
        val minAlpha = 0.5f

        val sp = when (diffIndex) {
            0 -> 0f
            1 -> 1 - abs((listState.firstVisibleItemScrollOffset - halfItemHeight) / halfItemHeight)
            2 -> 0f
            else -> 0f
        }

        Surface(
            color = Color.DarkGray,
            modifier = Modifier
                .drawLayer(
                    scaleX = interpolate(minScale, 1.33f, sp),
                    scaleY = interpolate(minScale, 1.33f, sp),
                    alpha = interpolate(minAlpha, 1f, sp),
                    clip = false
                )
        ) {
            ListItem(
                modifier = Modifier
                    .padding(vertical = 4.dp, horizontal = 0.dp)
                    .fillParentMaxWidth()
            ) {

                Text(text = item)

            }
        }
    }
}

[Andrey Kulikov]

which part is clipped?

[streetsofboston]

At least anything outside the ComposeView

[streetsofboston]

Actually: Anything outside the LazyColumnForIndex

[Adam Powell]

ah, so you want there to be some spacing at the end of the LazyColumn content. Take a look at the LazyColumn dsl variant rather than LazyColumnFor, you can specify additional content at the end of your collection and use that to add the space.

[streetsofboston]

I’d like to be able to scale the list-items so that they can be drawn outside of the boundary of the LazyColumnForIndex component. If the scaling is larger than 1, the left edge of the list-item with index=1 will appear outside the boundaries of LazyColumn

[streetsofboston]

But when doing the scaling right now, the children are clipped to the boundaries of the LazyColumnFor…. and I cannot find a way to allow the list-items to be (partially) drawn outside of the LazyColumn.

[Andrey Kulikov]

I think it is clipped not by Composables, but by views. your findViewById<ComposeView>(R.id.compose_view) probably has the same size as LazyColumnForIndex and it is clipping. try to make clipChildren = false on it(and maybe on its parent as well, I don't know what is your layout)

[streetsofboston]

Thank you.
I tried all that, to no avail… even without any ComposeView (or any xml layout), just using the Modifier’s padding methods, the items are clipped as well.