Having the mandatory symbol to the edit text (red color asterisk) which is inside the textinputlayout

Question

I have an edit text inside a textinputlayout. I am trying to set the mandatory field symbol (red color asterisk) to the edittext. I have set the hint to the edit text. My code is as below.

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="16dp"
        android:orientation="horizontal">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:text=" * "
            android:layout_gravity="center_vertical"

            android:textColor="#ff0000"
            android:textSize="15sp" />
        <android.support.design.widget.TextInputLayout

            android:id="@+id/tilEngNo"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            >

              <EditText
                android:id="@+id/engineno"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginLeft="15dp"
            android:layout_marginRight="16dp"
                android:hint="Engine No" />
        </android.support.design.widget.TextInputLayout>
    </LinearLayout>

This gives me the asterisk symbol outside the textinputlayout. So when I start typing in the edit text, the hint floats up, but not the asterisk symbol. My requirement is to make the asterisk symbol to behave as same as the hint of the edittext. What is the best approach?. Any help is appreciated. Thanks in advance

Answer 1

Suppose you have EditTexts for mandatory values. You want the hint to be a red asterisk followed by the text in light grey.

After the EditTexts you have the explanation: TextView with red asterisk followed by text " = field is required"

In my case I used this this:

showEditTextsAsMandatory ( joinEmailET, joinNameET, passwordET, confirmPasswordET );
showTextViewsAsMandatory ( ( TextView ) findViewById ( R.id.requiredText ) );

public void showEditTextsAsMandatory ( EditText... ets )
{
    for ( EditText et : ets )
    {
        String hint = et.getHint ().toString ();

        et.setHint ( Html.fromHtml ( "<font color=\"#ff0000\">" + "* " + "</font>" + hint ) );
    }
}

public void showTextViewsAsMandatory ( TextView... tvs )
{
    for ( TextView tv : tvs )
    {
        String text = tv.getText ().toString ();

        tv.setText ( Html.fromHtml ( "<font color=\"#ff0000\">" + "* " + "</font>" + text ) );
    }
}

Answer 2

You can do this using a small trick , i.e you have to change layout_gravity when OnFocusChangeListener called in Java code. Example:

//Set OnFocusChangeListener for EditText
edittext.setOnFocusChangeListener(new View.OnFocusChangeListener() {
            @Override
            public void onFocusChange(View view, boolean hasFocus) {
                //astriskText is Object of your textview contains * as text
                if (hasFocus) {
                    //if edittext has focus then move it to top
                    LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) astriskText.getLayoutParams();
                    lp.gravity= Gravity.TOP;
                    astriskText.setLayoutParams(lp);
                } else if(edittext.getText().toString().length()==0){
                    //else check if edittext is empty then move it back to center
                    LinearLayout.LayoutParams lp = (LinearLayout.LayoutParams) astriskText.getLayoutParams();
                    lp.gravity= Gravity.CENTER_VERTICAL;
                    astriskText.setLayoutParams(lp);
                }
            }
        });

Answer 3

Try joining your TextInputLayout hint with spanned postfix wrapped in html:

public void setRequired(boolean required) {

  componentField.setHint(
    TextUtils.concat(
      componentField.getHint(),
      Html.fromHtml(
        getContext().getString(
          R.string.required_asterisk))));
}

Asterisk code should be stored in android strings.xml for correct escaping:

<string name = "required_asterisk"><![CDATA[<font color=\'#cc0029\'>&nbsp*</font>]]></string>