I'm creating a login form with TextInputLayout and TextInputEditText but toggle password icon always show in white no matter which color I assign to it as endIconTint. I have tested this on
Android 6
Android 10
both show the same results.
Here is my Form when I use Widget.MaterialComponents.TextInputLayout.OutlinedBox as a style in TextInputLayout. It seems like its not showing drawable but that's not the case its not visible as drawable & input field background color is white. When I click on the end it toggle password.
Here is the form when I use Widget.MaterialComponents.TextInputLayout.FilledBox
And here is my code you can see I'm currently assigning black color to the endIconTint
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/password_til"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/activity_vertical_margin"
android:hint="Password"
app:counterEnabled="true"
app:counterMaxLength="20"
app:endIconMode="password_toggle"
app:endIconTint="#color/black"
app:helperText="required*"
app:helperTextTextColor="#android:color/holo_red_dark"
app:layout_constraintTop_toBottomOf="#id/username_til"
app:passwordToggleEnabled="true"
app:startIconDrawable="#drawable/ic_key">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/password_tiet"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:maxLength="20" />
</com.google.android.material.textfield.TextInputLayout>
I cross verified color from the color.xml file and tried other colors too but icon always appear as white. Please let me know what is wrong here or is it a bug?
Thanks & Regards
You have already specify app:endIconMode="password_toggle" so you don't require to set passwordToggleEnabled anymore.
Remove this from TextInputLayout and it resolve your issue.
app:passwordToggleEnabled="true"
Related
I'm trying to add a second endIcon to Material TextInputLayout like so:
But feels like it's almost impossible, I've already tried this solution but it's not working (at least for me).
Right now I've just a simple TextInputLayout with only one icon (toggle password), and I've no idea how to add a second one like at the screenshot above.
Do you have and advices?
Thanks:)
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/tilPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/ed_password_label"
app:endIconMode="password_toggle"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/etPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:imeOptions="actionDone"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
I would like to know how to change the error color of the TextInputLayout underline.
Just use the app:boxStrokeErrorColor attribute:
<com.google.android.material.textfield.TextInputLayout
app:boxStrokeErrorColor="#color/primaryLightColor"
...>
It requires Material Components lirabry version 1.2.0.
You can change the color in the edittext background as such. This background makes the underline to disappear. But you can make it to whatever color you want.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/activity_horizontal_margin"
app:hintEnabled="false">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Floating Hint Disabled"
android:background="#android:color/transparent" />
</android.support.design.widget.TextInputLayout
I use TextInputLayout to show password toggle button. It is working but the ripple effect is behind the background of the EditText (I use drawable background for the EditText). How can I disable the ripple effect of the password button or bring the ripple in front of the EditText background? Here the recorded video that demonstrated the problem https://imgur.com/nYOB6Ye.
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="25dp"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_edit"
android:hint="••••••"
android:inputType="textPassword"
android:padding="18dp" />
</com.google.android.material.textfield.TextInputLayout>
You can achieve the same result removing the android:background="#drawable/bg_edit" in your TextInputEditText and using an OutlinedBox style:
<com.google.android.material.textfield.TextInputLayout
android:hint="••••••"
app:endIconMode="password_toggle"
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
app:boxBackgroundColor="#color/....."
..>
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:padding="18dp" />
</com.google.android.material.textfield.TextInputLayout>
Note: app:passwordToggleEnabled="true" is deprecated. Just add app:endIconMode="password_toggle".
It is not brilliant solution, but it work for me.
materialVersion: 1.1.0
Koltin:
textInputLayout.apply {
findViewById<View>(R.id.text_input_end_icon).setBackgroundColor(
ResourcesCompat.getColor(resources, R.color.transparent, theme)
)
}
R.id.text_input_end_icon was find via Layout Inspector
A simple way, create a new theme for password toggle is shown below. Parent theme is your main(App) theme.
<style name="PasswordToggleTransparent" parent="NoActionBar">
<item name="colorControlHighlight">#0000</item>
</style>
and apply this theme to your TextInputLayout:
android:theme="#style/PasswordToggleTransparent"
Today I have just updated my dependencies of material design
from 1.0.0 to 1.1.0-alpha09
implementation 'com.google.android.material:material:1.1.0-alpha09'
Now i"m getting strange issue in com.google.android.material.textfield.TextInputLayout
Here is my Code
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/emailTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_10sdp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/emailTextInputEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint_enter_email"
android:imeOptions="actionNext"
android:inputType="textEmailAddress"/>
</com.google.android.material.textfield.TextInputLayout>
after updating the dependencies I'm getting boxed design in my TextInputLayout
Output of above code
if i use implementation 'com.google.android.material:material:1.0.0' I'm getting expected result
Can anybody help me to solve this issue
If need more information please do let me know. Thanks in advance. Your efforts will be appreciated.
UPDATE
I have already tried app:boxBackgroundMode="none" them I'm getting this
,
if i use app:boxBackgroundMode="outline" then getting this
SOLVED
No need to use boxBackgroundMode
You need to add #style/Widget.Design.TextInputLayout in your TextInputLayout
SAMPLE CODE
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/emailTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="#dimen/_10sdp"
style="#style/Widget.Design.TextInputLayout"
app:errorTextAppearance="#style/error_appearance"
android:textColorHint="#android:color/white">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:id="#+id/emailTextInputEditText"
android:layout_height="wrap_content"
android:backgroundTint="#android:color/white"
android:gravity="center"
android:hint="#string/hint_enter_email"
android:imeOptions="actionNext"
android:textColorHint="#android:color/white"
android:inputType="textEmailAddress"
android:textColor="#android:color/white"
android:textSize="#dimen/_15ssp"/>
</com.google.android.material.textfield.TextInputLayout>
OUTPUT
To revert back to old style with no filed background but only bottom border, one should use following style:
<com.google.android.material.textfield.TextInputLayout
...
style="#style/Widget.Design.TextInputLayout"
....
>
</com.google.android.material.textfield.TextInputLayout>
Using theme Widget.Design.TextInputLayout will generate expected output like below:
Using a material Theme the default style used by the TextInputLayout is #style/Widget.MaterialComponents.TextInputLayout.FilledBox
To obtain something similar just change the background color using the boxBackgroundColor attribute:
<style name="CustomFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="boxBackgroundColor">#myColor</item>
</style>
Also use the android:hint="#string/hint_enter_email" in the TextInputLayout not in the TextInputEditText
For me using #style/Widget.Design.TextInputLayout produced undesirable formatting results, specifically alignment issues with the editText box.
I used boxBackgroundMode set to none for awhile, and after updating material design in my project the error icon mentioned started showing. May be a bug (https://issuetracker.google.com/issues/122445449).
For now I'm still setting the boxBackgroundMode to none, and hiding the error icon by setting the color to transparent. This way I keep the material design.
app:boxBackgroundMode="none"
app:errorIconTint="#android:color/transparent"
<com.google.android.material.textfield.TextInputLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="5dp"
app:boxBackgroundMode="none"
app:errorIconTint="#android:color/transparent"
app:hintEnabled="false">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/message_ellipsis"
android:inputType="textCapSentences|textMultiLine"
android:paddingTop="10dp" />
</com.google.android.material.textfield.TextInputLayout>
Set this in your TextInputLayout:
app:boxBackgroundMode="none"
Probably you have set boxBackgroundMode to filled or maybe it's set by default. Just add above line, and this should fix the issue.
Same behavior with com.google.android.material:material:1.3.0
Applying transparent background to TextInputEditText does the tricks.
android:background="#android:color/transparent"
I need to use "errorValidation" and "hint" in TextInputLayout.
I want to fixed hint in TextInputLayout that it does not go to the label of my TextInputLayout.
Actually, I want the hint to be as a label at first.
in other words:
I use the hint as TextView for the label of TextInputLayout but the problem is too much margin !!!
how can I handle this?
the attached picture define how I use TextView for the label of TextInputLayout.
the code I used:
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/tv_label_previous_password"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="#id/toolbar_change_password"
android:layout_marginTop="#dimen/spacing_5x"
android:layout_marginStart="#dimen/spacing_3x"
android:text="#string/label_previous_password"
style="#style/TextHintYekanRegularHintColor16" />
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/til_previous_password"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="#id/tv_label_previous_password"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_marginStart="#dimen/spacing_3x"
android:layout_marginEnd="#dimen/spacing_3x"
style="#style/TextInputLayoutAppearance" >
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/et_previous_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="#style/TextYekanRegularColorPurpleOne16"
android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>
You can solve margin problem of TextInputLayout with two tricks. You have used one trick that use a normal EditText instead of hint. Then you must set
app:hintEnabled="false"
to remove the margin on top of your TextInputLayout.
Second trick is that you should enable error for TextInputLayout in your fragment or activity instead of the layout file. This will remove the margin in the bottom of TextInputLayout. And when error is gone you should disable error for TextInputLayout. This code will do the trick for you:
your_text_input_layout.isErrorEnabled = true // to enable the error
your_text_input_layout.isErrorEnabled = false // to disable the error