Jetpack Compose OutlinedTextField adds extra padding to the leadingIcon. Is there a way to remove it?

Question

I can't figure out where this extra padding comes from. I even added a green background to the Icon to make sure the icon wasn't taking up any space. I read that singleLine can affect inner padding, but setting it to true/false didn't make a difference.

OutlinedTextField(
    modifier = modifier
      .fillMaxWidth()
    value = textFieldValue,
    onValueChange = { newText ->
      textFieldValue = newText
    },
    leadingIcon = if (isCurrency) {
      {
        Icon(
          imageVector = Icons.Filled.AttachMoney,
          contentDescription = null
        )
      }
    } else null,

The screenshot is using the same OutlinedTextField for all fields. The one without the extra padding has the leadingIcon set to null. Any ideas how to remove the padding?

score 2 · Accepted Answer · answered Apr 18 '23 at 07:15

2

In your case you can use the prefix attribute instead of the leadingIcon:

OutlinedTextField(
    value = text,
    onValueChange = { newText ->
        text = newText
    },
    prefix  =
        {
            Icon(
                imageVector = Icons.Filled.AttachMoney,
                contentDescription = null
            )
        },

)

answered Apr 18 '23 at 07:15

Gabriele Mariotti

320,139
94
887
841

Hmm, my OutlinedTextField doesn't have a preFix. I'm using the Material 3 one, perhaps that is the reason? – Marty Miller Apr 19 '23 at 18:25
@MartyMiller Yes it requires M3 1.1.0 – Gabriele Mariotti Apr 21 '23 at 07:31
@MartyMiller It's called leadingIcon now I believe. – Varundroid Jul 05 '23 at 04:28
@Varundroid leadingIcon and prefix are different. – Gabriele Mariotti Jul 05 '23 at 07:55

Jetpack Compose OutlinedTextField adds extra padding to the leadingIcon. Is there a way to remove it?

1 Answers1