Android
TextInputLayout

Вступление

замечания

compile 'com.android.support:design:25.3.1'

Основное использование

Это основное использование TextInputLayout .
Обязательно добавьте зависимость в файле build.gradle как описано в разделе примечаний.

Пример:

 <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:hint="@string/username"/>
 
 </android.support.design.widget.TextInputLayout>

Обработка ошибок

Вы можете использовать TextInputLayout для отображения сообщений об ошибках в соответствии с рекомендациями по разработке материалов с использованием методов setError и setErrorEnabled .

Чтобы показать ошибку ниже использования EditText:

TextInputLayout til = (TextInputLayout) findViewById(R.id.username);
til.setErrorEnabled(true);
til.setError("You need to enter a name");

Чтобы включить ошибку в TextInputLayout вы можете использовать app:errorEnabled="true" в xml или til.setErrorEnabled(true); как показано выше.

Вы получите:

Добавление подсчета символов

TextInputLayout имеет счетчик символов для EditText, определенных внутри него.
Счетчик будет отображаться ниже EditText.

Просто используйте setCounterEnabled() и setCounterMaxLength :

TextInputLayout til = (TextInputLayout) findViewById(R.id.username);
til.setCounterEnabled(true);
til.setCounterMaxLength(15);

или app:counterEnabled и app:counterMaxLength в xml.

<android.support.design.widget.TextInputLayout
    app:counterEnabled="true"
    app:counterMaxLength="15">

    <EditText/>

</android.support.design.widget.TextInputLayout>

Переключатели просмотров

С типом ввода пароля вы также можете включить значок, который может отображать или скрывать весь текст, используя атрибут passwordToggleEnabled .

Вы также можете настроить тот же параметр по умолчанию, используя следующие атрибуты:

• passwordToggleDrawable : изменить значок глаз по умолчанию
• passwordToggleTint : применить оттенок к видимости пароля для переключения.
• passwordToggleTintMode : указать режим наложения, используемый для применения фонового оттенка.

Пример:

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleContentDescription="@string/description"
        app:passwordToggleDrawable="@drawable/another_toggle_drawable"
        app:passwordToggleEnabled="true">

            <EditText/>

</android.support.design.widget.TextInputLayout>

TextInputEditText

TextInputEditText - это EditText с дополнительным исправлением, чтобы отображать подсказку в IME в режиме «extract» .

Режим Extract - это режим, который переключает редактор клавиатуры, когда вы нажимаете EditText, когда пространство слишком мало (например, пейзаж на смартфоне).
В этом случае, используя EditText во время редактирования текста, вы можете видеть, что IME не дает вам намека на то, что вы редактируете

TextInputEditText исправляет эту проблему, предоставляя текст подсказки, в то время как IME устройства пользователя находится в режиме Extract.

Пример:

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Description"
    >
    <android.support.design.widget.TextInputEditText
        android:id="@+id/description"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</android.support.design.widget.TextInputLayout>

Настройка внешнего вида TextInputLayout

Вы можете настроить внешний вид TextInputLayout и встроенного EditText , указав пользовательские стили в ваших styles.xml . Определенные стили могут быть добавлены как стили или темы в TextInputLayout .

Пример настройки отображения подсказки:

styles.xml :

<!--Floating label text style-->  
<style name="MyHintStyle" parent="TextAppearance.AppCompat.Small">  
    <item name="android:textColor">@color/black</item>
</style>

<!--Input field style-->  
<style name="MyEditText" parent="Theme.AppCompat.Light">  
    <item name="colorControlNormal">@color/indigo</item>
    <item name="colorControlActivated">@color/pink</item>
</style>  

Чтобы применить стиль, обновите TextInputLayout и EditText следующим образом.

<android.support.design.widget.TextInputLayout  
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:hintTextAppearance="@style/MyHintStyle">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/Title"
        android:theme="@style/MyEditText" />

</android.support.design.widget.TextInputLayout>  

Пример настройки цвета акцента TextInputLayout . Цвет акцента влияет на цвет базовой линии EditText и цвет текста для плавающего текста подсказки:

styles.xml :

<style name="TextInputLayoutWithPrimaryColor" parent="Widget.Design.TextInputLayout">
    <item name="colorAccent">@color/primary</item>
</style> 

файл макета:

<android.support.design.widget.TextInputLayout
            android:id="@+id/textInputLayout_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TextInputLayoutWithPrimaryColor">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/textInputEditText_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/login_hint_password"
                android:inputType="textPassword" />

</android.support.design.widget.TextInputLayout>