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");