How to make TextInputLayout hint asterisk red for required fields

Question

Is it possible to make just the asterisk in the hint red when using a TextInputLayout from the design support library? I have seen information on styling the entire hint, but this is a little more complex since only the * should be red, not the whole message.

The Material Design example shows this, but the design library doesn't seem to have any option to style it this way using a TextInputLayout and EditText.

Reference: https://www.google.com/design/spec/components/text-fields.html#text-fields-required-fields

Example (the top, with focus, has the red asterisk; the bottom without focus does not have a red asterisk):

I looked into setting the hint to a SpannableString (see here How to get a red asterisk in a <string> entry) in an OnFocusChangeListener (see here Having the mandatory symbol to the edit text (red color asterisk) which is inside the textinputlayout), but the hint is a CharSequence.

Is there any way to do this without extending TextInputLayout?

Solution 1

Material Design specify an asterisk for the required fields that is part of the hint text, and of the same color (not in red like you showed in your question).

In Kotlin this is really simple:

1.Define this extension method:

fun TextInputLayout.markRequired() {
    hint = "$hint *"
}

2.Use it:

input_first_name.markRequired()

If you still want the asterisk red, despite being discouraged by Material Design guidelines, you can use AndroidX Core KTX that way:

fun TextInputLayout.markRequiredInRed() {
    hint = buildSpannedString {
        append(hint)
        color(Color.RED) { append(" *") } // Mind the space prefix.
    }
}

Solution 2

You can use the Material Components Library.
Starting from the 1.2.0-alpha05 you can format the hint text.

For example you can just use something like:

<com.google.android.material.textfield.TextInputLayout
    android:hint="@string/hint_test"
    ...>

with:

<string name="hint_test">Legal name <font color='#FF0000'>*</font></string>

Solution 3

Could you be adding a spanned string From Html?

   String grey = "Legal first name*";
   Spanned redStar;
   String html = "<string style="color:grey;">Legal first name<span style="color:red;">*</span></string>";

   if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.N) {
   redStar = Html.fromHtml(html,Html.FROM_HTML_MODE_LEGACY);
   } else {
   redStar = Html.fromHtml(html);
   }

And change the hint upon focus.

   textInput.setOnFocusChangeListener(new View.OnFocusChangeListener() {
   public void onFocusChange(View v, boolean hasFocus) {
    if (hasFocus)
        myEditText.setHint(redStar.toString);
    else
        myEditText.setHint(grey);
}

Solution 4

 <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/black</item>
</style>

change you theme colorAccent and see

Solution 5

Change TextInputLayout hint by adding a 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>

View more solutions

Comments

[praj]

did you find any solution?

[ProjectJourneyman]

No, I am currently planning to leave it as-is until the design library supports the red asterisk.

[Navneet Singh]

As of 09/09/2017, the material design guidelines as on this page here doesn't have a red color asterix, the below image from the page shows the edittext focused and unfocused states. example

[fobbymaster]

When I use this, the bar's don't show up for my under the EditText. Did you do anything special to make it show up?

[Charmi]

did you find any solution?

[Louis CAD]

I edited my solution with a simple way to make the asterisk red: stackoverflow.com/a/46450127/4433326

[AxelH]

See the material example, there is a chapter on this. You should add those information in your answer. But this might change more things than expected.

[Roubachof]

nope can't do it with an TextInputLayout: code.google.com/p/android/issues/detail?id=197889

[mujjuraja]

Hi please give me your ans android using java. i will require this type of TextInputLayout using.

[Louis CAD]

@mujjuraja It's much uglier in Java, I recommend you try.kotl.in, but here's what you can do: inputFirstName.setHint(inputFirstName.getHint() + " *")

[Jutikorn]

This logic is applied to TextView not the TextInputLayout that is required

[Eric]

for TextInputLayout, the star shows, but it is not red for me. :(

[Louis CAD]

Maybe they disabled changing the text color altogether in a recent version.

[Jayanth]

This should be accepted as answer. works as expected. thanks a lot

[Shekhar Suman]

for me this worked - <string name="hint_test">Legal name <font color='#FF0000'>*</font></string>

[Zohab Ali]

I had to change fgcolor with color and it worked for me

[Nurkartiko]

how to programmatically add the asterisk without placing it manually in resource file?

[Nurkartiko]

it work programmatically, just need to wrap into function