Vertically centering TextInputLayout text with no hint enabled

Question

So I am trying to ensure that the main text in a TextInputEditText (wrapped in a TextInputLayout) is vertically centered with the default Widget.MaterialComponents.TextInputLayout.FilledBox style but when the hint is disabled.

As you can see in the image, with app:hintEnabled="false", the current text is not vertically centred.

For reference I am using the 1.1.0 version of the material components library.

My layout file:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/margin"
        app:hintEnabled="false">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/set_pos_password_input"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:importantForAutofill="no"
            android:maxLength="4"
            android:text="1111"
            android:textAlignment="center" />
    </com.google.android.material.textfield.TextInputLayout>
</LinearLayout>

The result:

score 2 · Answer 1 · answered Jun 02 '22 at 03:52

2

Try to set padding for TextInputEditText, it worked for me

android:paddingTop="0dp"
android:paddingBottom="0dp"

answered Jun 02 '22 at 03:52

qinchao wen

21
2

This actually (and strangely ) works !! – Boutghat Oualid Nov 22 '22 at 14:31

score 0 · Answer 2 · answered Apr 01 '20 at 21:10

0

Adjust the bottom padding in your TextInputEditText style.

Set a custom themeOverlay in your TextInputLayout style
Use a custom style in editTextStyle theme attribute which inherits from
@style/Widget.MaterialComponents.TextInputEditText.FilledBox by default FilledBox style applies the following default padding:

 <item name="android:paddingTop">28dp</item>
 <item name="android:paddingBottom">12dp</item>

You can read more from the Material docs about text field theming.

answered Apr 01 '20 at 21:10

mementoGuy

391
2
8

Thanks for your response, I was hoping for a solution that would actually centre it instead of just adjusting the padding until it seems right, this solution seems a little hacky unless I am missing something? – Henry Twist Apr 04 '20 at 00:33
Have you tried adding the gravity attribute to the custom editTextStyle? Also have a look at this [answer](https://stackoverflow.com/a/58970239/12930265) to a similar question. – mementoGuy Apr 06 '20 at 01:44
Unfortunately adding the gravity does not have an effect. Also that answer you referenced seems to provide a solution to centre horizontally with a label, whereas I want it centred vertically and without a label. – Henry Twist Apr 07 '20 at 00:13

score 0 · Answer 3 · answered Sep 03 '21 at 11:55

Here's a working example to achieve that. I assume the problem why the suggestions did not work yet are that you did apply the padding to the TextInputLayout and not to the nested TextInputEditText. The following definition will take car of this.

XML

<com.google.android.material.textfield.TextInputLayout
    style="@style/Widget.MaterialComponents.TextInputLayout.MyStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical" >

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="2"
        android:text="10" />

</com.google.android.material.textfield.TextInputLayout>

Style definition

<!-- Define a style 
<style name="Widget.MaterialComponents.TextInputLayout.MyStyle" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
    <item name="materialThemeOverlay">@style/ThemeOverlay.MaterialComponents.TextInputEditText.MyStyle</item>
    <item name="expandedHintEnabled">false</item>
    <item name="hintEnabled">false</item>
    <!-- below is optional -->
    <item name="boxCornerRadiusBottomEnd">4dp</item>
    <item name="boxCornerRadiusBottomStart">4dp</item>
    <item name="boxCornerRadiusTopEnd">4dp</item>
    <item name="boxCornerRadiusTopStart">4dp</item>
    <item name="boxStrokeWidth">0dp</item>
    <item name="boxStrokeWidthFocused">0dp</item>
</style>

<style name="ThemeOverlay.MaterialComponents.TextInputEditText.MyStyle" parent="ThemeOverlay.MaterialComponents.TextInputEditText.FilledBox.Dense">
    <item name="editTextStyle">@style/Widget.MaterialComponents.TextInputEditText.MyStyle</item>
</style>

<style name="Widget.MaterialComponents.TextInputEditText.MyStyle" parent="Widget.MaterialComponents.TextInputEditText.FilledBox.Dense">
    <!-- equal padding will center the text -->
    <item name="android:paddingTop">4dp</item>
    <item name="android:paddingBottom">4dp</item>
    <item name="singleLine">true</item>
</style>

score -2 · Answer 4 · answered Mar 29 '20 at 04:54

-2

use layout_gravity = "Center".

answered Mar 29 '20 at 04:54

moumenShobakey

426
5
14

Thanks for your response, unfortunately this does not seem to vertically centre the text, I have tried to apply the attribute on both the outer ```TextInputLayout``` and the ```TextInputEditText```. – Henry Twist Mar 29 '20 at 14:23
Please consider providing a code snippet or an example along with your rather short explanation. – Edric Mar 29 '20 at 15:39

Vertically centering TextInputLayout text with no hint enabled

4 Answers4