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.

CodePudding user response：

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)
            }
        }
    }
}

CodePudding user response：

The best way to implement your image is this way:

            Column(
                Modifier
                    .fillMaxSize()
                    .padding(8.dp)
            ) {
                Row(
                    Modifier
                        .fillMaxWidth()
                        .weight(1f)
                        .background(Blue),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Example", fontSize = 44.sp)
                }
                Row(
                    Modifier
                        .fillMaxWidth()
                        .weight(1f)
                        .background(Red),
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center,
                ) {
                    Text(text = "Example", fontSize = 44.sp)
                }
            }