Friday, June 24, 2022
HomeAndroid Studio For Beginners 2020TextInput Layout in Android Studio

TextInput Layout in Android Studio

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:

TextInput Layout

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>

Learn more about TextInput Layout.

Read about TextView in android studio

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -

Most Popular

Recent Comments

KU NUR RASYIDAH BINTI KU BIDE on Custom Calendar View Android | Project Java Files
SHIVANT KUMAR PANDEY on Login And Registration by Firebase
Adriane Troy U. Alariao on Custom Calendar View With Events Android