Android™

Android TextInputLayout

TextInputLayout was introduced to display the floating label on EditText. The EditText has to be wrapped by TextInputLayout in order to display the floating label.

Basic usage

It is the basic usage of the TextInputLayout.
Make sure to add the dependency in the build.gradle file as described in the remarks section.

Example:

<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>

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:

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>

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>

Handling Errors

You can use the TextInputLayout to display error messages according to the material design guidelines using the setError and setErrorEnabled methods.

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:

Android TextInputLayout
Android TextInputLayout

Customizing the appearance of the TextInputLayout

You can customize the appearance of the TextInputLayout and its embedded EditTextby defining custom styles in
your styles.xml. The defined styles can either be added as styles or themes to your TextInputLayout.

Example for customizing the hint appearance:

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>

To Apply Style update your TextInputLayout And EditText as follows

<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>

Example to customize the accent color of the TextInputLayout. The accent color affects the color of the baseline of the EditText and the text color for the floating hint text:

styles.xml:

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

layout file:

<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>

TextInputEditText

The TextInputEditText is an EditText with an extra fix to display a hint in the IME when in ‘extract’ mode.

The Extract mode is the mode that the keyboard editor switches to when you click on an EditText when the space is too small (for example landscape on a smartphone).

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>

Source
Android™ Notes for Professionals book
Tags

Ahmed Mohamed Abd ElMajeed

Web developer and Server Administrator, Founder of Akwad web School and Programmer Notes.

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Close
Close

Adblock Detected

Please consider supporting us by disabling your ad blocker