I want to make that TextField the same height as the Icon in the left… this is what I have in my code right now, is there an easy way to do that? like an out of the box solution? I can’t find much examples or documentation on this

Did you tried to set the same preferredHeight for both?

nope, going to try it 😄 thanks

Keep in mind that the order of modifiers matter. So i think you need to apply the preferredHeight first.

oh ok

The TextField is a material component which do have a minim height. I think you can not be smaller. But maybe you can increase the height of your icon box.

nope, it doesn’t affect the TextField but it does affect the Icon

you might find the intrinsic measurement apis shown here useful: https://developer.android.com/codelabs/jetpack-compose-layouts#9

ok, going to take a look, thanks!

It only wokrs with BasicTextField. Not with the Material TextField.

@OptIn(ExperimentalLayout::class)
@Preview
@Composable
fun BorderTest() {
    val border = Modifier
            .border(BorderStroke(1.dp, Color.Gray.copy(alpha = 0.5f)), RoundedCornerShape(10.dp))
            .padding(8.dp)
    Row(Modifier.preferredHeight(IntrinsicSize.Min)) {
        Icon(
                modifier = Modifier.fillMaxHeight().then(border),
                imageVector = <http://Icons.Filled.Menu|Icons.Filled.Menu>
        )
        Spacer(Modifier.width(8.dp))
        BasicTextField(
                modifier = border,
                value = TextFieldValue("Test"),
                onValueChange = {}
        )
    }
}

I think I’m going to use BasicTextField then… thanks for the example @Timo Drick