Material3 TextInputLayout

XML


<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="horizontal"
	tools:context=".MainActivity"> 

	<com.google.android.material.textfield.TextInputLayout
		style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense"
		android:layout_width="match_parent"
		android:layout_height="wrap_content"
		android:hint="Enter password"
		app:endIconMode="password_toggle"> 

		<com.google.android.material.textfield.TextInputEditText
			android:layout_width="match_parent"
			android:layout_height="wrap_content" /> 

	</com.google.android.material.textfield.TextInputLayout> 

</LinearLayout>

Attributes of TextInputLayouts:

Now let’s we discuss some common attributes of a TextInputLayout that helps us to configure it in our layout (xml).

1. support.design:counterMaxLength: This attribute is used to set the max length to display in the character counter. In this attribute we set int type value for setting max length value. We can also do this programmatically using setCounterMaxLength(int maxLength) method.

2. support.design:counterEnabled: This attribute is used to set whether the character counter functionality is enabled or not in this layout. We set true for enabled and false for disabled the counter functionality. We can also do this programmatically using setCounterEnabled(boolean enabled) method.

3. support.design:errorEnabled: This attribute is used to set whether the error functionality is enabled or not in this layout. We set true for enabled and false for disabled error functionality. We can also do this programmatically using setErrorEnabled(boolean enabled) method.

4. android:hint: This attribute is used to set the hint to be displayed in the floating label. We can also set hint programmatically using setHint(CharSequence hint) method.

Below we set the true value that enabled the error functionality.


<android.support.design.widget.TextInputLayout
android:id="@+id/simpleTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android.support.design:counterEnabled="true"
android.support.design:counterMaxLength="10"
android:hint="User Name"
android.support.design:errorEnabled="true">

<EditText
android:id="@+id/simpleEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter Your Name" />
</android.support.design.widget.TextInputLayout>
<!-- set the true value that enabled the error functionality in this layout-->

Another Example of custom INPUT BOX Using TextInputLayout And TextInputEditText


<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Username"
        android:textColorHint="#302B63"
        app:boxBackgroundColor="#4D626970"
        app:boxBackgroundMode="outline"
        app:boxCornerRadiusBottomStart="15dp"
        app:boxCornerRadiusTopEnd="15dp"
        app:boxStrokeColor="@drawable/text_input_outline"
        app:boxStrokeWidthFocused="3dp"
        app:endIconMode="clear_text"
        app:endIconTint="#302B63"
        app:errorEnabled="true"
        app:helperTextTextColor="@android:color/holo_red_light"
        app:hintTextColor="#302B63">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inputType="textAutoCorrect"
            android:textColor="#B3000000" />

    </com.google.android.material.textfield.TextInputLayout>


//  text_input_outline.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:color="#302B63" />
    <item android:state_focused="false" android:color="#05FFFFFF" />
    <item android:color="#05FFFFFF" />
</selector>