I am using a TextInputLayout to show a hint but I am not able to center it vertically. I always get this:
And I would like to center the hint vertically when there is no text in the EditText / TextInputEditText. I have tried the basic ideas (gravity, layout_gravity, etc.). So far the only way to do it would be to add some "magic" padding, but I would like to do it in a cleaner way. I was thinking on measure the top hint label height and add it as a bottom margin when it is not visible, and remove the same margin when it is visible, but I don't understand very well the TextInputLayout source code yet. Does anybody know how to do it?
Edit:
I tried this suggested answer:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@color/grey_strong">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="90dp"
android:background="@color/red_light"
android:gravity="center_vertical"
android:hint="Test"/>
</android.support.design.widget.TextInputLayout>
And I get this:
The "big" hint is still not vertically centered. It is a bit below the center because the "small" hint (in grey background, at the top, visible only when the field is focused) takes some space at the top and pushes the EditText.
This doesn't seem to be possible with the current implementation of
TextInputLayout
. But you can achieve what you want by playing with the padding of theTextInputEditText
.Let's say you have a
TextInputLayout
and aTextInputEditText
like this:As you can see the
TextInputLayout
is composed of a top area to hold the hint in small version and a bottom area to hold the hint in big version (and also the input content). When the view loses focus and the edit text is empty, the hint is moving inside the blue space. On the other hand when the view gains focus or the edit text has some text inside, the hint is moving to the red space.So what we want to do is:
TextInputEditText
when it doesn't have focus and text inside, this padding is equal to the red area height;TextInputEditText
has focus or text inside.As a result the view will look like this with the big hint vertically centered:
Let's say you retrieve your views as follow:
Here is an example of implementation that you can use to compute the top red space in pixels.
Then you can update the padding like this:
Now you have to call this method in two places: when the view is created (in fact we need to wait for the view to be fully measured) and when the focus changes.
One problem is that the height of the
TextInputLayout
is changing so all the view is moving and it doesn't really look centered. You can fix this by putting theTextInputLayout
inside aFrameLayout
with a fixed height and center it vertically.Finally you can animate all the thing. You simply need to use the
TransitionManager
of the support library when changing the padding.You can see the final result in this link: https://streamable.com/la9uk
The complete code will look like this:
The layout:
The code:
I hope this will solve your problem.