Material-components-android: TextInputLayout hint text not vertically center

[houdangui1985]

Our design team follow the iOS catalog app , the hint text of TextInputLayout is vertically center, but when I try Android it is not. I don't seem to find an option to make it. So they are different ? Or there's some way to make it?

[afohrman]

Thanks for bringing this up. You are correct that the label should be vertically centered. I have a PR I'm working on now to vertically center the label text. It should land in the next week or so on GitHub.

[Dwite]

@afohrman Hello, just curious how is your PR going?

[FlorianVidal66]

Hello @afohrman, any news about the fix ?

[afohrman]

Sure. It turns out that fixing this bug properly requires a refactor of TextInputLayout's box draw. It's likely that this refactor won't be necessary once shapes theming is introduced to text fields, so I'm holding off on doing the refactor for now. The plan is to use MaterialShapeDrawable for the background and move away from using the EditText's underline, which is the source of the issue.

[FlorianVidal66]

Thanks for the quick answer @afohrman 👍

[Edwhis]

Any news on this? I still not able to vertically center hint.

[kassim]

Here's an attempt at a fix for this (not mine)
https://stackoverflow.com/a/50798196/2233621

[CoreyPedestrian]

Are there any updates on this or ETA on when shapes theming will be introduced on text fields?

[mayken]

Any news on this?

[shubhambansal]

Hey Guys, I have also faced this issue and looking for some custom library or some optimal solution.

[ed-george]

@afohrman Are there any updates available for this issue? Is the timescale of the shape theming changes known?

[kussberg]

Hey @afohrman, any news regarding the ETA of the fix for this bug?

[Shirane85]

This bug makes TextInputLayout look bad and not useable for our design. We had to move back to a regular edit text. Hope you guys fix this soon. (7 months old !)

[Dwite]

Well, you can fix it by setting correct paddings on the style but would be great to have it by default.

[Shirane85]

@Dwite We tried many attributes but nothing worked. What excactly works for you?

[alexandrupele]

Just tried with AndroidX and 'com.google.android.material:material:1.1.0-alpha02' and it still doesn't seem to be fixed - can anybody else confirm this?

[afohrman]

You can fix it by setting android:padding on the TextInputEditText/TextInputEditText style. Fixing it in the TextInputEditText style is blocked for now because fixing this issue causes a regression in the compound drawable. We're evaluating workarounds to mitigate/fix the issue, but in the meantime, I recommend setting android:padding on the TextInputEditText.

[PectoralisMajor]

@afohrman which value should we set it to? And shouldn't it be only paddingBottom?

[afohrman]

Any equivalent values for the top and bottom should visually center the label. Since android:paddingTop is set to 20dp in Widget.MaterialComponents.TextInputEditText.FilledBox, you can set android:paddingBottom to 20dp as well to center the label.

I recommend setting both android:paddingTop and android:paddingBottom to ensure that if/when the values change in the style, your text field is still visually centered.

[kussberg]

In order to make this bug more prominent, i have reported it to the main repo, as described in details: https://issuetracker.google.com/issues/122553583

[broakenmedia]

Hoping to see a solution or even a workaround for this soon.

[alexandrupele]

Yep - still waiting...

[zekapp]

This part works perfect as expected in the library for ios platform. Is it a joke Google

[mayken]

Problem is fixed!
https://issuetracker.google.com/issues/122553583#comment11

[broakenmedia]

Which release should the fix be included in? Alpha 06? Still seeing the same issue at the moment.

[zmeeagain]

Alpha 06 seems to still have issues with aligning the hint in TextInputEditText.

[leticiarossi]

Where do you see issues?

[zmeeagain]

Can align hint text start, center and right, but does not seem to be able to do so vertically. Unless that is the intended behaviour.

[vadimleonov]

What about fix ?

[trevorhackman]

This seems to still be an issue.

[afohrman]

The filled text field looks fine on our end:

Please test with the latest version and if you still see alignment issues, please provide a screenshot and source code for your use case. Thank you!

[whereareu]

android:paddingTop="18dp"
android:paddingBottom="18dp"
put them in the TextInputEditText