Home > Back-end >  How to place in the corner (bottom end) of column
How to place in the corner (bottom end) of column

Time:11-20

How can I put a widget/compose in bottom end corner of Column?

Column(
 verticalArrangement = ,
 horizontalAlignment = 
) { // omitted codes }

I only find horizontal and vertical position to it? IS there a way to put a widget/compose in bottom end?

I can’t find a parameter in column to place widget/compose in bottom end corner

CodePudding user response:

If you want to use a Column to put a Composable in the bottom end corner you have to use:

Column(
    modifier=Modifier.fillMaxSize(),
    verticalArrangement = Arrangement.Bottom,
    horizontalAlignment = Alignment.End
) { 

    Button(onClick = {}){
        Text("Button")
    }

}

enter image description here

In general the attributes verticalArrangement and horizontalAlignment specify the vertical arrangement and the horizontal alignment of the layout's children according to the space occupied by the Column.

With:

Column(
    modifier=Modifier.fillMaxWidth().height(80.dp).background(Yellow),
    verticalArrangement = Arrangement.Bottom,
    horizontalAlignment = Alignment.End
)

enter image description here

CodePudding user response:

For a better understanding of Box, see the example below

enter image description here

@Composable
fun BoxExample2() {
    Box(
        modifier = Modifier
            .background(color = Color.LightGray)
            .fillMaxSize()
    ) {
 
        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Yellow)
                .padding(10.dp)
                .align(Alignment.TopStart),
            text = "TopStart"
        )
        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Yellow)
                .padding(10.dp)
                .align(Alignment.TopCenter),
            text = "TopCenter"
        )
        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Yellow)
                .padding(10.dp)
                .align(Alignment.TopEnd),
            text = "TopEnd"
        )
 
        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Yellow)
                .padding(10.dp)
                .align(Alignment.CenterStart),
            text = "CenterStart"
        )
 
        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Yellow)
                .padding(10.dp)
                .align(Alignment.Center),
            text = "Center"
        )
        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Yellow)
                .padding(10.dp)
                .align(Alignment.CenterEnd),
            text = "CenterEnd"
        )
 
        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Yellow)
                .padding(10.dp)
                .align(Alignment.BottomStart),
            text = "BottomStart"
        )
        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Yellow)
                .padding(10.dp)
                .align(Alignment.BottomCenter),
            text = "BottomCenter"
        )
        Text(
            style = MaterialTheme.typography.h6,
            modifier = Modifier
                .background(Color.Yellow)
                .padding(10.dp)
                .align(Alignment.BottomEnd),
            text = "BottomEnd"
        )
    }
}
  • Related