TextInputLayout: как указать отступы или поля для подсказки?

Ответ 1

Решение, предложенное ganesh2shiv, работает по большей части, хотя я обнаружил, что он также децентрует текст подсказки, отображаемый внутри EditText, когда он не сфокусирован.

Лучше всего установить желаемый paddingTop в EditText, а также вставить дополнительное дополнение в фон EditText. Довольно простой способ сделать это - обернуть исходный фон в <layer-list> и установить атрибут <item android:top="..."> в соответствии с paddingTop вашего EditText.

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

Ответ 2

Я искал решение этого вопроса за последние пару дней. После разрыва моих волос часами я наконец нашел простую обходную проблему. Я заметил, что , если у вас есть настраиваемый фон, установленный в EditText, атрибут android: paddingTop simple не работает, чтобы изменить интервал b/w текста подсказки и отредактировать текст (у меня нет никакой идеи Зачем). Поэтому, если вы установили собственный фон в свой EditText, , вы можете использовать атрибут android: translationY в EditText.

Итак, ваше решение:

<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 наглядно больше (насколько велика ваша предполагаемая находка, error, yuck!), чем (child) editText. Надеюсь, вы все поймете, что это будет сумасшедшим, поэтому, пожалуйста, не делайте этого. Проверьте ответ, написанный @Radu Topor, это, безусловно, лучшее и чистое решение этого вопроса. Спасибо.

Ответ 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

Чтобы отключить эффект вырезания нижней строки, я использовал поля, 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>

Ответ 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

Это то, что я сделал в своем проекте, чтобы получить достаточно места между edittext и hint

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

Ответ 8

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

Ответ 9

Просто добавьте пользовательский фон 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 со своим значением дополнения, если вы используете высоту исправления

Ответ 10

Если требуется добавить пробел между курсором и подсказкой, вы можете попробовать

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

Ответ 11

Это поздний ответ, но надеюсь, что это поможет, и я думаю, что это немного лучшее решение. Вместо того, чтобы editText фон для вашего editText, 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

Думаю, вам стоит подумать об этом:

Библиотека дизайна предлагает интересный подход к настройке EditText: он не меняет ее напрямую. Вместо этого TextInputLayout используется для обертывания EditText и предоставления улучшений.

Первый, отображающий плавающую метку, когда пользователь вводит что-то в поле, выполняется автоматически. TextInputLayout находит EditText среди своих дочерних элементов и присоединяется к TextWatcher, поэтому его способность определять, когда поле было изменено, и оживить движение подсказки с ее обычного места в EditText до надпись над плавающей меткой над ней.

Второе улучшение, отображающее сообщение об ошибке, требует небольшого изменения кода. Вместо того, чтобы устанавливать ошибку в EditText, ошибка должна быть установлена ​​на TextInputLayout. Это потому, что для TextInputLayout нет автоматического способа уведомления, если ошибка установлена ​​на EditText. Вот как выглядит макет:

<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 требуются. Во фрагменте нам нужно настроить TextInputLayout, чтобы разрешить отображение ошибок:

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