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?

No, I am currently planning to leave it as-is until the design library supports the red asterisk. — ProjectJourneyman, Apr 28 '16 at 23:34
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? — fobbymaster, Oct 24 '17 at 00:13
As of 09/09/2017, the material design guidelines as on this page [here](https://material.io/guidelines/components/text-fields.html#text-fields-layout) doesn't have a red color asterix, the below image from the page shows the edittext focused and unfocused states. [example](https://i.stack.imgur.com/LCdxn.png) — Navneet Singh, Sep 09 '17 at 07:28
I edited my solution with a simple way to make the asterisk red: https://stackoverflow.com/a/46450127/4433326 — Louis CAD, Feb 14 '19 at 08:07

Gabriele Mariotti · Answer 1 · 2021-01-24T13:27:23.993

26

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>

edited Jan 24 '21 at 13:27

answered May 05 '20 at 20:49

Gabriele Mariotti

320,139
94
887
841

1

This should be accepted as answer. works as expected. thanks a lot – Jayanth Aug 26 '20 at 17:20
2

for me this worked - Legal name * – Shekhar Suman Jan 15 '21 at 18:07
1

I had to change `fgcolor` with `color` and it worked for me – Zohab Ali Jan 24 '21 at 09:26
1

how to programmatically add the asterisk without placing it manually in resource file? – Nurkartiko Jun 11 '21 at 03:14

Louis CAD · Answer 2 · 2019-02-14T08:07:12.413

23

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.
    }
}

edited Feb 14 '19 at 08:07

answered Sep 27 '17 at 14:10

Louis CAD

10,965
2
39
58

Hi please give me your ans android using java. i will require this type of TextInputLayout using. – mujjuraja Nov 16 '17 at 14:00
3

@mujjuraja It's much uglier in Java, I recommend you [try.kotl.in](https://try.kotl.in), but here's what you can do: `inputFirstName.setHint(inputFirstName.getHint() + " *")` – Louis CAD Nov 16 '17 at 15:03
6

for TextInputLayout, the star shows, but it is not red for me. :( – Eric Nov 28 '19 at 00:28
1

Maybe they disabled changing the text color altogether in a recent version. – Louis CAD Nov 28 '19 at 13:30

score 3 · Answer 3 · answered Jun 05 '17 at 10:51

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

it work programmatically, just need to wrap into function – Nurkartiko Jun 11 '21 at 03:30 — Nurkartiko, Jun 11 '21 at 03:30

score 2 · Answer 4 · answered Dec 08 '16 at 11:12

2

 <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

answered Dec 08 '16 at 11:12

Dhara Patel

359
5
19

See [the material example](https://material.google.com/style/color.html#color-color-schemes), there is a chapter on this. You should add those information in your answer. But this might change more things than expected. – AxelH Dec 08 '16 at 11:16

Zon · Answer 5 · 2020-09-11T15:20:00.287

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>

score 0 · Answer 6 · answered Jan 30 '21 at 06:58

0

This worked for me

textinputlayout.setHint(Html.fromHtml("Project Title <font color =\"#cc0029\" >*</font>"));

answered Jan 30 '21 at 06:58

Amitoj

171
2
15

Anantha Babu · Answer 7 · 2016-12-08T11:42:05.890

-1

Yes Its possible , because i am doing same thing in my current application. and for focus and unfocus you have to do some logic to remove asterisk.

String mm = "Legal first name";
Spannable WordtoSpan = new SpannableString(mm);
WordtoSpan.setSpan(
        new ForegroundColorSpan(Color.parseColor("#e62e6c")), 
        16, 
        mm.length(), 
        Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
WordtoSpan.setSpan(new RelativeSizeSpan(0.9f), 16, mm.length(), 0);
view.setText(WordtoSpan);

edited Dec 08 '16 at 11:42

answered Dec 08 '16 at 11:27

Anantha Babu

216
2
14

nope can't do it with an TextInputLayout: https://code.google.com/p/android/issues/detail?id=197889 – Roubachof Jan 04 '17 at 09:38

score -1 · Answer 8 · answered May 24 '17 at 06:26

I have been through the same process and it worked for me

 TextView text = (TextView) rootView.findViewById(R.id.name_textview);

 SpannableStringBuilder builder1 = setStarToLabel("Name");

 text.setText(builder1);

  @NonNull
private SpannableStringBuilder setStarToLabel(String text) {
    String simple = text;
    String colored = "*";
    SpannableStringBuilder builder = new SpannableStringBuilder();
    builder.append(simple);
    int start = builder.length();
    builder.append(colored);
    int end = builder.length();
    builder.setSpan(new ForegroundColorSpan(Color.RED), start, end, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    return builder;
}

This logic is applied to TextView not the TextInputLayout that is required — Jutikorn, Feb 20 '18 at 04:25

How to make TextInputLayout hint asterisk red for required fields

8 Answers8

Linked

Related