在Android EditText上去除左边填充

Question

默认的EditText背景似乎在左侧添加了约4dp的填充。这会导致与其他小部件对齐不良。

我制作了一个简单的应用程序来演示。截图：

布局：

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

有没有办法阻止它这样做？

- Xiao

Answer 1

一个解决方法是在两侧使用负边距 (-4dp)。

这只有在EditText的背景与布局背景相匹配且布局两侧没有任何被EditText覆盖的内容时才有效。

- Peckata

---

实际上，这是最无忧无虑的解决方案。很遗憾，但这是真的。我不知道为什么谷歌会这样做。看起来非常无用。 - Moses Aprico

Answer 2

你尝试添加android:background="@android:color/transparent"了吗？

我用同样的示例做了测试，结果如下：

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

第二种方法-使用线条

在drawable中添加一个xml文件，如下所示

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

然后在你的布局中，将以下内容添加到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>

你将会得到这个效果

- Jorge Casariego

---

没错，但现在它看起来不像一个EditText。我想使用EditText的部分原因是它有一条在焦点改变等情况下自动变化的线条。 - Xiao

哦，使用drawable很不错。那么基于状态的颜色变化呢？ - Xiao

你可以在android:color="#000000" />中更改任何颜色。<!--描边的颜色-->例如：android:color="#DD0000" - Jorge Casariego

可以，但需要用选择器吗？还是我需要为每个状态制作可绘制物并在选择器中引用它们？这仍然比需要为每种颜色修改九宫格/编程着色要好得多。 - Xiao

你只需要再添加一个XML文件来定义颜色选择器。 - Siavash

Answer 3

在编辑文本字段中使用android:layout_marginLeft="-4dp"，如下所示。

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

- Allen Koch

Answer 4

这个问题源于? 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>

如您所见，EditText 的所有边缘的插入值为 abc_edit_text_inset_top_material = 4dp。 这使得 EditText 在其内容周围具有小的内边距。

要删除该内边距，您应创建一个新的 EditText 样式，并修改 editTextBackground 属性。例如：

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

新的background_edit_text.xml文件（记得把这个文件放到正确的drawable目录中，以免被覆盖，比如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>

为你的EditText应用新样式：

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

- Hoa Nguyen

---

谢谢分享，看起来是个好方法。但对我不起作用。设置editTextBackground对样式没有影响，我试过其他背景只是为了确认。如果我使用android:editTextBackground，那么我就会得到无插图背景，但我失去了颜色，并且不能再使用colorControlActivated。我还没有找到正确的设置颜色的方法。也许这是一个主题问题，我的应用程序主题覆盖了它（如果可能的话）？PS：我还更新了样式引用，修正了一个小错误。 - arberg

是的，在你的情况下可能是主题问题。在我的情况下，我仍然可以更改EditText的colorControlActivated。 注意：要在Android 30上删除EditText的“inset”，属性应为android:editTextBackground（当然，两者都可以使用）。 - Hoa Nguyen

我仍然不知道为什么它没有起作用。也许与此相关的是，我正在使用Material Design com.google.android.material:material:1.2.0-rc01。另外（对于那些老受困扰的灵魂），这里有很多其他人在EditText上遇到样式问题：https://dev59.com/V2gv5IYBdhLWcg3wBMSg#10904193 - arberg

啊，我找到问题了。我相信您无意中省略了正确的背景文件。您包含的文件是来自Android源/可绘制的默认“editTextBackground”，但被drawable-v21覆盖了。如果您已经使其工作，那么您必须已经包含了v21版本，设置颜色并且看起来像这样：https://chromium.googlesource.com/android_tools/+/master/sdk/extras/android/support/v7/appcompat/res/drawable-v21/abc_edit_text_material.xml您能确认这是真的吗（并更新答案）？ - arberg

@arberg 是的，我引用了drawable文件夹中的文件而不是drawable-v21。我已经更新了我的答案。 这是我的示例代码，如果需要的话：https://github.com/hoanv810/EditTextSample - Hoa Nguyen

Answer 5

将EditText的背景更改为自定义，它具有九宫格填充。

- ArtKorchagin

---

是的，我想那应该可以解决问题，但我宁愿不需要为每个状态制作九宫格图案（或需要将此逻辑放入每个想要使用EditText的应用程序中...） - Xiao

那么尝试为TextView应用填充？ - ArtKorchagin

是的，这就是我正在做的，但这是一个很粗糙的hack。希望能有更干净的解决方案。 - Xiao

无论如何，带有默认背景的EditText都会有小间距。 - ArtKorchagin

我认为这应该是被接受的答案（可能提供一个小示例会更有帮助）。它似乎就是它所表示的，EditText 的默认背景四周都有内嵌。在我看来，其他任何方法都是一种 hack。 - Boris

Answer 6

如果您只想对齐文本而不是下面的行，可以通过编程方式覆盖填充。因此，假设此布局用于活动。创建活动后，您可以执行以下操作：

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

关键是在应用背景后重新设置填充。您可能需要注意背景再次设置的情况，因此一个想法是覆盖setBackground*()方法并在那里重新设置填充。

- N.T.