TextInputLayout：如何给提示填充或边距？答案

【问题标题】：TextInputLayout :How to give padding or margin to hint?TextInputLayout：如何给提示填充或边距？
【发布时间】：2015-09-16 13:16:16
【问题描述】：

我必须在我的项目中使用设计支持库的TextInputLayout。我想在TextInputLayout 中的hint 和EditText 之间留出空间。我在TextInputLayout 甚至在EditText 中设置了边距和填充，但两者都不起作用。那么如何解决这个问题。在这里我附上屏幕截图和我的编码。

==============================Style=================================

<style name="TextHint" parent="Base.TextAppearance.AppCompat">
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@color/green</item>
</style>



=============================XML===================================  
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    app:hintTextAppearance="@style/TextHint"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_height="wrap_content">
<EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/edttxtEmailAddress"
    android:singleLine="true"
    android:hint="@string/enter_valid_email"
    android:paddingLeft="20dp"
    android:textSize="20sp"
    android:background="@drawable/rounded_common"/>
</android.support.design.widget.TextInputLayout>

【问题讨论】：

为什么把编辑文字放在android.support.design.widget.TextInputLayout
我猜他想显示一个提示。但是……hint xml 标签不起作用吗？
因为我想对该 EditText 使用浮动提示。
@Mauker 没有提示标签如您在图像提示显示中看到的那样工作，但其重叠的 EditText 边框..so 有没有办法给出提示和 EditText 之间的垂直距离？
@parnav 请阅读我的更新答案，其中包含如何显示您可能需要的错误，例如在正确的情况下等

标签： android android-layout androiddesignsupport android-textinputlayout

【解决方案1】：

ganesh2shiv 提出的解决方案在大多数情况下都有效，尽管我发现它也会在未聚焦时使 EditText 内显示的提示文本偏离中心。

一个更好的技巧是将所需的paddingTop 设置为 EditText，同时在 EditText 的背景中嵌入额外的填充。一种相当明智的方法是将原始背景包装在 <layer-list> 中，并将 <item android:top="..."> 属性设置为与 EditText 的 paddingTop 匹配。

<android.support.design.widget.TextInputLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content">

  <EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/floating_hint_margin"
    android:background="@drawable/bg_edit_text" />
</android.support.design.widget.TextInputLayout>

还有bg_edit_text.xml 可绘制文件：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:top="@dimen/floating_hint_margin">
    <your original background; can be <bitmap> or <shape> or whatever./>
  </item>
</layer-list>

【讨论】：

这应该是正确的答案。 @ganesh2shiv 回答可以剪切edittext背景
当我们添加android:top 时，我们正在创建一个顶部插入，它是顶部边界线和edittext 顶部之间的空间。所以边框将在编辑文本顶部下方。这就是为什么我们使用android:paddingTop 来补偿捐赠的空间。此答案锁定！
对于可能有错误的人：从背景标识符中删除.xml
不添加背景就不能这样做吗？
感谢它为我工作，我刚刚为背景框添加了填充

【解决方案2】：

我自己最近几天一直在寻找这个问题的解决方案。在扯了几个小时的头发后，我终于找到了一个简单的解决方法。我注意到的是，如果您在 EditText 上设置了自定义背景，那么简单的 android:paddingTop 属性将无法改变提示文本和编辑文本的间距（我真的不知道为什么）。因此，如果您为 EditText 设置了自定义背景，您可以在 EditText 中使用 android:translationY 属性。

所以这是你的解决方案：

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="10dp"
    app:hintTextAppearance="@style/TextHint">

    <EditText
        android:id="@+id/edttxtEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/rounded_common"
        android:hint="@string/enter_valid_email"
        android:paddingLeft="20dp"

        android:translationY="10dp" 

        android:singleLine="true"
        android:textSize="20sp" />
</android.support.design.widget.TextInputLayout>

希望对您有所帮助。 :)

更新：对于迟到的更新，我深表歉意。我最近真的很忙。 如果你还没有意识到，让我告诉你这个答案是丑陋和错误的。回想起来，我想我写它的时候可能喝醉了。正如其他人所提到的，它可能会削减editText背景的底部区域，但它也有一个丑陋的修复 - 你可以将（父）textInputLayout的高度设置得更大（多大？你应该通过试验找到它并且错误，糟糕！）而不是（子）editText。我希望你们都意识到那会很疯狂，所以请不要这样做。查看@Radu Topor 编写的the answer，它是迄今为止解决这个问题的最佳和干净的解决方案。谢谢。

【讨论】：

它会影响edittext中设置的背景布局
我只需要向上推动一点，您的解决方案（使用 5dp）效果很好
坦克很多，需要 paddingBottom
这个解决方案也对我有用，但唯一它像你已经提到的那样削减了底部。

【解决方案3】：

我尝试了填充更改，但效果不佳。

一个简单的解决方法是改变 TIL 的高度：

android:layout_height="wrap_content"

到（例如）

android:layout_height="50dp"

它可能不会在所有屏幕尺寸上给出相同的结果。

并添加

android:gravity="bottom"

把你的文字往下推。

【讨论】：

“它可能不会在所有屏幕尺寸上给出相同的结果”这就是为什么这是一个坏主意

【解决方案4】：

@RaduTopor 的回答很好，但我认为我们还需要添加 android:bottom 否则它还会在未聚焦时使 EditText 内显示的提示文本偏离中心

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:top="@dimen/floating_hint_margin" android:bottom="@dimen/floating_hint_margin">
    <your original background; can be <bitmap> or <shape> or whatever./>
  </item>
</layer-list>

之前（RaduTopor 答案）：

之后：

【讨论】：

【解决方案5】：

经过多次尝试，我找到了另一种解决方案（材料版本 1.2.1）：

这是布局示例：

  <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputLayout"
            style="@style/CustomTextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/textInputEditText"
                style="@style/CustomTextInputEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint" />

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

这是样式示例：

 <style name="CustomTextInputLayout">
        <item name="boxCollapsedPaddingTop">-16dp</item>
        <item name="android:paddingTop">16dp</item>
        <item name="boxBackgroundColor">@color/backgroundColorWhite</item>
        <item name="android:textColorHint">...</item>
        <item name="android:textAppearance">...</item>
        <item name="hintTextAppearance">...</item>
        <item name="hintTextColor">...</item>
        <item name="boxStrokeColor">...</item>
    </style>

    <style name="CustomTextInputEditText">
        <item name="android:textAppearance">...</item>
        <item name="android:paddingTop">@dimen/margin_12</item>
        <item name="android:paddingBottom">@dimen/margin_12</item>
        <item name="android:paddingStart">0dp</item>
        <item name="android:paddingEnd">0dp</item>
    </style>

这两行设置标题/提示视图在展开状态而不是折叠状态的垂直偏移：

  <item name="boxCollapsedPaddingTop">-16dp</item>
  <item name="android:paddingTop">16dp</item>

这两行 - 用于文本和下划线之间的边距：

  <item name="android:paddingTop">@dimen/margin_12</item>
  <item name="android:paddingBottom">@dimen/margin_12</item>

那一行 - 用于消除背景色调错误：

 <item name="boxBackgroundColor">@color/backgroundColorWhite</item>

这两行 - 用于删除标准水平填充

 <item name="android:paddingStart">0dp</item>
 <item name="android:paddingEnd">0dp</item>

【讨论】：

【解决方案6】：

我创建了一个特殊的类，目的是在 EditText 上方添加空视图，从而为提示添加填充。您可以将其用作简单的 TextInputLayout。

public class PaddingTextInputLayout extends TextInputLayout {

public View paddingView;

public PaddingTextInputLayout(Context context) {
    super(context);
}

public PaddingTextInputLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public PaddingTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
    super.addView(child, index, params);
    refreshPaddingView();
}

public void addPaddingView(){
    paddingView = new View(getContext());
    int height = (int) getContext().getResources()
            .getDimension(R.dimen.edittext_text_input_layout_padding);
    ViewGroup.LayoutParams paddingParams = new ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            height);
    super.addView(paddingView, 0, paddingParams);
}

public void refreshPaddingView(){
    if (paddingView != null) {
        removeView(paddingView);
        paddingView = null;
    }
    addPaddingView();
}
}

这个实现非常简单和愚蠢，你可以改进很多。

【讨论】：

很适合我。

【解决方案7】：

为了禁用底线剪切效果，我使用了边距、translationY 和 clipChildren="false"

<android.support.design.widget.TextInputLayout
        android:id="@+id/textinput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:clipChildren="false">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_profile_contact_name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="3dp"
            android:background="@drawable/image_back"
            android:hint="Contact name"
            android:padding="5dp"
            android:translationY="3dp" />
    </android.support.design.widget.TextInputLayout>

【讨论】：

【解决方案8】：

这就是我在我的项目中所做的，以便在编辑文本和提示之间获得足够的空间

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_full_name"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginStart="40dp"
    android:layout_marginEnd="40dp"
    android:layout_marginTop="30dp"
    android:gravity="bottom"
    android:textColorHint="#fff"
    app:layout_constraintTop_toBottomOf="@+id/welcome_til_email">

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#9a050505"
        android:hint="You email"
        android:inputType="textCapWords"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:singleLine="true"
        android:textAppearance="?android:textAppearanceSmall"
        android:textColor="#fff"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.design.widget.TextInputLayout>

【讨论】：

【解决方案9】：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp"
          android:bottom="5dp">
        <shape>
            <!-- Background Color -->
            <solid android:color="#f1f1f1"/>
            <!-- Round Corners -->
            <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

<style name="text_input_edit_text_without_border_style">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">55dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:paddingBottom">5dp</item>
    <item name="android:gravity">left|center_vertical</item>
    <item name="android:paddingLeft">8dp</item>
    <item name="android:paddingRight">8dp</item>
    <item name="android:maxLines">1</item>
    <item name="android:singleLine">true</item>
    <item name="android:imeOptions">actionNext</item>
    <item name="android:textSize">@dimen/text_size_large</item>
    <item name="android:background">@drawable/bg_without_border_with_padding_top</item>
</style>

<style name="text_input_layout_style">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginBottom">@dimen/margin_medium</item>
</style>

【讨论】：

【解决方案10】：

只需添加到您的 EditText 自定义背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
        <shape android:shape="rectangle">
            <padding
                android:top="4dp"/> // your padding value
        </shape>
    </item>
// customize your background items if you need
</layer-list>
<android.support.design.widget.TextInputLayout
 ...>
    <android.support.design.widget.TextInputEditText
        ...
        android:background="@style/your_custom_background"/>

然后将其应用于您的 EditText 并使用您的填充值增加 EditText 的高度（如果您使用固定高度）

【讨论】：

【解决方案11】：

这是一个较晚的答案，但希望它有所帮助，而且我认为它是一个更好的解决方案。与其为您的 editText 提供背景，不如为您的 TextInputLayout 提供该背景。并将edittext 布局设置为透明。

<android.support.design.widget.TextInputLayout
                android:id="@+id/tinput_phone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="05dp"
                android:background="@drawable/send_email_screen_element_bg"
                android:padding="05dp"
                android:theme="@style/grey_control_style">

                <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/edt_phone"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:ems="10"
                    android:hint="@string/phone_hint_str"
                    android:inputType="text"
                    android:paddingStart="10dp"
                    android:paddingTop="10dp"
                    android:paddingBottom="10dp"
                    android:singleLine="true"
                    android:textColor="@color/black"
                    android:textSize="14sp" />
            </android.support.design.widget.TextInputLayout>

【讨论】：

【解决方案12】：

只需使用 padding-bottom

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



             app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                >

                <com.google.android.material.textfield.TextInputEditText

                   ....
                    android:paddingBottom="@dimen/dp_25"
...
                   />
            </com.google.android.material.textfield.TextInputLayout>

【讨论】：

【解决方案13】：

如果需要在光标和提示之间添加空格，那么您可以尝试

editTextComment.setHint("  "+getString(R.string.add_a_comment));

【讨论】：

【解决方案14】：

布局 xml

<com.google.android.material.textfield.TextInputLayout
    style="@style/TextInputLayout"
    android:layout_marginTop="10dp"
    android:gravity="center"
    android:theme="@style/TextInputLayoutHint">

    <androidx.appcompat.widget.AppCompatEditText
        style="@style/TextInputEditText"
        android:hint="Email ID"
        android:inputType="textEmailAddress"
        android:maxLines="1" />

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

styles.xml

<style name="TextInputLayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginStart">15dp</item>
    <item name="android:layout_marginLeft">15dp</item>
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginEnd">15dp</item>
    <item name="android:layout_marginRight">15dp</item>
</style>

<style name="TextInputLayoutHint" parent="">
    <item name="android:textColorHint">@color/colorHintNormal</item>
    <item name="colorControlActivated">@color/colorOrange</item>
    <item name="android:textSize">11dp</item>
</style>

<style name="TextInputEditText" parent="">
    <item name="android:translationY">10dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">@null</item>
    <item name="android:paddingBottom">15dp</item>
    <item name="android:textColor">@color/colorBlack</item>
    <item name="android:textColorHint">@color/colorHintActive</item>
    <item name="android:textSize">13sp</item>
</style>

【讨论】：

【解决方案15】：

我认为你应该考虑这个：

设计库采用了一种有趣的方法来自定义EditText：它不会直接更改它。相反，TextInputLayout 用于包装EditText 并提供增强功能。

第一个，当用户在字段中输入内容时显示一个浮动标签，是自动完成的。 TextInputLayout 在其子元素中找到 EditText 并将其自身附加为 TextWatcher，因此它能够确定该字段何时已被修改并将提示从其在 EditText 中的常规位置移动到其上方的浮动标签位置。

第二个增强功能，显示错误消息，需要对代码稍作改动。不应在 EditText 上设置错误，而应在 TextInputLayout 上设置错误。这是因为在EditText 上设置错误时，没有自动通知TextInputLayout 的方法。布局可能如下所示：

<android.support.design.widget.TextInputLayout
    android:id="@+id/username_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:id="@+id/username_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/username_hint"/>
</android.support.design.widget.TextInputLayout>

请注意，EditText 和 TextInputLayout 都需要布局 ID。在片段中，我们需要配置 TextInputLayout 以启用显示错误：

TextInputLayout usernameTextInputLayout = (TextInputLayout) view.findViewById(R.id.username_text_input_layout);
usernameTextInputLayout.setErrorEnabled(true);
...
usernameTextInputLayout.setError(R.string.username_required);

【讨论】：

让提示出现在编辑文本中
不，这不是我想要的，我使用背景来编辑文本，它的扩展 edittext 边框超出其默认限制，以便提示与 edittext 重叠。是否有任何方法或xml标签可以在Hint和Edittext上边框之间设置边距？
android:paddingTop="20dp" 或任何适合你的东西
并在您的 TextinputLayout 中删除此标签 android:layout_marginTop="10dp"
不工作 android:paddingTop="20dp" 也是因为它在 EditText 内腾出空间我想在 Hint 和 Edittext 之间腾出空间...

【解决方案16】：

我认为使用修复大小比您想象的要简单，前提是您不需要出于任何原因使用wrap_content，否则接受的方法似乎可以正常工作。

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="bottom">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_marginTop="10dp"/>

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

按照这个例子，你有一个 20dp 的空间来放置你想要的提示标签，使用 layout_marginTop 属性。

【讨论】：