I know it’s a recurrent question here… but is there a way to remove this extra padding from `TextFie...

# compose

[nglauber]

I know it’s a recurrent question here… but is there a way to remove this extra padding from TextField without implement it from BasicTextView?
Or have this “LineTextField” + everything from “Material Design TextField” (label, leading icon, trailing icon, …)?

[iamthevoid]

Hey, how do you make placeholder visible when input not focused?

[nglauber]

Nothing 🤷‍♂️ I just set label… 😕

[nglauber]

I’m using the regular TextField, I just set the background color as transparent…

[iamthevoid]

I understood. You use label, but not a placeholder

[nglauber]

@Siyamed @Sean McQuillan [G] @Adam Powell sorry for bother you, but this question is for a real project and I really appreciate if you can help… I did a workaround using Layout but it’s not working on all cases… 😞

[Colton Idle]

Yeah, label and placeholder are two different args. If you use label, it'll show as a "hint" and then float up as a label, and if you also use a placeholder then while the label is floating above, the placeholder text will show as a hint.

[Colton Idle]

I think last time this was asked, I think @Louis Pullen-Freilich [G] chimed in saying this wasn't possible?

[Louis Pullen-Freilich [G]]

Yep this isn’t possible currently, the padding is an explicit part of the specification for a Material text field.

[nglauber]

@Louis Pullen-Freilich [G] thanks for answer… I did a workaround using Layout and it works for a few cases (width as fillMaxWidth or static value)… but not working when I’m using weight modifier…

[nglauber]

Do you have any suggestion?

[Louis Pullen-Freilich [G]]

Not sure I understand, are you building your own custom text field? What doesn’t work when you are using weight ?

[nglauber]

No… My workaround is basically increase the TextField width and use a negative offset

[nglauber]

Here is my current implementation…
https://gist.github.com/nglauber/9bc2b45dc5002f8bc1d617ba5645add3

[nglauber]

😞

[Louis Pullen-Freilich [G]]

What doesn’t work with weight ?

[Colton Idle]

@nglauber do you just want an input field with a line under it, or do you basically just want the "old" style of material input fields with just the line?

[Colton Idle]

For example... my design team is headstrong on just having the "old" material inputs.

[nglauber]

@Louis Pullen-Freilich [G] I just updated my gist. It’s working when fillMaxWidth or weight is set. But doesn’t work when a static width is set.

[Colton Idle]

The angular material library has a good approach to this I think if you're taking suggestions Louis 😄
https://material.angular.io/components/input/overview

The mat-form-field supports 4 different appearance variants which can be set via the appearance input. The legacy appearance is the default style that the mat-form-field has traditionally had. It shows the input box with an underline underneath it. The standard appearance is a slightly updated version of the legacy appearance that has spacing that is more consistent with the fill and outline appearances. The fill appearance displays the form field with a filled background box in addition to the underline. Finally the outline appearance shows the form field with a border all the way around, not just an underline.

Legacy would be super helpful in compose!

[nglauber]

@Colton Idle Kinda… To summarize, I want everything from the “Filled” TextField from Material design, less the margin and background.

[Louis Pullen-Freilich [G]]

Possibly because you have:

constraints.copy(
                        maxWidth = constraints.maxWidth + textFieldGap
                    )

And you are measuring it with more space than you actually have

[nglauber]

@Louis Pullen-Freilich [G] this is intentional… once I’m shifting left the TextField, I’m trying to increase its size using the same “gap”

[nglauber]

I mean… I’m shifting 16dp the TextField (to remove the extra padding), so I’m trying to increase its size by 16dp

[Colton Idle]

Kinda… To summarize, I want everything from the “Filled” TextField from Material design, less the margin and background.

Yeah. Sounds like you are doing the same thing my team is trying to do. Our design team wants the "filled" input fields, with no background color and no padding so that it appears like the standard/legacy approach.

I could not find a good solution. So far we are setting no background and the design team just decided to keep the padding. 🤮

[Louis Pullen-Freilich [G]]

Hard to say what is wrong anyway, TextField isn’t really designed to be manipulated in this way 🙂

If you really want to deviate, it’s probably just going to be easier to build your own, even though that is a lot of work right now

[nglauber]

@Louis Pullen-Freilich [G] this is really sad… I’m very excited about Compose, but a “simple” thing like that is making me miss two days with no success… 😞 Now I have to convince the design team, to convince the client to change all the TextFields in the app… 🤦

[Colton Idle]

Yeah. It sucks because our iOS and angular apps are using material and they are invoking the legacy input.

The Android View system has legacy support for material input fields too (https://github.com/material-components/material-components-android/issues/686)

I wonder if I should try to wrap legacy view based input field in an AndroidView composable and just call it a day...?

[nglauber]

@Colton Idle sure… and if you look a the Compose code, this padding is a constant… 🤷‍♂️ So (in theory) the only thing we need is set this value to zero

[nglauber]

and everybody will be happy and stop asking “how to remove the extra padding from TextField” 🤦🏻‍♂️

[Colton Idle]

Yeah. I agree. For now, our design unfortunately only looks bad on Android since our design team said they rather take the additional padding vs having a filled background or outlined text input. I suppose it's worth filing a feature request to support a legacy input field. I'd star it. 😁

[Louis Pullen-Freilich [G]]

and everybody will be happy and stop asking “how to remove the extra padding from TextField”

If only it was that simple 🙂 We already have received multiple requests for other features:

• Text alignment
• padding customization for other things in a text field, such as leading / trailing icons
• Indicator width / size customization
• Height customization for the text field
• Changes to label / placeholder behavior
It’s not really fair to say that just exposing padding will make this text field fit every use case - if anything it just raises more questions as to what should / shouldn’t be exposed. TextField is an implementation of the Material Specification for text fields - if this doesn’t meet your design specification then that is unfortunate, but this isn’t a separate problem space for any other custom components. If you want a button that doesn’t look like a Material Button, then you can just build your own - the same is true for a text field that doesn’t fit the spec (it just so happens that TextField is very complex compared to other components, so there is more to implement / copy and paste).

In the future we might be able to provide some building blocks that make it easier to build a Material-like text field, but at least for now there are no plans to expose this sort of customization on the existing APIs.

[Louis Pullen-Freilich [G]]

worth filing a feature request to support a legacy input field

The Compose Material library is an implementation of the current Material spec, so if these components aren’t part of the current spec, then they don’t really belong in the library. Other things such as color theming will also vary between versions, so it would be very challenging to try and create consistent components here anyway 🙂

[nglauber]

For someone which is searching for “remove extra padding from TextField”. I opened a ticket…
https://issuetracker.google.com/issues/189971673