How to Split screen height in half in Jetpack Compose?

Question

I want to split my screen in half horizontally in Jetpack Compose like this:

    @Composable
fun Splash(alpha: Float) {
    val configuration = LocalConfiguration.current
    val screenHeight = configuration.screenHeightDp.dp
    val screenWidth = configuration.screenWidthDp.dp
    val composition by rememberLottieComposition(LottieCompositionSpec.RawRes(R.raw.cat2))
    Box(
        modifier = Modifier
            .background(Blue)
            .height(screenHeight /  2)
            .padding(8.dp),
        contentAlignment = Alignment.TopCenter
    ) {
        Column() {
            Text(text = "Example", fontSize = 44.sp)
        }
    }
    Box(
        modifier = Modifier
            .background(Red)
            .height(screenHeight /  2)
            .padding(8.dp),
        contentAlignment = Alignment.BottomCenter
    ){
        Column {
           
            Text(text = "Example", textAlign = TextAlign.End, color = Grey, fontSize = 12.sp)
        }
    }
}

I can get screen height with LocalConfiguration.current in dp and I set my top box and bottom box alignments as Alignment.TopCenter and Alignment.BottomCenter respectively but it didn't work. Second box(Red one) stays on top of the blue one.

Answer 1

The simplest way to set a height equal to the half-screen height is with a fractional in the modifier.

Column(
    modifier = Modifier
        .padding(10.dp)
        .fillMaxHeight(0.5f)
        ){ //Content}

Answer 2

You can wrap your Boxes with a Column and set Modifier.weight(1f) for each box to set both of them at same height with

@Composable
fun Splash() {

    Column(modifier =Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Blue)
                .weight(1f)
                .padding(8.dp),
            contentAlignment = Alignment.TopCenter
        ) {
            Column() {
                Text(text = "Example", fontSize = 44.sp)
            }
        }
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Red)
                .weight(1f)
                .padding(8.dp),
            contentAlignment = Alignment.Center
        ){
            Column {

                Text(text = "Example", textAlign = TextAlign.End, color = DarkGray, fontSize = 12.sp)
            }
        }
    }
}

or wrap with a BoxWithConstraints which returns Contraints, maxWidth, maxHeight and use Modifier.align to one Box to top and other one to Bottom. BoxWithConstraints is useful for getting measurement parameters and set them as children Modifiers.

@Composable
fun Splash2() {
    BoxWithConstraints(modifier = Modifier.fillMaxSize()) {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Blue)
                .height(maxHeight/2)
                .align(Alignment.TopStart)
                .padding(8.dp),
            contentAlignment = Alignment.TopCenter
        ) {
            Column() {
                Text(text = "Example", fontSize = 44.sp)
            }
        }
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .background(Red)
                .align(Alignment.BottomStart)
                .height(maxHeight/2)
                .padding(8.dp),
            contentAlignment = Alignment.Center
        ){
            Column {

                Text(text = "Example", textAlign = TextAlign.End, color = DarkGray, fontSize = 12.sp)
            }
        }
    }
}