How do I constrain the center horizontal axis of t...
# compose
v
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
c
ConstraintLayout for Compose would be the best thing here I think
v
thanks
t
You can also achieve this with an offset modifier:
Copy code
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
                )
            }
        }
    }
}
👍 1
😮 1
c
True that works! Though I personally find the ConstraintLayout approach easier to read from a code intention POV
v
I ended up implementing the contraint layout approach. Although the other one works too. thanks all