We Are Going To Discuss About How align to bottom a row in Jetpack Compose?. So lets Start this Android Article.
How align to bottom a row in Jetpack Compose?
You can do it in many ways.
You can use a Column with verticalArrangement = Arrangement.SpaceBetween
assigning a weight(1f,false)
to the last row:Column( Modifier.fillMaxHeight(), verticalArrangement = Arrangement.SpaceBetween) { //All elements Column { // RED BOX //... Spacer( modifier = Modifier .fillMaxWidth() .background(Green) .height(15.dp) ) //... Green box } //LAST ROW Row( modifier = Modifier .weight(1f, false) ) { //... } }
You can do it in many ways.
You can use a Column with verticalArrangement = Arrangement.SpaceBetween
assigning a weight(1f,false)
to the last row:Column( Modifier.fillMaxHeight(), verticalArrangement = Arrangement.SpaceBetween) { //All elements Column { // RED BOX //... Spacer( modifier = Modifier .fillMaxWidth() .background(Green) .height(15.dp) ) //... Green box } //LAST ROW Row( modifier = Modifier .weight(1f, false) ) { //... } }
Solution 1
You can do it in many ways.
You can use a Column with verticalArrangement = Arrangement.SpaceBetween
assigning a weight(1f,false)
to the last row:
Column(
Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.SpaceBetween) {
//All elements
Column {
// RED BOX
//...
Spacer(
modifier = Modifier
.fillMaxWidth()
.background(Green)
.height(15.dp)
)
//... Green box
}
//LAST ROW
Row(
modifier = Modifier
.weight(1f, false)
) {
//...
}
}
Original Author Gabriele Mariotti Of This Content
Solution 2
You can use a Spacer(modifier.weight(1f))
between GreenBox and Blue Box to create space between them or you can create your custom column with Layout
function and set y position of last Placeable
as height of Composable
– height of last Composble
Column(modifier = Modifier
.height(200.dp)
.background(Color.LightGray)) {
Text(
"First Text",
modifier = Modifier
.background(Color(0xffF44336)),
color = Color.White
)
Text(
"Second Text",
modifier = Modifier
.background(Color(0xff9C27B0)),
color = Color.White
)
Spacer(modifier = Modifier.weight(1f))
Text(
"Third Text",
modifier = Modifier
.background(Color(0xff2196F3)),
color = Color.White
)
}
Result:
Custom Layout
@Composable
private fun CustomColumn(
modifier: Modifier,
content: @Composable () -> Unit
) {
Layout(
modifier = modifier,
content = content
) { measurables, constraints ->
val looseConstraints = constraints.copy(
minWidth = 0,
maxWidth = constraints.maxWidth,
minHeight = 0,
maxHeight = constraints.maxHeight
)
// Don't constrain child views further, measure them with given constraints
// List of measured children
val placeables = measurables.map { measurable ->
// Measure each child
measurable.measure(looseConstraints)
}
// Track the y co-ord we have placed children up to
var yPosition = 0
// Set the size of the layout as big as it can
layout(constraints.maxWidth, constraints.maxHeight) {
// Place children in the parent layout
placeables.forEachIndexed { index, placeable ->
println("Placeable width: ${placeable.width}, measuredWidth: ${placeable.measuredWidth}")
// Position item on the screen
if (index == placeables.size - 1) {
placeable.placeRelative(x = 0, y = constraints.maxHeight - placeable.height)
} else {
placeable.placeRelative(x = 0, y = yPosition)
}
// Record the y co-ord placed up to
yPosition += placeable.height
}
}
}
}
Usage
CustomColumn(
modifier = Modifier
.height(200.dp)
.background(Color.LightGray)
) {
Text(
"First Text",
modifier = Modifier
.background(Color(0xffF44336)),
color = Color.White
)
Text(
"Second Text",
modifier = Modifier
.background(Color(0xff9C27B0)),
color = Color.White
)
Spacer(modifier = Modifier.weight(1f))
Text(
"Third Text",
modifier = Modifier
.background(Color(0xff2196F3)),
color = Color.White
)
}
In this example with Layout you should consider how you measure your measureables with Constraints and your total width and height. It requires a little bit practice but you get more unique designs and with less work(more optimised) composables than ready ones. Here i set layout as maxWidth so no matter which width you assign it takes whole width. It’s for demonstration you can set max width or height in layout
based on your needs.
Original Author Thracian Of This Content
Conclusion
So This is all About This Tutorial. Hope This Tutorial Helped You. Thank You.