Vertically centering TextInputLayout text with no hint enabled

user_10082297 0
Viewed 1010

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:

result

android-textinputlayout material-components-android android
4 Answers

Adjust the bottom padding in your TextInputEditText style.

  1. Set a custom themeOverlay in your TextInputLayout style
  2. Use a custom style in editTextStyle theme attribute which inherits from
  3. @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.

user_129302650

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>
user_14395220

Try to set padding for TextInputEditText, it worked for me

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

use layout_gravity = "Center".

user_90038510
Related