How to Split screen height in half in Jetpack Compose?

user_6683139 0
Viewed 1719

I want to split my screen in half horizontally in Jetpack Compose like this: enter image description here

    @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.

android-jetpack-compose android
2 Answers

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

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