Skip to content Skip to sidebar Skip to footer

How To Make TextInputLayout Hint Asterisk Red For Required Fields

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

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>

enter image description hereenter image description here


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>

Post a Comment for "How To Make TextInputLayout Hint Asterisk Red For Required Fields"