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