Show Helper text below EditText along with the Hint

Question

I am trying to make something on these lines:

I am able to show the hint using android:hint="Email Address" but unable to show the helper text - This will be your email username

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/et_username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:ems="15"
            android:hint="Username"
            app:et_helper="Username is preferably your registered email"/>

    </android.support.design.widget.TextInputLayout>`

What I am getting is only and no Username is preferably your registered email below edittext:

Output:

Any pointers appreciated. Thank you.

Answer 1

Full XML with TextInputLayout OutlinedBox style and TextInputEditText

       <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/til_customer_no"
            style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_marginLeft="5dp"
            android:layout_marginEnd="5dp"
            android:layout_marginRight="5dp"
            android:padding="3dp"
            app:helperTextEnabled="true"
            app:helperText="* Enter customer number that will be used">

            <!--android:maxLength="13"-->
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/et_customer_no"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Customer No"
                android:inputType="number" />

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

Answer 2

You can simply use app:helperText attribute in TextInputLayout (with library com.google.android.material:material:1.2.1) in this way:

<com.google.android.material.textfield.TextInputLayout
        ...
        android:hint="Email Address"
        app:helperText="This will be your email username">

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

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

or in programmatically (kotlin) way:

textInputLayout.helperText = "This will be your email username"

Answer 3

With Design Support Library 28 , an inbuilt helper Text feature is added in TextInputLayout.

 implementation 'com.android.support:design:28.0.0'

Now enable error using xml or programmatically

 textInputLayout.isHelperTextEnabled=true
 textInputLayout.error="Email can not be Empty!!!"

Also , hint and error can together be used now!!!

Example

et.setOnFocusChangeListener { v, b ->
            if (b) {
                textInputLayout.helperText = "yourhelperText"

            } else {
                textInputLayout.helperText = null
                if(et.text.toString()==""){    // or any other validation
                    textInputLayout.error="Email can not be Empty!!!"
                }
            }

TextInputLayout | Android Developers

EDIT Don't forget to enable error and helperText via xml or programatically.

Answer 4

The Helper Text is not provided by TextInputLayout. However, the article below has a working example of it. It uses a class that extends from TextInputLayout by adding HelperText as another indicator to the class, working along side with the ErrorText.

https://medium.com/@elye.project/material-login-with-helper-text-232472400c15#.vm28p662v

Answer 5

So what you want is this:

Helper Text

You can achieve this by using this library:

https://github.com/rengwuxian/MaterialEditText

You can set the "helper text" attribute to show the text below the line and the "hint" to show the text above the line. Below is the sample layout for the attached picture

<com.rengwuxian.materialedittext.MaterialEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword"
        app:met_floatingLabel="normal"
        app:met_helperText="Must contain at least 8 characters"
        app:met_helperTextAlwaysShown="true"/>

Answer 6

The best way is to use TextInputLayout. Google introduced it in new design library. In order to use the TextInputLayout you have to add the following to your build.gradle dependencies:

compile 'com.android.support:design:22.2.0'

Then use it in your xml files:

<android.support.design.widget.TextInputLayout
android:id="@+id/textInputLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content">

<EditText
    android:id="@+id/editText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:hint="Enter your name"/>
</android.support.design.widget.TextInputLayout>

You can set your text by setting error true. Altough it is for showing errors but it is suitable for your use. You can change color and typeface if you want.

TextInputLayout til = (TextInputLayout)    findViewById(R.id.textInputLayout);
til.setErrorEnabled(true);
til.setError("You need to enter a name");

Answer 7

I had similar question asked here. If you want to keep two EditText views together closed vertically in LinearLayout, I think there is no way. One way, I think, is you can set the android:gravity of top EditText to 'bottom' and 'top' to the lower EditText. But in RelativeLayout, This should be easy.

TextInputLayout can be used if you want to show the hint text (on top of EdiText) even while user typing it. Usually with setting hint to EditText would not work this way. Hint text would disappear after the view is focussed by touching it.