Руководство Android TextInputLayout
View more Tutorials:
TextInputLayout это компонент интерфейса содержащий поле ввода текста (Text Input Field) и поддерживает поле ввода текста визуально. Если EditText используется сейчас, удостоверьтесь что его android:background это @null, чтобы TextInputLayout может настроить подходящий для него фон.

Текст подсказки(hint text) автоматически появляется, когда пользователь focus в EditText.

Поле пароля (Password field) с ImageView на правой стороне позволяет отобразить пароль.

TextInputLayout это подкласс LinearLayout, поэтому он может расставлять дочерние View на одном ряду или в одном столбце. Один из его дочерних View это поле ввода текста (Text input field), например EditText, другие дочерние View играют роль визуальной поддержки.
Примечание: Вы так же можете расположить TextInputLayout сплетенно, чтобы получить более сложный компонент интерфейса.
Library:
TextInputLayout не имеется наготове в стандартной библиотеке Android, поэтому чтобы использовать его, вам нужно установить его в ваш project из Palette окна дизайна или объявить данную библиотеку вручную.

После установки данной библиотеки из Palette вы увидите как она объявлена в файле build.gradle (Module: app):

implementation 'com.google.android.material:material:1.0.0'
Текст подсказки (hint text) автоматически появляется когда пользователь focus в EditText это базовая функция поддержки у TextInputLayout, вы можете использовать его без написания дополнительных строк Java кодов.

Перетащите TextInputLayout в интерфейс, по умолчанию он будет содержать дочерний View это TextInputEditText, это класс-потомок у EditText.

<com.google.android.material.textfield.TextInputLayout android:id="@+id/textInputLayout" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="50dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Username" /> </com.google.android.material.textfield.TextInputLayout>
И это полученный результат:

Атрибуты связанные с функцией "Floating Hint" включают:
- app:hintEnabled (Default true)
- app:hintAnimationEnabled (Default true)
- app:hintTextAppearance
app:hintEnabled
Атрибут app:hintEnabled используется чтобы enable/disable (включать/выключать) функцию "Floating Hint" у TextInputLayout. Ее значение по умолчанию это true.
app:hintAnimationEnabled
Атрибут app:hintAnimationEnabled определяет появляется ли анимационный эффект при появлении текста подсказки (Hint text) или нет. Значение по умолчанию true.
app:hintTextAppearance
Настроить цвет, размер, стиль ... для текста подсказки (Hint text).

- app:hintTextAppearance="@style/TextAppearance.AppCompat.Large"
- app:hintTextAppearance="@style/TextAppearance.AppCompat.Medium"
- app:hintTextAppearance="@style/TextAppearance.AppCompat.Small"
- app:hintTextAppearance="@style/TextAppearance.AppCompat.Body1"
- app:hintTextAppearance="@style/TextAppearance.AppCompat.Body2"
- app:hintTextAppearance="@style/TextAppearance.AppCompat.Display1"
- app:hintTextAppearance="@style/TextAppearance.AppCompat.Display2"
- app:hintTextAppearance="@style/TextAppearance.AppCompat.Display3"
- app:hintTextAppearance="@style/TextAppearance.AppCompat.Display4"
- ...

TextInputLayout так же поддерживает функцию подсчета символов, это одна из часто используемых функций в приложениях.

Перетащите TextInputLayout в интерфейс, по умолчанию он содержит TextInputEditText:

Далее: Настройте значение для нескольких атрибутов TextInputLayout.
- app:counterEnabled = "true"
- app:counterMaxLength: Это необязательный атрибут для определения максимального количества символов в тексте, данное значение используется для отчетов. Пользователь так же может ввести текст с большим количеством символов.

<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ECE9E9" tools:context=".MainActivity"> <com.google.android.material.textfield.TextInputLayout android:id="@+id/textInputLayout21" app:counterEnabled="true" app:counterMaxLength="10" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="50dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Username" /> </com.google.android.material.textfield.TextInputLayout> </androidx.constraintlayout.widget.ConstraintLayout>
И результат, который вы получите:

Примечание: Используйте атрибут android:maxLength для Input Field (EditText,..) если вы хотите ограничить количество символов текста, который будет гарантированным.
Перетащите TextInputLayout в интерфейс, по умолчанию он имеет готовый TextInputEditText это дочерний View. Потом, настройте атрибут android:inputType = "textPassword" для TextInputEditText.

Настройте значения для следующих атрибутов:
- app:passwordToggleEnabled
- app:passwordToggleDrawable
- app:passwordToggleContentDescription
- app:passwordToggleTint
- app:passwordToggleTintMode

app:passwordEnabled
Атрибут app:passwordEnabled="true" необходим, чтобы вы могли включить функцию скрыть/отобразить пароль для TextInputLayout, другие атрибуты упомянутые выше являются только опциями.


<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ECE9E9" tools:context=".MainActivity"> <com.google.android.material.textfield.TextInputLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="50dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:passwordToggleEnabled="true"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Password" android:inputType="textPassword" /> </com.google.android.material.textfield.TextInputLayout> </androidx.constraintlayout.widget.ConstraintLayout>
Одна из других функций TextInputLayout это отображение Label оповещающий ошибки пользователю. Но чтобы использовать данную функцию, вам нужно написать дополнтельный Java код для управления скрытием/отображением Label.

OK, ниже является простой пример:

Интерфейс примера:

activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ECE9E9" tools:context=".MainActivity"> <com.google.android.material.textfield.TextInputLayout android:id="@+id/textInputLayout_user_name" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="24dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" app:hintTextAppearance="@style/TextAppearance.AppCompat.Medium" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> <com.google.android.material.textfield.TextInputEditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Username" /> </com.google.android.material.textfield.TextInputLayout> <EditText android:id="@+id/editText51" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_marginStart="16dp" android:layout_marginLeft="16dp" android:layout_marginTop="16dp" android:layout_marginEnd="16dp" android:layout_marginRight="16dp" android:ems="10" android:inputType="textPersonName" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/textInputLayout_user_name" /> </androidx.constraintlayout.widget.ConstraintLayout>
MainActivity.java
package com.example.inputtextlayoutexample; import android.os.Bundle; import android.text.Editable; import android.text.TextWatcher; import androidx.appcompat.app.AppCompatActivity; import com.google.android.material.textfield.TextInputLayout; public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); this.setupFloatingLabelError(); } private void setupFloatingLabelError() { final TextInputLayout textInputLayoutUserName = (TextInputLayout) findViewById(R.id.textInputLayout_user_name); textInputLayoutUserName.getEditText().addTextChangedListener(new TextWatcher() { // ... @Override public void onTextChanged(CharSequence text, int start, int count, int after) { if (text.length() == 0 ) { textInputLayoutUserName.setError("Username is required"); textInputLayoutUserName.setErrorEnabled(true); } else if (text.length() < 5 ) { textInputLayoutUserName.setError("Username is required and length must be >= 5"); textInputLayoutUserName.setErrorEnabled(true); } else { textInputLayoutUserName.setErrorEnabled(false); } } @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void afterTextChanged(Editable s) { } }); } }
Атрибут style это опция TextInputLayout, он позволяет вам настроить стиль для TextInputLayout. Имеются некоторые готовые стили в библиотеке Android, которые готовые для вашего использования.

- style="@style/Widget.Design.TextInputLayout"
- style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
- style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
- style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
- style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
- ...
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"

style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
