I need an EditText that looks like this onError:
calling onError looks like this instead :
Note: the app is running on SDK 19 (4.4.2)
min SDK is 1
Is there a method similar to setError that does this automatically,
or do I have to write the code for it ?
Thank you
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();
Call myTextInputLayout.setError() instead of myEditText.setError().
These container and containment have double functionality on setting errors. Functionality you need is container's one. But you could require minimal version of 23 for that.
Your EditText should be wrapped in a TextInputLayout
<android.support.design.widget.TextInputLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="#+id/tilEmail">
<EditText
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:ems="10"
android:id="#+id/etEmail"
android:hint="Email"
android:layout_marginTop="10dp"
/>
</android.support.design.widget.TextInputLayout>
To get an error message like you wanted, set error to TextInputLayout
TextInputLayout tilEmail = (TextInputLayout) findViewById(R.id.tilEmail);
if (error){
tilEmail.setError("Invalid email id");
}
You should add design support library dependency. Add this line in your gradle dependencies
compile 'com.android.support:design:22.2.0'
reVerse's answer is great but it didn't point out how to remove the floating error tooltip kind of thing
You'll need edittext.setError(null) to remove that.
Also, as someone pointed out, you don't need TextInputLayout.setErrorEnabled(true)
Layout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/edittext"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter something" />
</android.support.design.widget.TextInputLayout>
Code
TextInputLayout til = (TextInputLayout) editText.getParent();
til.setError("Your input is not valid...");
editText.setError(null);
If anybody still facing the error with using google's design library as mentioned in the answer then, please use this as commented by #h_k which is -
Instead of calling setError on TextInputLayout, You might be using setError on EditText itself.
TextInputLayout til = (TextInputLayout)editText.getParent();
til.setErrorEnabled(true);
til.setError("some error..");
private EditText edt_firstName;
private String firstName;
edt_firstName = findViewById(R.id.edt_firstName);
private void validateData() {
firstName = edt_firstName.getText().toString().trim();
if (!firstName.isEmpty(){
//here api call for ....
}else{
if (firstName.isEmpty()) {
edt_firstName.setError("Please Enter First Name");
edt_firstName.requestFocus();
}
}
}
Related
Hey anyone know why this (see in the picture) happens?
It's happens for Xiaomi MiA1, while on Nokia 7.1 works fine.
My xml view layout
FrameLayout - root
ScrollView
RelativeLayout
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/profile.EMAIL"
android:theme="#style/TextInputLayoutTheme"
android:margin="16dp"
android:paddingBottom="8dp"
app:layout_constraintTop_toBottomOf="#+id/phone_wrapper"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:textSize="16sp"
android:textColor="#color/darkTextColor"
android:imeOptions="actionDone"
tools:text="Email"
/>
</com.google.android.material.textfield.TextInputLayout>
I think that putting TextInputLayoutTheme is not relevant here, since I only manipulate with view's colors
The error message text gets cut off if you are setting the error on a TextInputLayout more than once.
So every time you are setting TextInputLayout error message text, just set it to null first.
textInputLayout.setError(null);
textInputLayout.setErrorEnabled(false);
textInputLayout.setError("Error Message");
Layout Inspector shows that even if there is some space for the error it doesn't draw view in all of it. Everything there is in LinearLayouts (and one simple FrameLayout) so there is no way something would overlap it, paddings are set to 0, there is no code changing height or something suspicious in the implementation, so I don't know what might be a reason of such behaviour.
Although I've found some solution which works. You need to find in TextInputLayout a view holding error (with id textinput_error) and add some small padding to it. I've done it by extending TextInputLayout and adding such code into init.
val errorTV = findViewById<TextView>(R.id.textinput_error)
errorTV.updatePadding(top = 4)
There is already issue on issue tracker - https://issuetracker.google.com/issues/116747167 so lets hope Google will fix it some day.
I resolved issue by saving and restore LayoutParams:
final ViewGroup.LayoutParams params = textInputLayout.getLayoutParams();
textInputLayout.setError(errorMessage);
textInputLayout.setLayoutParams(params);
I resolved issue by increasing size of error font to 14sp (orginal is 12sp)
<com.google.android.material.textfield.TextInputLayout
[...]
app:errorTextAppearance="#style/MyProfile.Error">
<style name="MyProfile.Error" parent="TextAppearance.Design.Error">
<item name="android:textSize">14sp</item>
</style>
Although as Shabbir Dhangot said I may be that setting TIL.setErrorEnabled(true) may help for some else.
As some have already pointed out, this is a known bug. See https://issuetracker.google.com/issues/116747167
I solved this by doing something like this (note that below code is Kotlin, so != works on Strings):
if(myInputLayout.error != error){
myInputLayout.error = error
}
I know it is not the best solution, but you can add a \n to the beginning of your error message.
For example, if your error is Error, just change it to \nError.
If you want to change the size of the \n you can use:
String newLine = "\n";
String errorMessage = "Error";
SpannableString spannableErrorMessage = new SpannableString(newLine + errorMessage );
spannableName.setSpan(new TextAppearanceSpan(activity, R.style.my_style),0,a.length(), 0);
spannableName.setSpan(new RelativeSizeSpan(2.0f), a.length(), a.length() + 1, 0);
You can use this Kotlin extension:
/**
* Fix a bug with [TextInputLayout] that cut the error text when setting the same text twice.
*/
fun TextInputLayout.setFixedError(errorTxt: CharSequence?) {
if (error != errorTxt) {
error = errorTxt
}
}
Usage:
yourTextInput.setFixedError("Your error text")
I am developing an accessible android application where people would be using Explore by Touch and TalkBack accessibility services to use my application.
This is my Android XML code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/forename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:layout_marginLeft="15dip"
android:textSize="20sp"
android:text="#string/forenameText"
android:contentDescription="#null"/>
<EditText
android:id="#+id/EditTextForename"
android:layout_width="285dp"
android:layout_height="65dp"
android:layout_marginTop="10dip"
android:layout_marginLeft="15dip"
android:hint="#string/forenameHint"
android:inputType="textPersonName"
android:lines="1"
android:singleLine="true"
android:textSize="20sp" >
</EditText>
</LinearLayout>
strings.xml
<string name="forenameText">Forename</string>
<string name="forenameHint">Enter your forename here</string>
TextView displays the title "Forename" and EditText allows me to enter some details in the form field. The problem I have is that when I
drag my finger across the screen by using Explore by Touch, TalkBack picks up the title of the TextView and announces it aloud as "Forename". I want the TextView to only display text and not provide any audible feedback.
I have set contentDescription to #null as you can see from the code above, but TalkBack still announces "Forename" when my finger is located over the
TextView.
I have also tried setting contentDescription in my Java class:
TextView forename=(TextView)findViewById(R.id.forename);
forename.setContentDescription("");
However, I still get the same problem. Is there any other way to set contentDescription to null/empty and prevent TalkBack from announcing it aloud?
Java code:
public class MainActivity extends Activity{
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View forename = findViewById(R.id.forename);
forename.setAccessibilityDelegate(new AccessibilityDelegate() {
public boolean performAccessibilityAction (View host, int action, Bundle args){
return true;
}
});
}
}
Since API 16, Android introduced the following:
android:importantForAccessibility="no"
or
setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_NO)
Which allows developers to disable talkback all together for certain views.
http://developer.android.com/reference/android/view/View.html
For better backwards compatibility:
ViewCompat.setImportantForAccessibility(
decorativeTextView,
ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);
I was trying to do the same today, and was able to set an 'empty' contentDescription on a TextView like so (using a non-breaking whitespace):
decorativeTextView.setContentDescription("\u00A0");
now TalkBack doesn't say anything for that TextView.
but I agree with Nick about leaving the label as readable in your case, because hint is only read for empty EditTexts.
Why do you not want the TextView to speak "forename"? It is being used as a label for the EditText. Once the user has entered some text the hint "enter your forename here" would no longer be spoken - as far as I know - so the TextView given the user some context for the EditText.
Similarly the announcement of "editbox" gives the user the role of the EditText control. While "form field" might be better it would not be the same behavior as in other apps and in the OS.
I had a similar problem. I eventually solved it by using the setAccessibilityDelegate method and overriding View.AccessibilityDelegate's performAccessibilityAction method.
try this:
View forename = findViewById(R.id.forename);
forename.setAccessibilityDelegate(new AccessibilityDelegate() {
public boolean performAccessibilityAction (View host, int action, Bundle args){
return true;
}
});
I had the same problem, and the only thing that worked for me was android:contentDescription=" " (white space).
I want to display the error message as shown in the screenshot.Whenever there is en error I want to display error message and if everything thing correct then not to display the error message.I don't want pop up . Eg. editText.setError();
You can use this
String errorMsg = "invalid email";
EditText editText = (EditText) findViewById(R.id.editText);
editText.setError(errorMsg);
Hope this will hepl you.
You could use the new support library features http://www.google.com/design/spec/components/text-fields.html#
If you are using studio add this compile 'com.android.support:design:22.2.0'
<android.support.design.widget.TextInputLayout
android:id="#+id/fNameLayout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/imageView"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp">
<EditText
android:id="#+id/fName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ems="10"
android:hint="First Name"/>
</android.support.design.widget.TextInputLayout>
I am using the TextInputLayout to implement the floating label pattern. However, when I set the text programmatically on the EditText, I still get the animation of the label moving from the control to the label - the same as if the user had clicked it.
I don't want this animation though if I set it programmatically, is this possible? Here is my code:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/root">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/editText1" />
</android.support.design.widget.TextInputLayout>
And in the onResume I do:
TextInputLayout root = (TextInputLayout)findViewById(R.id.root);
EditText et = (EditText)root.findViewById(R.id.editText1);
et.setText("Actual text");
root.setHint("Hint");
As of v23 of the support libs, a setHintAnimationEnabled method has been added. Here are the docs. So you can set this new attribute to false in the XML and then programmatically set it to true after you've finished populating the editText. OR simply handle it all programmatically, as needed.
So in your example, that would become something like:
TextInputLayout root = (TextInputLayout)findViewById(R.id.root);
root.setHintAnimationEnabled(false);
root.setHint("Hint");
EditText et = (EditText)root.findViewById(R.id.editText1);
et.setText("Actual text");
// later...
root.setHintAnimationEnabled(true);
Of course, be sure to open your Android SDK Manager and update your Android Support Library to rev. 23 and Android Support Repository to rev. 17 first and then add that to build.gradle via:
compile 'com.android.support:design:23.0.0'
Note that as the Design library depends on the Support v4 and AppCompat Support Libraries, those will be included automatically when you add the Design library dependency.
Put this attribute app:hintEnabled="false" here:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintEnabled="false">
It works for me
I have found an (unwieldy) way to do that. Looking into the source code of the TextInputLayout, I've discovered that the only occasion when the class doesn't update it's hint with animation is when the EditText is added to it. The only obstacle is that you can only add it once to the layout, once it is there, it will permanently be tied to it, and there's no way to remove it.
So here's the solution:
Create a TextInputLayout without the EditText. Programmatically or via XML inflation - doesn't matter, but it has to be empty.
Create the EditText and set its text to whatever you need.
Add the EditText to the TextInputLayout.
Here's an example:
TextInputLayout hintView = (TextInputLayout) findViewById(R.id.hint_view);
hintView.setHint(R.string.hint);
EditText fieldView = new EditText(hintView.getContext());
fieldView.setText(value);
hintView.addView(fieldView);
Unfortunately, if you want to set the text to something else without the animation, you will have to repeat all these steps, except for the creation of a new EditText (the last one can be reused). I hope Google can fix this, because it is really inconvenient, but for now that's what we have.
Update: this is, thankfully, fixed in the design library 23.0.0, so just update to that version, and you won't have to do all this crazy stuff.
You can disable it by using
app:hintAnimationEnabled="false"
I will give you simple code and you don't have to make all programmatically just add xlm attribute and that's all.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintAnimationEnabled="true"
app:passwordToggleEnabled="true">
<EditText
android:id="#+id/password_field_activity_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"
android:hint="#string/password"
android:inputType="textPassword"
android:padding="10dp"
android:textColor="#color/color_holo_light_gray"
android:textColorHint="#color/color_holo_light_gray"
android:textCursorDrawable="#drawable/cursor_drawable" />
</android.support.design.widget.TextInputLayout>
Hope it will help
I wrote a small method to run after loading the view hierarchy that disables animation on initial display but enables it after wards. Add this to your Base Activity/Fragment/View and it will solve it issue.
private void setTextInputLayoutAnimation(View view) {
if (view instanceof TextInputLayout) {
TextInputLayout til = (TextInputLayout) view;
til.setHintAnimationEnabled(false);
til.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
#Override public boolean onPreDraw() {
til.getViewTreeObserver().removeOnPreDrawListener(this);
til.setHintAnimationEnabled(true);
return false;
}
});
return;
}
if (view instanceof ViewGroup) {
ViewGroup group = (ViewGroup) view;
for (int i = 0; i < group.getChildCount(); i++) {
View child = group.getChildAt(i);
setTextInputLayoutAnimation(child);
}
}
}
I check out ideas about support library v23 - it's does not work yet :( Programmatically inserting of EditText is unusable if you wish to use databinding labrary
In result of research I found solution without full disabling of animation:
layout.xml
<android.support.design.widget.TextInputLayout
android:id="#+id/text_til"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/product_title_placeholder">
<android.support.design.widget.TextInputEditText
android:id="#+id/text_tiet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="#={bindingText}"/>
</android.support.design.widget.TextInputLayout>
Activity.java
final TextInputLayout textLayout = (TextInputLayout) findViewById(R.id.text_til);
if(binding.getText() != null) {
// disable animation
textLayout.setHintAnimationEnabled(false);
final TextInputEditText editText = (TextInputEditText) titleLayout.findViewById(R.id.text_tiet);
editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View view, boolean b) {
// enable animation after layout inflated
textLayout.setHintAnimationEnabled(true);
editText.setOnFocusChangeListener(null);
}
});
}
// manage focus for new binding object
((View)textLayout .getParent()).setFocusableInTouchMode(binding.getText() == null);
It's looks not prettily, but it works :)
I am developing an accessible android application where people would be using Explore by Touch and TalkBack accessibility services to use my application.
This is my Android XML code:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/LinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:id="#+id/forename"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dip"
android:layout_marginLeft="15dip"
android:textSize="20sp"
android:text="#string/forenameText"
android:contentDescription="#null"/>
<EditText
android:id="#+id/EditTextForename"
android:layout_width="285dp"
android:layout_height="65dp"
android:layout_marginTop="10dip"
android:layout_marginLeft="15dip"
android:hint="#string/forenameHint"
android:inputType="textPersonName"
android:lines="1"
android:singleLine="true"
android:textSize="20sp" >
</EditText>
</LinearLayout>
strings.xml
<string name="forenameText">Forename</string>
<string name="forenameHint">Enter your forename here</string>
TextView displays the title "Forename" and EditText allows me to enter some details in the form field. The problem I have is that when I
drag my finger across the screen by using Explore by Touch, TalkBack picks up the title of the TextView and announces it aloud as "Forename". I want the TextView to only display text and not provide any audible feedback.
I have set contentDescription to #null as you can see from the code above, but TalkBack still announces "Forename" when my finger is located over the
TextView.
I have also tried setting contentDescription in my Java class:
TextView forename=(TextView)findViewById(R.id.forename);
forename.setContentDescription("");
However, I still get the same problem. Is there any other way to set contentDescription to null/empty and prevent TalkBack from announcing it aloud?
Java code:
public class MainActivity extends Activity{
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
View forename = findViewById(R.id.forename);
forename.setAccessibilityDelegate(new AccessibilityDelegate() {
public boolean performAccessibilityAction (View host, int action, Bundle args){
return true;
}
});
}
}
Since API 16, Android introduced the following:
android:importantForAccessibility="no"
or
setImportantForAccessibility(View.IMPORTANT_FOR_ACCESSIBILITY_NO)
Which allows developers to disable talkback all together for certain views.
http://developer.android.com/reference/android/view/View.html
For better backwards compatibility:
ViewCompat.setImportantForAccessibility(
decorativeTextView,
ViewCompat.IMPORTANT_FOR_ACCESSIBILITY_NO);
I was trying to do the same today, and was able to set an 'empty' contentDescription on a TextView like so (using a non-breaking whitespace):
decorativeTextView.setContentDescription("\u00A0");
now TalkBack doesn't say anything for that TextView.
but I agree with Nick about leaving the label as readable in your case, because hint is only read for empty EditTexts.
Why do you not want the TextView to speak "forename"? It is being used as a label for the EditText. Once the user has entered some text the hint "enter your forename here" would no longer be spoken - as far as I know - so the TextView given the user some context for the EditText.
Similarly the announcement of "editbox" gives the user the role of the EditText control. While "form field" might be better it would not be the same behavior as in other apps and in the OS.
I had a similar problem. I eventually solved it by using the setAccessibilityDelegate method and overriding View.AccessibilityDelegate's performAccessibilityAction method.
try this:
View forename = findViewById(R.id.forename);
forename.setAccessibilityDelegate(new AccessibilityDelegate() {
public boolean performAccessibilityAction (View host, int action, Bundle args){
return true;
}
});
I had the same problem, and the only thing that worked for me was android:contentDescription=" " (white space).