https://kotlinlang.org logo
#compose
Title
# compose
s

streetsofboston

10/07/2020, 2:38 PM
Another question 🙂 How can I mimic the Android views’
clipChildren=false
and
clipToPadding=false
?
a

Adam Powell

10/07/2020, 2:41 PM
You don't need to, not clipping is Compose's default behavior.
Is there a particular effect with a specific container you're looking for?
s

streetsofboston

10/07/2020, 2:42 PM
Hmmm…. My UI is clipped. But the Compose is rendered inside a regular View… let me check again if I have layout-xml right….
a

Adam Powell

10/07/2020, 2:43 PM
Can you post your compose code and what you're trying to do? Scrolling containers do clip, for example
s

streetsofboston

10/07/2020, 2:44 PM
Ah… I have a LazyColumnForIndex
Copy code
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)

            }
        }
    }
}
a

Andrey Kulikov

10/07/2020, 2:59 PM
which part is clipped?
s

streetsofboston

10/07/2020, 3:00 PM
At least anything outside the
ComposeView
Actually: Anything outside the
LazyColumnForIndex
a

Adam Powell

10/07/2020, 3:53 PM
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.
s

streetsofboston

10/07/2020, 4:13 PM
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
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.
a

Andrey Kulikov

10/07/2020, 6:50 PM
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)
s

streetsofboston

10/07/2020, 7:45 PM
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.
2 Views