Cодержание

Android TextInputLayout
Floating Hint
Character Counting
Password Visibility Toggle
Floating Label Error
TextInputLayout Styles

Pуководства Android

Руководство Android TextInputLayout

View more Tutorials:

Pуководства Android

Android TextInputLayout
Floating Hint
Character Counting
Password Visibility Toggle
Floating Label Error
TextInputLayout Styles

1- Android TextInputLayout

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

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

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

Руководство Android LinearLayout

Руководство Android EditText

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'

2- Floating Hint

Текст подсказки (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"
...

3- Character Counting

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,..) если вы хотите ограничить количество символов текста, который будет гарантированным.

4- Password Visibility Toggle

Перетащите 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>

5- Floating Label Error

Одна из других функций 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) {

            }
        });
    }
}

Руководство Android TextWatcher

6- TextInputLayout Styles

Атрибут 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"

View more Tutorials:

Pуководства Android