40

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

enter image description here

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!

Improve this question
1
  • i had that same issue, only way i was able to get around it was specifying layout_height on the TextInputLayout Commented Dec 30, 2016 at 22:10

6 Answers 6

Reset to default
47

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.

EditTextNoPadding

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Can you please provide a screenshot of the output?
Screenshot added!
how did I miss this? ;P
Feel free to change the accepted answer ;) Negative margins seems kinda hacky
That worked like a charm without any hacky solution! This should be the accepted answer.
|
16

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:

enter image description hereenter image description here

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

Improve this answer

3 Comments

@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 My comment obviously referred to the specific answer. If you have an easier solution, pls share it with us
Alot of work to remove some padding, but I'm so happy I found this answer.
3

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

Improve this answer

Comments

2

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

Improve this answer

1 Comment

Thanks, Carlos. This is the only solution that works consistently across platforms and API levels.
0

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.

Improve this answer

Comments

0 
 <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" />
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.