I'm building this screeen from the Android Jetpack Compose lessons, and I want to somewhat-center-vertically the middle / 'Full Name' red box -- but I don't want it fully centered (i.e. 50% down the page), I want it 40% down the page, but the built-in 'contentAlignment' modifiers only cover 'Top', 'Center', and 'Bottom' -- I want something in between.
This is my current code, and it looks fine-ish, but I want to know how to manipulate the vertical alignment of the contents of the Box more fine-grained.
@Composable
fun Profile(){
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxSize(),
contentAlignment = Alignment.Center
,
) {
Column() {
// icon
Text("aslkjdf",
fontSize = 48.sp)
// Full Name
Text("aslkjdf",
fontSize = 48.sp)
// Title
Text("aslkjdf",
fontSize = 48.sp)
}
}
}
You can use the BiasAlignment
.
A bias of -1
represents alignment to the start/top, a bias of 0
will represent centering, and a bias of 1
will represent end/bottom.
Just note that the Alignment.Center
is defined as:
val Center: Alignment = BiasAlignment(0f, 0f)
You can use something like:
Box(
modifier = Modifier
.padding(16.dp)
.fillMaxSize(),
contentAlignment = BiasAlignment(
horizontalBias = 0f,
verticalBias = -0.2f
)
) {
Column(
modifier = Modifier.fillMaxWidth().border(1.dp,Red),
horizontalAlignment = Alignment.CenterHorizontally
){
// icon
Icon(Icons.Default.Email,"", modifier = Modifier.size(64.dp))
// Full Name
Text("FullName",
fontSize = 36.sp)
// Title
Text("Title",
fontSize = 24.sp)
}
}
Inside the -1, 1
range, the obtained alignment will position the aligned size fully inside the available space, using as center
val y = centerY * (1 + verticalBias)