Jetpack Compose - Show trailingIcon in BasicTextField?

Question

TextField has way too much padding by default for the screen I'm building, so I'm forced to use BasicTextField (see: this post on default TextField padding)

The problem is, BasicTextField doesn't take in a trailingIcon parameter. Is there a way to get around this?

Do you want to add a leadingIcon/trailingIcon while you are still using a `BasicTextField` or do you want to use a `TextField`/`OutlinedTextField` and be able to set all the paddings? Also do you need the solution for Compose version `1.1.x` or is `> 1.2.0-beta` also okay (because DecorationBox defaults have been exposed in one of the 1.2.0 alpha versions it allows for better solutions)? One way to get around this would be using Compose version `1.2.0-beta`+ and manually exposing the `contentPadding` parameter(s) for `TextField` and/or `OutlinedTextField`. — Ma3x, Jul 25 '22 at 06:49

score 2 · Accepted Answer · answered Jul 25 '22 at 07:25

Starting with 1.2.0 you can use the TextFieldDecorationBox with the BasicTextField. Here you can use the trailingIcon and contentPadding attributes:

BasicTextField(
    value = value,
    onValueChange = onValueChange,        
    interactionSource = interactionSource,
    enabled = enabled,
    singleLine = singleLine
) {
    TextFieldDefaults.TextFieldDecorationBox(
        value = value,
        innerTextField = it,
        singleLine = singleLine,
        enabled = enabled,
        visualTransformation = VisualTransformation.None,
        trailingIcon = { /* ... */ },
        interactionSource = interactionSource,
        contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
               //...top = 0.dp, bottom = 0.dp
        )
    )
}

Jetpack Compose - Show trailingIcon in BasicTextField?

1 Answers1