Textinputlayout usage details

TextInputLayout Basic style 、 Error message 、 Word limit, etc

design sketch ：

【2020-12-13】Theme Switch to MaterialComponents after , There are some changes , Such as default background 、 Default padding etc. , Specific changes can be made github see .

Layout file

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:counterEnabled="true"
        app:counterMaxLength="3"
        app:counterOverflowTextAppearance="@style/MyOverflowText"
        app:errorEnabled="true"
        app:errorTextAppearance="@style/MyErrorText"
        app:hintTextAppearance="@style/MyHintText"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/include">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_name"
            android:theme="@style/MyEditText" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/til_password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/til_name"
        app:passwordToggleEnabled="true"
        app:passwordToggleTint="@color/colorPrimary">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/hint_password"
            android:inputType="textPassword" />
    </android.support.design.widget.TextInputLayout>

Copy

1、 Change the default style

• style：

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

    <!--Input field style-->
    <style name="MyEditText" parent="Theme.AppCompat.Light">
        <item name="colorControlNormal">@color/gray</item>
        <item name="colorControlActivated">@color/colorPrimary</item>
        <item name="android:textSize">18sp</item>
    </style>

Copy

• And then set the

TextInputLayout：

app:hintTextAppearance="@style/MyHintText"

Copy

TextInputEditText：

android:theme="@style/MyEditText"

Copy

2、 Error prompt style and code settings

• style：

    <!--Error label text style-->
    <style name="MyErrorText" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">@color/red</item>
    </style>

Copy

• Then set the

    app:errorEnabled="true"
    app:errorTextAppearance="@style/MyErrorText"

Copy

Code control , Set input listening

mEtName.addTextChangedListener(mTextWatcher);

---------------------------------------------

private TextWatcher mTextWatcher = new TextWatcher() {
        @Override
        public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) {

        }

        @Override
        public void afterTextChanged(Editable editable) {
            if (mTilName.getEditText().getText().length() > mTilName.getCounterMaxLength())
                mTilName.setError(" The input exceeds the upper limit ");//show
            else
                mTilName.setError(null);//hide
        }
    };

Copy

3、 Word limit

• style：

    <!--Overflow label text style-->
    <style name="MyOverflowText" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">@color/orange</item>
    </style>

Copy

• Then set the

    app:counterEnabled="true"
    app:counterMaxLength="3"
    app:counterOverflowTextAppearance="@style/MyOverflowText"

Copy

You can understand the literal meaning of the word , Let's not explain them one by one ..

Above “ Error message ” in , There is a judgment that

if (mTilName.getEditText().getText().length() > mTilName.getCounterMaxLength())

Copy

• mTilName yes TextInputLayout,getEditText() Method to get child controls TextInputEditText.
• getCounterMaxLength() Method to get the maximum word limit .

4、 Password style

• First set up TextInputEditText

android:inputType="textPassword"

Copy

• Then set the TextInputLayout

app:passwordToggleEnabled="true"
app:passwordToggleTint="@color/colorPrimary"

Copy

• app:passwordToggleTint Is to change the color of the icon
• Change icon yes app:passwordToggleDrawable

app:passwordToggleDrawable="@drawable/ic_password"

Copy

github：

https://github.com/yechaoa/MaterialDesign