androidandroid-jetpack-composeandroid-jetpackandroid-jetpack-compose-layout

How to set Box(contentAlignment=CenterVertically40%DownThePage)? Need advanced alignment option for Box


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.

enter image description here

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


Solution

  • 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)
    

    enter image description here