How do I constrain the center horizontal axis of this Textfield so it sits at the bottom of the grey...

# compose

[voben]

How do I constrain the center horizontal axis of this Textfield so it sits at the bottom of the grey image and moves with height of the image? Currently I have all the views in a Box and I’m adding padding for the TextField to align with the image. But if the image is shorter for example, I want the TextView to move up with it

[Chris Sinco [G]]

ConstraintLayout for Compose would be the best thing here I think

[voben]

thanks

[Tobias Suchalla]

You can also achieve this with an offset modifier:

fun main() = singleWindowApplication {
    MaterialTheme {
        Box(Modifier.fillMaxSize().background(Color.LightGray)) {
            Box(Modifier.fillMaxWidth().fillMaxHeight(0.5f)) {
                Spacer(Modifier.fillMaxSize().background(Color.Gray))
                OutlinedTextField(
                    value = "Search",
                    onValueChange = {},
                    modifier = Modifier
                        .padding(horizontal = 16.dp)
                        .fillMaxWidth()
                        .align(Alignment.BottomCenter)
                        .offset(y = TextFieldDefaults.MinHeight / 2),
                    colors = TextFieldDefaults.outlinedTextFieldColors(backgroundColor = Color.White),
                    shape = RoundedCornerShape(percent = 50),
                    singleLine = true
                )
            }
        }
    }
}

[Tobias Suchalla]

[Chris Sinco [G]]

True that works! Though I personally find the ConstraintLayout approach easier to read from a code intention POV

[voben]

I ended up implementing the contraint layout approach. Although the other one works too. thanks all