Question 126164 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Jetpack Compose Column Composable Alignment

I’m creating a layout with Jetpack Compose and there is a column. I would like center one composable and the other to align to the bottom.
Here is an image of my target screen
here

I spent day working it out, SpaceAround and SpaceBetween didn’t help.
I would appreciate any help.

Tags:

2

Answers


  1. 0

    You can use a custom layout or something like:

    Column(Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.SpaceBetween) {

    Spacer(modifier = Modifier.fillMaxWidth().height(0.dp))

    Box(
        Modifier
            .fillMaxWidth()
            .height(60.dp)
            .background(Red)
    )

    Row(
        modifier = Modifier.fillMaxWidth().height(30.dp).background(Blue)
    ) {
        //...
    }
}

    enter image description here

    Login or Signup to reply.
  2. 0

    Use a Column with weight(1f) and verticalArrangement = Arrangement.Center to wrap the first item. Here’s the code

    @Composable
fun Demo() {
    Column(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .background(color = Color.Transparent),
            verticalArrangement = Arrangement.Center,
        ) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(100.dp)
                    .padding(15.dp)
                    .background(color = Color.Green)
            )
        }


        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(60.dp)
                .background(color = Color.Yellow)
        )
    }
}

@Composable
@Preview
fun DemoPreview() {
    Demo()
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search