I want one component to overlap another 32.dp and the overlapping component to fill the entire available height.
I tried to make that effect using offset modifier, but the problem i have is that the overlapping component doesn't fill the height.
Column(Modifier.fillMaxSize()){
Box(Modifier.fillMaxWidth().fillMaxHeight(0.3f).background(Color.Red))
Box(
Modifier.offset(y = (-32).dp).fillMaxSize()
.clip(RoundedCornerShape(topStart = 32.dp, topEnd = 32.dp))
.background(Color.Green)
)
}
This is the result i have obtained from the code above. I want the green box take all the height and there is no white.
Comparation between the result obtained and the desired one
You can use enableEdgeToEdge to draw below system bars. Since you call offset -32.dp you can use Modifier.layout to increase height of Green Box 32.dp bigger than parent. But since you don't abide parent Constraints, it will center green one. And for that you can add another y down 16.dp
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
MyTheme {
CoverScreenLayout()
}
}
}
}
@Preview
@Composable
fun CoverScreenLayout() {
Column(Modifier.fillMaxSize()) {
Box(
Modifier.fillMaxWidth()
.fillMaxHeight(0.3f)
.background(Color.Red)
)
Box(
Modifier
.offset(y = (-32).dp)
.fillMaxSize()
.layout { measurable, constraints ->
val wrappedConstraints = Constraints.fixed(
width = constraints.maxWidth,
height = constraints.maxHeight + 32.dp.roundToPx()
)
val placeable = measurable.measure(wrappedConstraints)
layout(placeable.width, placeable.height) {
placeable.placeRelative(0, 16.dp.roundToPx())
}
}
.clip(RoundedCornerShape(topStart = 32.dp, topEnd = 32.dp))
.background(Color.Green)
)
}
}