How to place in the corner (bottom end) of column

Question

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

For this purpose, you must use Box – Vahid Garousi Nov 20 '22 at 06:10 — Vahid Garousi, Nov 20 '22 at 06:10

score 3 · Answer 1 · answered Nov 20 '22 at 06:39

For a better understanding of Box, see the example below

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

Gabriele Mariotti · Answer 2 · 2022-11-20T08:56:54.477

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

}

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
)

How to place in the corner (bottom end) of column

2 Answers2