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!

i had that same issue, only way i was able to get around it was specifying layout_height on the TextInputLayout — BiGGZ, Dec 30 '16 at 22:10

Andrew Orobator · Accepted Answer · 2019-07-10T16:56:51.187

44

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.

edited Jul 10 '19 at 16:56

answered Jul 10 '19 at 05:24

Andrew Orobator

7,978
3
36
36

Can you please provide a screenshot of the output? – dazza5000 Jul 10 '19 at 14:14
1

Screenshot added! – Andrew Orobator Jul 10 '19 at 16:57
how did I miss this? ;P – dazza5000 Jul 10 '19 at 17:42
4

Feel free to change the accepted answer ;) Negative margins seems kinda hacky – Andrew Orobator Jul 10 '19 at 17:45
Sure thing. I need to try it out with a TextView above the TextInputLayout to make sure there is vertical alignment across both view types. Thank you! – dazza5000 Jul 10 '19 at 17:50
1

That worked like a charm without any hacky solution! This should be the accepted answer. – Shubhral Mar 11 '21 at 14:34

Gabriele Mariotti · Answer 2 · 2021-05-11T15:52:15.300

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.

@nibbana, sane answer for such a simple and trivial task, really? Android UI designers are thinking with their *sses. I have a `TextView` and `EditText` I have been trying to align their start for like an hour and I am not even an Android newbie. This is nothing but bullcrap — Farid, Nov 26 '21 at 17:06
@Farid My comment obviously referred to the specific answer. If you have an easier solution, pls share it with us — nibbana, Dec 09 '21 at 13:18

score 3 · Answer 3 · edited Feb 26 '20 at 17:54

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

0dp EditText padding image

score 2 · Answer 4 · answered Sep 15 '18 at 08:01

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

Thanks, Carlos. This is the only solution that works consistently across platforms and API levels. — AGDownie, Jan 20 '19 at 11:33

score 0 · Answer 5 · answered Aug 15 '19 at 12:27

The horizontal space on the left and right of the EditText default drawable is controlled by the abc_edit_text_inset_horizontal_material dimension. You can confirm that by looking at the abc_edit_text_material.xml drawable file, which represents AppCompat's default EditText background. To remove the space completely you can just set the dimension to 0 by specifing the dimension with exact same name inside your own project's dimens.xml file:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen tools:override="true" name="abc_edit_text_inset_horizontal_material">0dp</dimen>
    ...
</resources>

However, there is a catch. AppCompat library will only use it's own abc_edit_text_material.xml background if the host OS doesn't support material design. So If you're running your app on Android 4, you'll see that side margins disappear after you add the dimension mentioned above. If, however, you launch your app on say Android 10, you'll see that margins are still there. That is because on newer Android versions, compat library will actually prefer background drawable specified inside the OS itself.

So you need to force all of your EditTexts to use abc_edit_text_material.xml background specified inside the AppCompat library. Luckily, you can do that just by adding one line to your syles.xml file:

styles.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
        <item name="editTextBackground">@drawable/abc_edit_text_material</item>
        ...
    </style>
    ...
</resources>

Any Theme.AppCompat.* will do as a parent theme and of course you have to use this theme as your app's theme in order to get any effect.

This solution uses private AppCompat identifiers (Android Studio will complain about this), but I still think this solution is much cleaner than using negative margins.

score 0 · Answer 6 · answered May 27 '21 at 13:18

   <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textField_driver_age"
            style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:padding="0dp"
            android:textColorHint="@color/brown_grey"
            app:boxBackgroundColor="@color/white"
            app:boxStrokeWidth="0dp"
            app:boxStrokeWidthFocused="0dp"
            app:endIconMode="none"
            app:layout_constraintBottom_toBottomOf="@+id/lable3"
            app:layout_constraintStart_toEndOf="@+id/lable3"
            app:layout_constraintTop_toTopOf="@+id/lable3">

            <AutoCompleteTextView
                android:drawablePadding="8dp"
                android:drawableEnd="@drawable/ic_email"
                android:id="@+id/et_driver_age"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:dropDownHeight="250dp"
                android:inputType="none"
                android:lines="1"
                android:padding="0dp"
                android:text="30"
                android:textColor="@color/greyish_brown"
                android:textSize="12sp" />

How to disable padding on TextInputLayout?

6 Answers6

Linked