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

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 2

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.