Provide different alignments to composables within 'Column'

user_9260623 0
Viewed 47

I have a 'Text' and another composable within a Column. I want to put the Text to the top and the layout defined by the composable to the bottom. I am not able to find a way to provide different alignments to the 'elements' within Column, as the alignment/arrangement specified in the 'Modifier' of Column works for all the 'elements' within it. My current code aligns both to the bottom. This is my code:

@Composable
fun SignUpDetails(navController: NavController) {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Bottom,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(
            text = "First Screen\n" +
                    "Click me to go to Second Screen",
            color = Color.Green,
            style = TextStyle(textAlign = TextAlign.Center),
            modifier = Modifier
                .padding(24.dp)
                .clickable(onClick = {
                    // this will navigate to second screen
                    navController.navigate("second_screen")
                })
        )
        ProgressBar1UI()
    }
}

How do I achieve my requirement?

android-jetpack-compose vertical-alignment android
2 Answers

You can use the verticalArrangement = Arrangement.SpaceBetween:

Place children such that they are spaced evenly across the main axis, without free space before the first child or after the last child

Something like:

Column(
    modifier = Modifier.fillMaxSize(),
    horizontalAlignment = Alignment.CenterHorizontally,
    verticalArrangement = Arrangement.SpaceBetween
) {

        Text( /*...*/ )
        ProgressBar1UI()
}

enter image description here

Otherwise you can use something different like a Box and the Modifier.align:

Box(modifier = Modifier.fillMaxSize()) {
    Text(
         modifier = Modifier
            .align(Alignment.TopCenter)
    )

    ProgressBar1UI(Modifier.align(Alignment.BottomCenter))

}
user_20165620

The other way you can achieve such behavior (one view top second view bottom) is to add the Spacer component with a weight modifier between items.

@Composable
fun Example() {
    Column {
        Text("FirstText")

        Spacer(modifier = Modifier.weight(1f))

        Text("SecondText")
    }
}

Example

user_87425330
Related