https://kotlinlang.org logo
v

voben

11/18/2021, 12:19 AM
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

Chris Sinco [G]

11/18/2021, 12:28 AM
ConstraintLayout for Compose would be the best thing here I think
v

voben

11/18/2021, 2:58 AM
thanks
t

Tobias Suchalla

11/18/2021, 7:39 AM
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

Chris Sinco [G]

11/18/2021, 8:22 PM
True that works! Though I personally find the ConstraintLayout approach easier to read from a code intention POV
v

voben

11/18/2021, 8:57 PM
I ended up implementing the contraint layout approach. Although the other one works too. thanks all
3 Views