How to disable padding on TextInputLayout?

Question

There appears to be left padding automatically added when using a TextInputLayout to wrap an EditText as you can see in the screenshot below.

There is no padding added to the EditText in the layout XML, but when the view is rendered there appears to be left padding on the EditText. You can see this when comparing the TextView below the TextInputLayout.

How do I disable this left padding from being added?

Thank you!

Solution 1

You can just set the start and end padding on the inner EditText to 0dp.

<com.google.android.material.textfield.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <com.google.android.material.textfield.TextInputEditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingStart="0dp"
    android:paddingEnd="0dp" />

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

Here's a screenshot with Show Layout Bounds turned on so you can see that the hints go all the way to the edge of the view.

Solution 2

With the TextInputLayout included in the Material Components Library you can use a custom style to reduce the padding.

Just use something like:

<com.google.android.material.textfield.TextInputLayout
       ....
       android:hint="Hint text"       
       style="@style/My.TextInputLayout.FilledBox.Padding" >

Then you can define a custom style for the EditText using the materialThemeOverlay attribute:

  <style name="My.TextInputLayout.FilledBox.Padding" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="materialThemeOverlay">@style/MyThemeOverlayFilledPadding</item>
  </style>

  <style name="MyThemeOverlayFilledPadding">
    <item name="editTextStyle">@style/MyTextInputEditText_filledBox_padding</item>
  </style>

  <style name="MyTextInputEditText_filledBox_padding" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox">
    <!-- left and right padding -->
    <item name="android:paddingStart" ns2:ignore="NewApi">2dp</item>
    <item name="android:paddingEnd" ns2:ignore="NewApi">2dp</item>
    <item name="android:paddingLeft">2dp</item>
    <item name="android:paddingRight">2dp</item>
    
    <!-- top and bottom padding -->
    <item name="android:paddingTop">28dp</item>
    <item name="android:paddingBottom">12dp</item>
  </style>

Here the final result:

Note: it requires at least the version 1.1.0 of the Material Components library.

Solution 3

I managed to remove that left space by making a copy of the original theme of the edittext background

res/drawable/my_edit_text_material.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
   android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
   android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
   android:insetTop="@dimen/abc_edit_text_inset_top_material"
   android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">

<selector>
    <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
    <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
    <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
</selector>

</inset>

res/drawable-v21/my_edit_text_material.xml

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="@dimen/abc_edit_text_inset_top_material"
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
<selector>
    <item android:state_enabled="false">
        <nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"
            android:tint="?attr/colorControlNormal"
            android:alpha="?android:attr/disabledAlpha"/>
    </item>
    <item android:state_pressed="false" android:state_focused="false">
        <nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"
            android:tint="?attr/colorControlNormal"/>
    </item>
    <item>
        <nine-patch android:src="@drawable/abc_textfield_activated_mtrl_alpha"
            android:tint="?attr/colorControlActivated"/>
    </item>
</selector>
</inset>

in the two files delete:

android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material" android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"

---

Create a new style for your editText and add it as background

/res/values/styles.xml

<resources>

<!-- Other styles . -->

<style name="AppTheme.EditText" parent="Widget.AppCompat.EditText">
    <item name="android:background">@drawable/my_edit_text_material</item>
</style>
</resources>

---

Add the style to your editText

<android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_lastname"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginTop="16dp"
    android:layout_marginLeft="0dp"
    android:layout_marginStart="0dp"
    android:textColorHint="@color/Cool_Gray_2_C"
    app:layout_constraintEnd_toStartOf="@+id/profile_guideline_end"
    app:layout_constraintStart_toStartOf="@+id/profile_guideline_start"
    app:layout_constraintTop_toBottomOf="@+id/input_layout_firstname" >

    <EditText
        style="@style/AppTheme.EditText"
        android:id="@+id/txfLastname"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/last_name"
        android:inputType="textPersonName"
        android:textColor="@color/Cool_Gray_2_C"
        android:textColorHint="@color/Cool_Gray_2_C"
        android:textSize="17sp" />

</android.support.design.widget.TextInputLayout>

That is the way I found removing the left and right space.

I hope help, thanks

Solution 4

Make the padding 0dp like this

<com.google.android.material.textfield.TextInputLayout
    style="@style/UserTextLayout"
    android:layout_height="50dp"
    app:boxBackgroundMode="none">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/emailEditText1"
        style="@style/UserEditText"
        android:layout_width="match_parent"
        android:hint="MATRIC NUMBER"
        android:inputType="number"
        android:maxLines="1"
        android:padding="0dp"
        android:text="20181766" />
</com.google.android.material.textfield.TextInputLayout>

Here is the result

View more solutions