I am trying to show error icon in Edit Text and tried below code but it does not show error icon in all Edit Text Fields.
txtEmailAddess.requestFocus();
txtEmailAddess.setError(result.getEmailAddressMessage());
txtPassword.requestFocus();
txtPassword.setError(result.getPasswordMessage());
In the below screenshot, it shows error icon just in Password field. But not in Email Address field. Is that possible to show red circular icon in both fields?
Code in Xml
<android.support.design.widget.TextInputLayout
android:id="#+id/lblEmailAddress_login"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/txtEmailAddress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_email"
android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:id="#+id/lblPassword_login"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#id/lblEmailAddress_login">
<EditText
android:id="#+id/txtPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="45dp"
android:hint="#string/hint_password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
use a TextInputLayout
<android.support.design.widget.TextInputLayout
android:id="#+id/text_input_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</android.support.design.widget.TextInputLayout>
set the error using:
textInputLayout.setError("Error occurs");
use if else for setting error in text fields instead of requesting focus on every items of text fields
Refer these two answers (They will surely resolve your issue )
Errors with registration form Validation using setError() in Android
How to show all edittext error messages at once in android?
Related
In my app, I have a TextInputLayout where the user enters its id, when the TextInputLayout does not have the focus looks like:
However, when the user touch the TextInputLayout (get the focus) the hint text looks like:
And I need hint text looks like as the follow image when the TextInputLayout have the focus:
Ignore the icon, its different but it does not matter in this moment, that I want to do is the hint text looks like the last image
Here is my code:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/ilUser"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="vertical"
android:textColorHint="#color/et_login">
<EditText
android:id="#+id/etUser"
android:layout_width="match_parent"
android:layout_height="#dimen/et_login_height"
android:background="#drawable/edit_text_format"
android:drawableLeft="#drawable/user"
android:drawablePadding="10dp"
android:fontFamily="sans-serif"
android:hint="#string/user_id_text_hint"
android:inputType="number"
android:maxLength="12"
android:minLines="15"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textCursorDrawable="#drawable/cursor_drawable_app"
android:textSize="#dimen/h5"
android:theme="#style/EditTextTheme" />
</com.google.android.material.textfield.TextInputLayout>
you cant do this by default edit text you can use some library in your app to apply this ...
library is here :
implementation 'com.google.android.material:material:1.2.1'
and if you want to learn i recommend to see this tutorial :
https://www.youtube.com/watch?v=C_TEugAIMHA&t=616s
see this and you can get your answer...
When you use TextInputLayout is highly recommended to use TextInputEditText instead of EditText
Example:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/ilUser"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:orientation="vertical"
android:textColorHint="#color/et_login">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etUser"
android:layout_width="match_parent"
android:layout_height="#dimen/et_login_height"
android:background="#drawable/edit_text_format"
android:drawableLeft="#drawable/user"
android:drawablePadding="10dp"
android:fontFamily="sans-serif"
android:hint="#string/user_id_text_hint"
android:inputType="number"
android:maxLength="12"
android:minLines="15"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:textCursorDrawable="#drawable/cursor_drawable_app"
android:textSize="#dimen/h5"
android:theme="#style/EditTextTheme" />
</com.google.android.material.textfield.TextInputLayout>
That should solve it!
I want to set both errorEnabled and passwordToggleEnabled to true in a TextInputLayout, but it seems that these two can't coexist because the one covers the other like this.
I want to do this because I'm validating the password field to match a specific criteria and I want the user to be able to see both the error message and the password that's been typed in.
This is my code:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:errorEnabled="true"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/password_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/password"
android:inputType="textPassword" />
</android.support.design.widget.TextInputLayout>
Is it possible to move the passwordToggle-icon a bit to the left of the exclamation mark? Or do I have to create a custom drawable and use this instead of the passwordToggle-icon?
Try Setting setError() on TextInputLayout insead of TextInputEditText
xml
<android.support.design.widget.TextInputLayout
android:id="#+id/ti_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:errorEnabled="true"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/password_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:inputType="textPassword" />
Code
if(password_input.getText().toString().equals(""))
ti_input.setError("Enter Password");
else
ti_input.setError(null);
This works for me. don't use setError() on the EditText, use TextInputLayout's setError()
I would like for my app to be able to display different hints in the edittext at different times, so i have to set the hint pro-grammatically at each times as below.
editText.setHint("Hint 1");
But the problem is when i starts typing the hint starts disappearing.I want to show this hint every time.If i set the hint in xml it will not disappear while typing, but how to do this in my case.
Either you should consider to change to TextInputLayout(Strongly recommended this. Here is an example too.)
or
make relative layout with EditText for input and TextView for hint inside.Change the textview according to your needs.
<RelativeLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Some text"
android:layout_alignParentLeft="true"
android:id="#+id/editText1"
android:layout_gravity="center"
/>
<TextView
android:id="#+id/text_hint"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:text="yourHint"
android:textSize="14sp"
android:layout_marginRight="10dp"
android:textColor="#color/customColor"
/>
</RelativeLayout>
what you are expecting is not possible,since we have to how what user is writing on editext.
Now a days https://github.com/hardik-trivedi/FloatingLabel
this type of hints are more popular,you can try above link.
TextInputLayout give powerful material features to EditText. Main feature is floating hint. See doc here https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html
You can't display while typing text in edit text hint in android have default functionality
<android.support.design.widget.TextInputLayout
android:theme="#style/TextLabel"
android:id="#+id/input_layout_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/username_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
android:hint="Email Address"
android:inputType="textEmailAddress"
android:translationY="10dp"
android:textColor="#color/white"
android:textColorHint="#color/white"
android:textSize="#dimen/font_13"/>
</android.support.design.widget.TextInputLayout>
Here android provide default functionality while typing text in edit text the hint above edit text, You can also set Hint via programmatically
EditText. setHint ("Hint 1");
the best way to do this is to use TextInputLayout.
https://www.bignerdranch.com/blog/becoming-material-with-android-design-support-library/
<!--EMAIL-->
<android.support.design.widget.TextInputLayout
android:id="#+id/email_wrapper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/TextLabel">
<EditText
android:id="#+id/etUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/login_screen_email_hint"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"
android:maxLines="1"
android:nextFocusDown="#+id/etPassword"
android:singleLine="true"
android:textColor="#android:color/white"
android:textColorHighlight="#android:color/white"
android:textColorHint="#android:color/white" />
</android.support.design.widget.TextInputLayout>
And dont forget adding this line to your gradle file
compile 'com.android.support:design:23.4.0'
In my application I use the Design Support Library's TextInputLayout around all my EditTexts that require the hint to label effect. However I noticed an adverse effect of doing so - applying it to a password field will make the setError method apply two exclamation marks: one in the middle of the EditText and one at the proper place, slightly covering the "eye" (password visibility) icon.
This only happens on fields that have the inputType set to textPassword.
How could I fix this?
EDIT:
XML layout
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/loginEmail"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_email"
android:inputType="textEmailAddress"/>
</android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/loginPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_password"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
try to set your error message just for TextInputLayout and remove it from editText object.
Recently google introduced new Android Design Library in that how to use TextInputLayout field to enable the Floating Hint feature of EditText.
Not much guidance is available here.
This page says
you can now wrap it in a TextInputLayout
But No idea because smart prediction (Ctrl+SPACE) doesn't predicts any attributes to the TextInputLayout. So my questions are:
How do we get hold of the EditText underlying this component?
How can we get data from EditText?
TextInputLayout extends ViewGroup class.
So which means that you have to wrap your EditText in a TextInputLayout.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hint"
android:id="#+id/editText1" />
</android.support.design.widget.TextInputLayout>
Do wrap the TextInputLayout around TextInputEditText instead of EditText.
Wrapping around EditText does have issue in landscape mode. Refer to
this article for more details.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="hint"
android:id="#+id/editText1" />
</android.support.design.widget.TextInputLayout>
This is defined in design support library under "Floating labels for editing text".
<android.support.design.widget.TextInputLayout
android:id="#+id/name_et_textinputlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin">
<EditText
android:id="#+id/FeedBackerNameET"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:hint="hinttext"
android:inputType="textPersonName|textCapWords" />
</android.support.design.widget.TextInputLayout>
To make this works well, you should let you app theme extends from Theme.AppCompat (or its descendant) theme, like extends from Theme.AppCompat.Light.NoActionBar.
<android.support.design.widget.TextInputLayout
android:id="#+id/til_message"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/et_message"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/type_message"
android:maxLines="5"/>
</android.support.design.widget.TextInputLayout>
hint will automatically shift up once you start typing in the edit text and to have those errors which appear below edit text set error on text input layout like this not on edit text
tilMessage.setError("Message field is empty!");
to disable error
tilMessage.setErrorEnabled(false);
The correct way...
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/card_id_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/form_card_id_text"
android:inputType="number"
android:maxLength="10"/>
</android.support.design.widget.TextInputLayout>
If you use EditText like a child of TextInputLayout, you will see this message in Android Monitor:
I/TextInputLayout: EditText added is not a TextInputEditText. Please switch to using that class instead.
With the Material Components Library there is a new TextInputLayout component.
Just use:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_text">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
In the official doc you can find all the info.
We can use AppCompactEditText also for this need to add support:appcompat in gradle
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint"
android:maxLength="100"
android:inputType="textNoSuggestions"
android:textColor="#color/colorPrimary"
android:textSize="#dimen/font_size_large" />
</android.support.design.widget.TextInputLayout>
Rule of Thumb : TextInputLayout should wrap TextInputEditText instead of the normal EditText.
Reason?
TextInputEditText is a sub-class of EditText and is designed for use as a child of TextInputLayout.
Furthermore, using an EditText instead would shoot us a warning : EditText added is not a TextInputEditText. Please switch to using that class instead.