In this article we will how to work with TextInput Layout in android studio. We need to use TextInput Layout to display the floating label on EditText. Furthermore TextInputLayout wraps an EditText in order to display the floating label. Moreover, it supports showing the error and error icon.
The TextInput Layout uses TextInputEditText as a child layout. Using TextInputEditText instead of an EditText provides accessibility support for the text field and allows TextInputLayout greater control over the visual aspects of the text field. An example usage is as so:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/form_username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
TextInput Layout for Password Visibility Toggles
With an input password type, you can also enable an icon that can show or hide the entire text using the passwordToggleEnabled attribute.
You can also customize same default using these attributes:
passwordToggleDrawable: to change the default eye icon
passwordToggleTint: to apply a tint to the password visibility toggle drawable.
passwordToggleTintMode: to specify the blending mode used to apply the background tint.
Example:
<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>
TextInput Layout for Adding Character Counting
The TextInputLayout has a character counter for an EditText defined within it. The counter will be rendered below the EditText. Just use the setCounterEnabled() and setCounterMaxLength methods:
TextInputLayout til = (TextInputLayout) findViewById(R.id.username);
til.setCounterEnabled(true);
til.setCounterMaxLength(15);
or the app:counterEnabled and app:counterMaxLength attributes in the xml.
<android.support.design.widget.TextInputLayout
app:counterEnabled="true"
app:counterMaxLength="15">
<EditText/>
</android.support.design.widget.TextInputLayout>
TextInput Layout for Handling Errors
You can use the TextInputLayout to display error messages according to the material design guidelines using the setError and setErrorEnabledmethods. In order to show the error below the EditText use:
TextInputLayout til = (TextInputLayout) findViewById(R.id.username);
til.setErrorEnabled(true);
til.setError("You need to enter a name");
To enable error in the TextInputLayout you can eithr use app:errorEnabled=”true” in xml or
til.setErrorEnabled(true); as shown above.
You will obtain:
TextInputEditText
The TextInputEditText is an EditText with an extra fix to display a hint in the IME when in ‘extract’ mode. Moreover, the Extract mode is the mode that the keyboard editor switches to when you click on an EditText when the space is too small.
In this case, using an EditText while you are editing the text you can see that the IME doesn’t give you a hint of what you’re editing. The TextInputEditText fixes this issue providing hint text while the user’s device’s IME is in Extract mode.
Example:
<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>