2

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

kacsagit
  • 45
  • 1
  • 7

1 Answers1

3

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
        )
    )

enter image description here

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • That works well for a normal TextFiled, but I also want to add a leadingIcon which again ruins the height even when using `LocalMinimumTouchTargetEnforcement provides false`. – kacsagit Mar 13 '23 at 15:09
  • @kacsagit what height are you using? I've tried to add the icon using the leadingIcon attribute (check the updated answer) and it still works well. – Gabriele Mariotti Mar 13 '23 at 15:18
  • 1
    Okay, I found that the `.height(36.dp)` is a crucial part it was not enough to just use ` .defaultMinSize(minHeight = 0.dp)` – kacsagit Mar 13 '23 at 16:20