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()
Related
How can I create an Android EditText with a hint like this (with animation)?
So when I tap inside the EditText, the hint shrinks and goes on top of the input text, like in this example:
Use the code given below for all purposes:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
For Password filed with toggle eye use this:
<com.google.android.material.textfield.TextInputLayout
...
app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
...
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
Learn more from here: https://material.io/components/text-fields/android
I have implemented a TextInputLayout with a password field in the usual way:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="30dp"
android:layout_marginTop="15dp"
android:layout_marginRight="30dp"
android:autofillHints="password"
android:background="#drawable/edit_text_border"
android:hint="#string/password"
android:inputType="textPassword"
android:textColor="#000000"
android:textColorHint="#9e9e9e" />
</com.google.android.material.textfield.TextInputLayout>
I have added this in the dependencies -
implementation 'com.google.android.material:material:1.1.0'
The visibility "eye- icon" is not yet visible. Is there anything that I missed or I did do sommething wrong?
Make sure to use a Material Components theme in your app and use a layout like:
<com.google.android.material.textfield.TextInputLayout
...
android:hint="#string/password"
app:endIconMode="password_toggle">
<com.google.android.material.textfield.TextInputEditText
...
android:inputType="textPassword"
/>
</com.google.android.material.textfield.TextInputLayout>
As you are using an EditText please check the official doc:
Note: A text field is composed of a TextInputLayout and a TextInputEditText as a direct child. Using an EditText as the child might work, but TextInputEditText provides accessibility support for the text field and allows TextInputLayout greater control over the visual aspects of the input text. If an EditText is being used, make sure to set its android:background to #null so that TextInputLayout can set the proper background on it.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/pass"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Password"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
I'm creating a password field with custom background using TextInputLayout and AppCompatEditText. Before using Theme.MaterialComponents the the field was fine, but after using it, my AppCompatEditText start showing a line highlight at the bottom. I'm sure it is because of Material styling, but I couldn't figure out which attribute I can use to remove the line and I also not really sure whether it is on the TextInputLayout or the AppCompatEditText.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="6dp"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<androidx.appcompat.widget.AppCompatEditText
android:id="#+id/passwordInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="#dimen/activity_horizontal_margin"
android:layout_marginTop="6dp"
android:layout_marginEnd="#dimen/activity_horizontal_margin"
android:background="#drawable/bg_input_border"
android:fontFamily="#font/opensans_regular"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:paddingLeft="10dp"
android:paddingTop="13dp"
android:paddingRight="10dp"
android:paddingBottom="13dp"
android:textSize="16sp" />
</com.google.android.material.textfield.TextInputLayout>
You can set boxStrokeWidth value
<com.google.android.material.textfield.TextInputLayout
...
app:boxStrokeWidth="0dp"
...
or Programmatically
textInputLayout.setBoxStrokeWidth(0);
I want to make Textinputlayout hint multiline with material outlinedbox even hint in floating mode. I have searched a lot but didn't found any solution can anyone help me how to achieve this task?
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilFieldLabel"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
app:hintTextAppearance="#style/AddApplicationTextLabel">
<utilities.customcontrols.BodyEditText
android:id="#+id/etValue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoLink="web"
android:gravity="start"
android:inputType="textMultiLine"
android:maxLength="1000"
android:textColor="#color/black"
android:textSize="#dimen/_13ssp"
android:theme="#style/AddApplicationEditTextField"
custom:customfont="bold" />
</com.google.android.material.textfield.TextInputLayout>
TLDR:
Set app:hintEnabled="false" for TextInputLayout
Description:
If you leave hintEnabled to true (true by default) the hint will be single line and turns into a label when the user taps the EditText giving it focus.
If you change hintEnabled to false this feature is removed and the EditText shows the hint with multiple lines as intended. It does not turn into a label and disappears once the user starts actually typing.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:hintEnabled="false"
app:boxBackgroundMode="none">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Your long hint"/>
</com.google.android.material.textfield.TextInputLayout>
Source: https://stackoverflow.com/a/67744575/13545849
I'm using toggle password in my form, this is my code:
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_pass"
android:layout_width="match_parent"
android:layout_height="37dp"
android:layout_marginTop="10dp"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/password"
style="#style/edittexts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_pass"
android:inputType="textPassword"
app:passwordToggleEnabled="true" />
</android.support.design.widget.TextInputLayout>
it works fine and shows the toggle button view in my EditText .
I just want to move the icon to the left side of edit text , How can I do so ?
You need to change direction of edit text, but it will change your direction of edit text it will start writing right to left.
<android.support.design.widget.TextInputLayout
android:id="#+id/input_layout_pass"
android:layout_width="match_parent"
android:layout_height="37dp"
android:layout_marginTop="10dp"
android:layoutDirection="rtl"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="#+id/password"
style="#style/edittexts"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_pass"
android:inputType="textPassword"
app:passwordToggleEnabled="true" />
</android.support.design.widget.TextInputLayout>
also if you are using api version below 17 you need to add this attribute in your code
TextInputLayout input_layout_pass = (TextInputLayout) findViewById(R.id.input_layout_pass);
ViewCompat.setLayoutDirection(input_layout_pass, ViewCompat.LAYOUT_DIRECTION_RTL);
Check the docs for TextInputLayout:
Note: When using the password toggle functionality, the 'end' compound drawable of the EditText will be overridden while the toggle is enabled. To ensure that any existing drawables are restored correctly, you should set those compound drawables relatively (start/end), opposed to absolutely (left/right).
Based on this, you see that you can't change the position of the button without changing the text orientation in that field.