How to Write Style to Error Text of Edittext in Android

How to write style to error text of EditText in android?

The solution is at the end and here is the screenshot:

Styled error


Some Explanation

You might be able to set the textcolor using the following line

yourEditText.setError(Html.fromHtml("<font color='blue'>this is the error</font>"));

However, this might not be guaranteed.


According to the source code, this Popup that shows is of type ErrorPopup which is an internal class inside TextView. The content of this Popup is a single TextView inflated from com.android.internal.R.layout.textview_hint

final TextView err = (TextView) inflater.inflate(com.android.internal.R.layout.textview_hint,
null);

The background of this Popup depends on whether it should be placed above the anchor:

if (above) {
mView.setBackgroundResource(com.android.internal.R.drawable.popup_inline_error_above);
} else {
mView.setBackgroundResource(com.android.internal.R.drawable.popup_inline_error);
}

Since all the android resources used to create the popup are internal and ultimately hard-coded, your best shot would be to create your own error popup. This would be very easy and you wouldn't really be interfering with the normal EditText because the default popup is merely used to show the error, and, thus, creating your own would be fine.


SOLUTION

I have created it here: WidgyWidgets

Design Android EditText to show error message as described by google

There's no need to use a third-party library since Google introduced the TextInputLayout as part of the design-support-library.

Following a basic example:

Layout

<android.support.design.widget.TextInputLayout
android:id="@+id/text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">

<android.support.design.widget.TextInputEditText
android:id="@+id/edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your name" />

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

Note: By setting app:errorEnabled="true" as an attribute of the TextInputLayout it won't change it's size once an error is displayed - so it basically blocks the space.

Code

In order to show the Error below the EditText you simply need to call #setError on the TextInputLayout (NOT on the child EditText):

TextInputLayout til = (TextInputLayout) findViewById(R.id.text_input_layout);
til.setError("You need to enter a name");

Result

picture showing the edit text with the error message

To hide the error and reset the tint simply call til.setError(null).


Note

In order to use the TextInputLayout you have to add the following to your build.gradle dependencies:

dependencies {
compile 'com.android.support:design:25.1.0'
}

Setting a custom color

By default the line of the EditText will be red. If you need to display a different color you can use the following code as soon as you call setError.

editText.getBackground().setColorFilter(getResources().getColor(R.color.red_500_primary), PorterDuff.Mode.SRC_ATOP);

To clear it simply call the clearColorFilter function, like this:

editText.getBackground().clearColorFilter();

How to set TextInputLayout error message colour?

Create a custom style which uses @android:style/TextAppearance as parent in your styles.xml file:

<style name="error_appearance" parent="@android:style/TextAppearance">
<item name="android:textColor">@color/red_500</item>
<item name="android:textSize">12sp</item>
</style>

And use it in your TextInputLayout widget:

 <android.support.design.widget.TextInputLayout
android:id="@+id/emailInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorTextAppearance="@style/error_appearance">

error example

Edit: Set the hint on the object, which is inside your TextInputLayout (EditText, TextView, etc.) to hold different colors for the hint and the error.

How to hide EditText error after typing on textfield?

You have to add text watcher for edit text. Then you hide Required error.
Check below example for better understanding.

<android.support.design.widget.TextInputLayout
android:id="@+id/text_input_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/Theme.AppCompat">

<EditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword"
android:padding="12dp">
</android.support.design.widget.TextInputLayout>

Then in your activity/fragment

         private EditText passwordEditText;
private TextInputPassword textInputPassword;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

/* Initializing views */
passwordEditText = (EditText) findViewById(R.id.password);
/* Set Text Watcher listener */
passwordEditText.addTextChangedListener(passwordWatcher);
textInputPassword = (TextInputLayout)
findViewById(R.id.text_input_password);
}

private final TextWatcher passwordWatcher = new TextWatcher() {
public void beforeTextChanged(CharSequence s, int start, int count, int after) {

}

public void onTextChanged(CharSequence s, int start, int before, int count) {

}

public void afterTextChanged(Editable s) {
if (s.length() == 0) {
textInputPassword.setErrorEnabled(true);
textInputPassword.setError("Password Required");
} else{
textInputPassword.setErrorEnabled(false);
textView.setText("You have entered : " + passwordEditText.getText());
}
}
};

Automatically show text of error in EditText

You can set focus to the EditText so that the user doesn't have to click on it.

editText.requestFocus()

However, this would still only show one error at a time. I believe this is probably still the best way to go since that's the way the platform implements it.

Android EditText error message popup text not showing

You need to use
style="@style/AppTheme.WhiteEditText"

Instead of android:theme="@style/AppTheme.WhiteColorAccent"

Now question is why need to use style Instead of android:theme

When you use style it apply will apply only to that view

and When you use android:theme it apply will apply view as well as all of its children.

Read more about What is the difference between style and android:theme attributes?

SAMPLE CODE

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:fitsSystemWindows="true"
android:layout_height="match_parent"
android:background="@color/colorPrimary">

<ImageView
android:id="@+id/imageView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
android:visibility="gone" />

<ProgressBar
android:id="@+id/login_progress"
style="?android:attr/progressBarStyleLarge"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:visibility="gone" />

<ScrollView
android:id="@+id/form"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginLeft="20dp"
android:layout_marginRight="20dp"
android:layout_marginBottom="20dp"
android:fillViewport="true">

<LinearLayout
android:id="@+id/linearLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:layout_marginBottom="80dp"
android:orientation="vertical">

<android.support.constraint.ConstraintLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="40dp"
android:layout_marginBottom="20dp">

<ImageView
android:id="@+id/profileImageView"
android:layout_width="160dp"
android:layout_height="160dp"
android:scaleType="fitXY"
android:src="@color/colorNavBar"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />

<android.support.design.widget.FloatingActionButton
android:id="@+id/cameraImageButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:srcCompat="@android:drawable/ic_menu_camera" />
</android.support.constraint.ConstraintLayout>

<android.support.design.widget.TextInputLayout
android:id="@+id/firstnameTvLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_weight="0.33"
android:textColorHint="@color/colorVeryLightGray"
style="@style/AppTheme.WhiteColorAccent"
>

<android.support.design.widget.TextInputEditText
android:id="@+id/firstnameTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="First Name"
android:inputType="textPersonName"
android:maxLines="1"
android:imeOptions="actionNext"
android:nextFocusDown="@id/lastnameTv"
android:nextFocusForward="@id/lastnameTv"
android:textColor="@android:color/white"
android:textColorHint="@color/colorWhite"
style="@style/AppTheme.WhiteEditText" />

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

<android.support.design.widget.TextInputLayout
android:id="@+id/lastnameTvLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_weight="0.33"
android:textColorHint="@color/colorVeryLightGray"
style="@style/AppTheme.WhiteColorAccent">

<android.support.design.widget.TextInputEditText
android:id="@+id/lastnameTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Last Name"
android:inputType="textPersonName"
android:maxLines="1"
android:nextFocusDown="@id/usernameTv"
android:nextFocusForward="@id/usernameTv"
android:singleLine="true"
android:textColor="@android:color/white"
android:textColorHint="@color/colorWhite"
style="@style/AppTheme.WhiteEditText" />

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

<android.support.design.widget.TextInputLayout
android:id="@+id/usernameTvLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginBottom="20dp"
android:layout_weight="0.33"
android:textColorHint="@color/colorVeryLightGray"
style="@style/AppTheme.WhiteColorAccent">

<android.support.design.widget.TextInputEditText
android:id="@+id/usernameTv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="user Name"
android:imeActionId="6"
android:imeActionLabel="AB"
android:imeOptions="actionUnspecified"
android:maxLines="1"
android:nextFocusDown="@id/nextBtn"
android:nextFocusForward="@id/nextBtn"
android:singleLine="true"
android:textColor="@android:color/white"
android:textColorHint="@color/colorWhite"
style="@style/AppTheme.WhiteEditText" />

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

</LinearLayout>
</ScrollView>

<Button
android:id="@+id/nextBtn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginTop="16dp"
android:text="Next"
android:textStyle="bold"
app:layout_anchor="@+id/form"
app:layout_anchorGravity="bottom|center_horizontal" />
</android.support.design.widget.CoordinatorLayout>

style

<style name="AppTheme.WhiteColorAccent">
<item name="colorAccent">@color/colorWhite</item>
</style>

<style name="AppTheme.WhiteEditText" parent="Widget.AppCompat.EditText">
<item name="android:textColor">@color/colorWhite</item>
<item name="colorControlNormal">@color/colorVeryLightGray</item>
<item name="colorControlActivated">@color/colorWhite</item>
<item name="colorControlHighlight">@color/colorWhite</item>
</style>

OUTPUT

Sample Image



Related Topics



Leave a reply



Submit