Multicolored edittext hint in TextInputLayout

Question

Is there a way to set multiple colors to the EditText hint when wrapped by android.support.design.widget.TextInputLayout without compromising the behavior of floating EditText Hint?

** e.g:** Headline* 'Headline' in black color and '*' in red

Literally, my question is an exact duplicate of this question: Multicolored edittext hint .

I am posting it again because there is no valid answer to that question. (Please don't mark my question as a duplicate to that one !!)

I have tried the answer given there an this was the outcome :

You can see that the floating property of the TextInputLayout is no longer applicable. (Want hint to float like this)

Is there anyway to maintain the behaviour of the TextInputLayout EditText with multi-color hint?

Code:

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingEnd="16dp"
        android:paddingStart="16dp"
        android:paddingTop="16dp">

        <EditText
            android:id="@+id/appointment_patient_name_et_id"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:inputType="textPersonName"
            android:textColor="@color/colorAccent" />

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

Attempt to set multi-color hint :

 appointment_patient_name_et = findViewById(R.id.appointment_patient_name_et_id);
 Spannable wordtoSpan = new SpannableString("Hello world");
 wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 2, 6, 
 Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
 appointment_patient_name_et.setHint(wordtoSpan);

Edit 1: After using git library suggested by ADM...

.java :

MaterialEditText appointment_patient_name_et;

appointment_patient_name_et = findViewById(R.id.appointment_patient_name_et_id);

//  Multicolor hint
final Spannable spannable1 = new SpannableString("Patient's Name *");
spannable1.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.colorPrimary)), 0,
                spannable1.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannable1.setSpan(new ForegroundColorSpan(Color.RED),
                spannable1.length() - 1, spannable1.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

Spannable spannable2 = new SpannableString("Patient's Name *");
spannable2.setSpan(new ForegroundColorSpan(getResources().getColor(R.color.colorAccent)), 0,
                spannable2.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
spannable2.setSpan(new ForegroundColorSpan(Color.RED),
                spannable2.length() - 1, spannable2.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

appointment_patient_name_et.setHint(spannable1);
appointment_patient_name_et.setFloatingLabelText(spannable2);
appointment_patient_name_et.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            appointment_patient_name_et.setFloatingLabelAlwaysShown(true);
            appointment_patient_name_et.setHint("");
        } else {    
            appointment_patient_name_et.setFloatingLabelAlwaysShown(false);
            appointment_patient_name_et.setHint(spannable1);
        }
    }
});

.xml:

<com.rengwuxian.materialedittext.MaterialEditText
    android:id="@+id/appointment_patient_name_et_id"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginEnd="32dp"
    android:layout_marginStart="32dp"
    android:layout_marginTop="16dp"
    android:hint="Patient's Name *"
    app:met_baseColor="@color/colorAccent"
    app:met_clearButton="true"
    app:met_floatingLabel="highlight"
    app:met_floatingLabelTextColor="@color/colorAccent"
    app:met_primaryColor="@color/colorAccent"
    app:met_singleLineEllipsis="true"
    app:met_textColor="@color/colorAccent"
    app:met_textColorHint="@color/colorPrimary" />

Output :
Without gaining focus :

After gaining focus :

Is there any way to make the asterisk in the floating hint in a different color than the floating hint color?

Answer 1

You can use android.support.design.widget.TextInputEditText.

 <android.support.design.widget.TextInputLayout
     android:id="@+id/textInput"        
     android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingEnd="16dp"
    android:paddingStart="16dp"
    android:paddingTop="16dp">

    <android.support.design.widget.TextInputEditText
        android:id="@+id/et2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp"
        android:inputType="textPersonName"
        android:textColor="@color/colorAccent" />

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

And set the span to Edittext.

TextInputLayout textInput = findViewById(R.id.textInput);
    Spannable wordtoSpan = new SpannableString("Hello world");
    wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 2, 6,
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    textInput.setHint(wordtoSpan);

    EditText et2=findViewById(R.id.et2);
    et2.setHint(wordtoSpan);

This will make Hint float-able. Hint will float with the color defined in style by default colorAccent. if you want to keep the color of Floated Hint as Spannable . Thats not so trivial i think.

If above answer does not work for you . Also i could not make work maybe it its quite trivial but i can not figure out right now. As a Solution you can try https://github.com/rengwuxian/MaterialEditText. I have tested it its working as needed i guess . try it like :

 <com.rengwuxian.materialedittext.MaterialEditText
    android:id="@+id/et3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textSize="20sp"
    app:met_textColor="@android:color/black"
    app:met_baseColor="@android:color/black"
    app:met_floatingLabel="highlight"
    app:met_maxCharacters="20"
    app:met_floatingLabelTextColor="@color/colorAccent"
    android:layout_margin="7dp"
    app:met_primaryColor="@color/colorAccent"
    app:met_singleLineEllipsis="true"
    />

And set the hint as :

Spannable wordtoSpan = new SpannableString("Hello world");
    wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLACK), 0, wordtoSpan.length(),
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    wordtoSpan.setSpan(new ForegroundColorSpan(Color.BLUE), 2, 6,
            Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    MaterialEditText et3=findViewById(R.id.et3);
    et3.setFloatingLabelText(wordtoSpan);
    et3.setHint(wordtoSpan);