Android Practice manual – TextInputLayout use learning

“This is the 15th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

👉 About the author

As we all know, life is a long process of constantly overcoming difficulties and reflecting on progress. In this process, there will be a lot of questions and thoughts about life, so I decided to share my thoughts, experiences and stories to find resonance!!

Focus on Android/Unity and various game development tips, as well as various resource sharing (websites, tools, materials, source code, games, etc.)

Welcome to pay attention to the public account [Mr. Empty name] for more resources and communication!

👉 premise

This is small empty insist to write Android novice series, welcome to taste.

Big guy (×)

Novice (√)

👉 Practice

We learned EditText control, and used it to do a captcha function, think this is done?

It didn’t.

Android introduced the Materia Design library Design after 5.0, and now the Jetpack UI library Design. Help developers more efficient implementation of cool UI interface, reduce the development threshold.

We’ll talk about Jetpack later. We’ll continue with EditText and start with TextInputLayout from Materia Design.

TextInputEditText or EditText is nested within a TextInputLayout so that the message hit can be animated (float up as a title), count/password visible, and so on. Layout code

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Please enter user name">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="60dp"
    android:hint="Please enter your password">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
Copy the code

This simply achieves an effect. We are going further to add some attributes:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Please enter user name"
    app:hintAnimationEnabled="false">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number" />
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="60dp"
    android:hint="Please enter your password"
    app:counterEnabled="true"
    app:counterMaxLength="10"
    app:passwordToggleEnabled="true">

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
Copy the code

As can be seen from the running result, after setting the word limit, the maximum word and the current input word are automatically displayed in the lower right corner of the edit box (real-time change with the input situation), and the color style is changed

😜 Properties

App: boxCollapsedPaddingTop Settings to edit the text at the top of the frame mode folded fill the value of the app: boxStrokeErrorColor in display an error when set the stroke color outline box. App: set the width of the stroke boxStrokeWidth app: boxStrokeWidthFocused set the stroke width of the app get focus box: whether counterEnabled display counter app: counterMaxLength Set a maximum of counter, used in conjunction with counterEnabled app: counterTextAppearance counter font style app: counterOverflowTextAppearance character input is greater than the font style when we limit the number of characters App :errorEnabled Whether to display error messages App :errorTextAppearance Font style of error messages app:endIconCheckable Whether to display the end icon App: endIconContentDescription to end the icon set description app: end endIconDrawable Settings icon image app: endIconMode mode Settings app: endIconTintMode mixed mode is specified, Use to apply the specified hue to a drawable closing icon. App :helperText Set help text app:helperTextEnabled Set whether to activate help text app:helperTextTextColor Set help text color app:hintAnimationEnabled Whether to display the hint animation, default true app:hintEnabled whether to use the Hint attribute, default True app:hintTextAppearance Sets the hint text style. Drawable pictures, app: passwordToggleDrawable password switch in passwordToggleEnabled at the same time use the app: passwordToggleEnabled Whether to show the password switch pictures, need to set the EditText inputType app: passwordToggleTint password switch picture color app: passwordToggleTintMode Set the password switch picture (mixed color mode) to be used with passwordToggleTint

👉 other

📢 author: Kom and Kom in Kom

📢 reprint instructions – be sure to specify the source: Zhim Granular’s personal home page – column – Nuggets (juejin. Cn)

📢 the road friend please stay ☁️, I see you extraordinary, talk between the faint king imperious 💚, in the future will have a great as 📝!! Next to a little like 👍 collect 🌟 pass you today, point it, in the future you successful ☀️, I do not take a cent, if not successful ⚡ 🌟, or come back to me.