Jetpack Compose still shows shape around whole clipped composable

PressRex profile image
by PressRex
Jetpack Compose still shows shape around whole clipped composable

The following code displays:

But I expect to get (basically half of view - 200.dp of 400.dp):

Basically I need to achieve something similar to AppleWallet app where items are not fully displayed and you can see their shapes only at the top because bottom of each item is not fully visible:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CutComposableWithShapeTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    ScreenContent(Modifier.padding(innerPadding))
                }
            }
        }
    }
}

@Composable
fun ScreenContent(modifier: Modifier = Modifier) {
    Column(
        modifier
            .fillMaxSize()
            .padding(12.dp)
    ) {
        Box(
            modifier = Modifier
                .height(200.dp)
        ) { // show only half of composable (200.dp of 400.dp), for the whole view
            // it should not show rounded bottom...
            ItemWithShape()
        }
    }
}

@Composable
fun ItemWithShape() {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(400.dp)
            .background(Color.Red, shape = RoundedCornerShape(16.dp))
    ) {

    }
}

@Preview(showBackground = true)
@Composable
fun ScreenPreview() {
    CutComposableWithShapeTheme {
        ScreenContent()
    }
}

p.s. it's not going to be just rounded shape, please don't suggest partial: boolean param and RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp), I need real clip, which should not know anything about shape of each item, it should just cut it.

Source: View source

PressRex profile image
by PressRex

Subscribe to New Posts

Lorem ultrices malesuada sapien amet pulvinar quis. Feugiat etiam ullamcorper pharetra vitae nibh enim vel.

Success! Now Check Your Email

To complete Subscribe, click the confirmation link in your inbox. If it doesn’t arrive within 3 minutes, check your spam folder.

Ok, Thanks

Read More