Removing the left padding on an Android EditText

Question

The default EditText background seems to put ~ 4dp of padding on the left. This causes misalignment with other widgets.

I made a simple app to demonstrate. Screenshot:

Layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <TextView
        android:background="#00ff00"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="HINT"
        android:text="TEXT"
        android:singleLine="true"/>
    <TextView
        android:background="#00ff00"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

Is there anyway to stop it from doing this?

score 13 · Answer 1 · answered Jul 30 '15 at 22:56

13

One workaround is to use negative margin on the sides (-4dp)

This will only work when the EditText background matches the Layout background, and you don't have anything on the sides in the Layout that would be covered by the EditText

answered Jul 30 '15 at 22:56

Peckata

139
2

2

actually this is the most hassle-free solution. sad. but true. idk why does google made it this way. seems horribly useless. – Moses Aprico Mar 22 '17 at 17:24

Jorge Casariego · Answer 2 · 2015-07-30T22:57:37.787

Did you try adding android:background="@android:color/transparent"?

I did the same example with this result

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <TextView
        android:background="#00ff00"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="HINT"
        android:text="TEXT"
        android:background="@android:color/transparent"
        android:singleLine="true"/>
    <TextView
        android:background="#00ff00"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

Second way with lines

Add an xml file in drawable like this

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent" /> <!--background color of box-->
        </shape>
    </item>

    <item
        android:top="-2dp"
        android:right="-2dp"
        android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="#000000" />  <!-- color of stroke -->
        </shape>
    </item>
</layer-list>

then in your layout add this in your EditText android:background="@drawable/edittext_background"

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <TextView
        android:background="#00ff00"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="HINT"
        android:text="TEXT"
        android:background="@drawable/edittext_background"
        android:singleLine="true"
        android:layout_marginBottom="3dp"/>
    <TextView
        android:background="#00ff00"
        android:text="@string/hello_world"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

and you will have this

Right, but now it doesn't look like an EditText. Part of the reason I want to use an EditText is that it has the line which changes on focus etc 'for free' — Xiao, Jul 30 '15 at 22:51
Ooo nice with the drawable. What about color changes based on state? — Xiao, Jul 30 '15 at 22:59
You can change with any color in android:color="#000000" /> For example: android:color="#DD0000" — Jorge Casariego, Jul 30 '15 at 23:00
Sure, but with a selector? Or would I need to make a drawable for each state and reference them all in a selector? Still a lot better than needing to modify nine-patches/programatically tint for each color — Xiao, Jul 30 '15 at 23:01
you would just need one more xml file to define the color as a selector — Siavash, Dec 05 '17 at 08:56

score 4 · Answer 3 · answered Jun 12 '17 at 10:48

Use android:layout_marginLeft="-4dp" in edit text field as follows.

<EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="HINT"
        android:text="TEXT"
        android:layout_marginLeft="-4dp"
        android:singleLine="true"/>

Hoa Nguyen · Answer 4 · 2020-10-21T05:50:08.943

This issue comes from the default value of ?android:attr/editTextBackground.

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
    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">

    <selector>
        <item android:state_enabled="false">
            <nine-patch
                android:alpha="?android:attr/disabledAlpha"
                android:src="@drawable/abc_textfield_default_mtrl_alpha"
                android:tint="?attr/colorControlNormal" />
        </item>
        <item
            android:state_focused="false"
            android:state_pressed="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>

As you can see the inset value for all edges of EditText is abc_edit_text_inset_top_material = 4dp. That makes EditText has small padding around its content. To remove that padding you should create a new EditText style with modified editTextBackground attribute. For example:

<style name="Widget.App.TextField" parent="@style/Widget.AppCompat.EditText">
        <item name="colorControlActivated">#303E44</item>
        <item name="colorControlHighlight">#E5E9EC</item>
        <item name="colorControlNormal">#E5E9EC</item>
        <item name="editTextBackground">@drawable/background_new_edit_text</item>
<item name="android:editTextBackground">@drawable/background_new_edit_text</item>
    </style>

New background_edit_text.xml (Remember to put this file into correct drawable directory so it will not be overried such as drawable-v21...)

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:inset="@dimen/spacing_0dp">
    <selector>
        <item android:state_enabled="false">
            <nine-patch
                android:alpha="?android:attr/disabledAlpha"
                android:src="@drawable/abc_textfield_default_mtrl_alpha"
                android:tint="?attr/colorControlNormal" />
        </item>
        <item
            android:state_focused="false"
            android:state_pressed="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>

Apply new style to your EditText:

<EditText
        android:id="@+id/edt_phone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Widget.App.TextField"
        />

Thx for sharing, looks like a good approach. It doesn't work for me though. Setting `editTextBackground` has no effect on the style, I tried with other background just to be sure. If I use `android:editTextBackground` then I get the no-inset-background, but I lose the colors, and can no longer use `colorControlActivated`. I havn't yet found the right way to set the colors. Perhaps its a theme-thing, and my app theme overrides it (if such is possible) ? PS: I also updated the style reference, a small typo. — arberg, Oct 17 '20 at 09:46
Yes, in your case it could be a theme-thing. With mine, I still can change the `colorControlActivated` of the EditText. Note: to remove the `inset` of EditText on Android 30 the attribute should be `android:editTextBackground` (you can use both for sure). — Hoa Nguyen, Oct 17 '20 at 11:46
I still don't know why it didn't work. Maybe of relevance, I'm using material design `com.google.android.material:material:1.2.0-rc01`. Also (for old troubled souls) here are lots of others who had issue with getting styles to work on EditText: https://stackoverflow.com/a/10904193/197141 — arberg, Oct 18 '20 at 09:15
Ahh I found the problem. I believe you have unwittingly omitted the correct background file. The file you included is the default 'editTextBackground' from android source/drawable but it overwritten by drawable-v21. If you have it working you must have included the v21 version setting the colors and which look like this: https://chromium.googlesource.com/android_tools/+/master/sdk/extras/android/support/v7/appcompat/res/drawable-v21/abc_edit_text_material.xml Can you confirm this is true (and update the answer)? — arberg, Oct 19 '20 at 18:49
@arberg Yes, I referenced to the file in `drawable` folder instead of `drawable-v21`. Just updated my answer. Here is my sample code in case you need it: https://github.com/hoanv810/EditTextSample — Hoa Nguyen, Oct 21 '20 at 05:53

score 2 · Answer 5 · answered Jul 30 '15 at 22:45

2

Change background of EditText to custom, it have nine-patch padding

answered Jul 30 '15 at 22:45

ArtKorchagin

4,801
13
42
58

Yeah I guess that would work, though I would prefer not to need to make a nine-patch for each state (or need to put this logic in every app that wants to use an EditText...) – Xiao Jul 30 '15 at 22:49
Then try to apply padding for TextViews? – ArtKorchagin Jul 30 '15 at 22:51
Yeah that's what I'm doing, it is a gross hack though. Hoping for a cleaner solution – Xiao Jul 30 '15 at 22:52
In any case EditText with default background will be have small padding – ArtKorchagin Jul 30 '15 at 22:56
I think this should be the accepted answer (maybe a small sample would be helpful). It just seems to be what it is, the default background for EditText has insets all around it. Everything else would indeed be a hack, IMHO. – Boris Oct 13 '16 at 09:25

score -1 · Answer 6 · answered Aug 01 '15 at 03:48

If you want to align only the text and not the line underneath, you can overwrite the padding programmatically.

So let's say this layout is for an activity. Once the activity has been created you can do something like:

findViewById(R.id.edit_text).setPaddding(
                                 0,
                                 old_top_paddding,
                                 old_right_paddding,
                                 old_bottom_padding);

The key is to re-set the padding once the background has been applied. You might need to watch for cases where the background is set again, so maybe one idea is to override the setBackground*() methods and re-set the padding there.

Removing the left padding on an Android EditText

6 Answers6