How to write style to error text of EditText in android?
The solution is at the end and here is the screenshot:
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
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">
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 ofandroid: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
Related Topics
Android Exception: Did You Forget to Call 'Public Void Setup (Localactivitymanager Activitygroup)'
Error:Cause: Unable to Find Valid Certification Path to Requested Target
Phonegap Eclipse Issue - Eglcodeccommon Glutilsparamsize: Unknow Param Errors
Viewpager Detect When User Is Trying to Swipe Out of Bounds
How to Set the Language in Speech Recognition on Android
What Causes Android's Contentresolver.Query() to Return Null
Custom Uri Schemes for the Facebook Messenger
Error Loading the Sdk When Eclipse Starts
How to Add an Image in Email Body
Disabling Android O Auto-Fill Service for an Application
Get Listview Item Position on Button Click
Android - Switch Tabs from Within an Activity Within a Tab
How to Get Phone Number from an Incoming Call