How to reduce the height of androidx.compose.material3.OutlinedTextField

Question

I have trouble with reducing the height of the OutlinedTextField in compose. I am trying to do a SearchBar inside the TopAppBar like it is done in many google apps(Gmail,Play Store). I am unable to achieve this in material3.

I tried copying the OutlinedTextField and making my own custom view but it is too much stuff that I would have to copy, so I think there should be a better way.

Edit: The TextFiled should also have a leadingIcon

Answer 1

The OutlinedTextField follows the material guidelines. If you want to change the height you can use BasicTextField applying the height modifier adding the OutlinedTextFieldDecorationBox.

Something like:

BasicTextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier
        .height(36.dp),
    singleLine = singleLine,
    interactionSource = interactionSource
) { innerTextField ->
    TextFieldDefaults.OutlinedTextFieldDecorationBox(
        value = text,
        innerTextField = innerTextField,
        enabled = enabled,
        singleLine = singleLine,
        visualTransformation = VisualTransformation.None,
        interactionSource = interactionSource,
        leadingIcon = {
            Icon(
                Icons.Filled.Add, "contentDescription",
                modifier = Modifier.clickable { /* doSomething */ }
            )
        },
        contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
            top = 0.dp,
            bottom = 0.dp
        )
    )