Develop Reference

How to disable ripple effect on password toggle button of 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"

TextInputLayout maintain hint color when losing focus

I have a TextInputLayout with a TextInputEditText inside it. Now, I have it with the hint color on grey when nothing is typed yet and the hint color becomes blue once the user types on it and the hint gets smaller and moves upper (the normal animation). The problem is that once I tap on another edittext, the hint of the first one becomes grey again, and I want it to keep being blue.
This is my code:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintTextAppearance="#style/textInputLayoutAppearance">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/red"
android:hint="#string/str_usuario"/>
</android.support.design.widget.TextInputLayout>
and the style:
<style name="textInputLayoutAppearance" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/blue</item>
</style>
Thanks in advance..

You can specify the hint color as below -
<android.support.design.widget.TextInputLayout
android:id="#+id/til_password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="#dimen/parent_to_view_margin"
app:layout_constraintTop_toBottomOf="#+id/til_email">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#android:color/holo_blue_bright"
android:hint="#string/hint_password" />
</android.support.design.widget.TextInputLayout>

Android: how to see all TextAppearance styles

I'm trying to style my login form, however I am having trouble getting the background of the inputs to be white.
#android:style/TextAppearance.DeviceDefault.Inverse works, as it displays the color white for the input title; however, for the hint text it's still black.
Is there a way to let me see all kinds of text appearance styles at once, instead of trying each style one by one? I notice there is a very long list of defined styles, but I cannot view them all together to compare.
<android.support.design.widget.TextInputLayout
android:id="#+id/textinputlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="40dp"
app:hintTextAppearance="#android:style/TextAppearance.DeviceDefault.Inverse">
<android.support.design.widget.TextInputEditText
android:id="#+id/nameEdit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="User Name" />
</android.support.design.widget.TextInputLayout>

You can do like this.
change TextInputLayout's LEFT-TOP text color
app:hintTextAppearance="#style/text_in_layout_hint_Style"
style code
<style name="text_in_layout_hint_Style">
<item name="android:textColor">#FF0000</item>
</style>
You can do this in .java.
textInputLayout.setHintTextAppearance(R.style.text_in_layout_hint_Style);

Try to add this in TextInputEditText
android:textColorHint="#color/yourColor"

TextInputLayout not showing hint while typing

I am using TextInputLayout from com.android.support:design.My problem is that when the editText gets focus, the hint is not displayed above the editText, and when the editText loses the focus after typing in it, the hint appears above the editText. I want the hint to appear above the editText when it gets focus in addition to the appearance when it loses focus.
My xml file:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/et_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:hint="#string/id_hint"/>
</android.support.design.widget.TextInputLayout>
and in my gradle I am using:
compile 'com.android.support:design:26.0.2'
Thank you very much

Try this Define style
<style name="TextInputLayoutLabelGrey" parent="Widget.Design.TextInputLayout">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#color/your_color</item>
<item name="android:textColor">#color/your_color</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#color/your_color</item>
<item name="colorControlNormal">#color/your_color</item>
<item name="colorControlActivated">#color/your_color</item>
</style>
Your layout xml
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:theme="#style/TextInputLayoutLabelGrey">
<android.support.v7.widget.AppCompatEditText
android:id="#+id/et_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="number"
android:hint="#string/id_hint"/>
</android.support.design.widget.TextInputLayout>

you need to use TextInputEditText instead
ex:
<android.support.design.widget.TextInputLayout
android:id="#+id/textInputUserName"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/toolbar"
android:layout_marginLeft="30dp"
android:layout_marginRight="30dp"
android:layout_marginTop="10dp">
<android.support.design.widget.TextInputEditText
android:id="#+id/etUserName"
android:textAlignment="viewStart"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/emailorPhone"
android:imeActionLabel="#string/next"
android:imeOptions="actionNext"
android:inputType="text" />
</android.support.design.widget.TextInputLayout>

TextInputLayout and EditText double hint issue

I want to set the hint with java in EditText(which is in TextInputLayout).
Code used for setting hint:
aET = (EditText) findViewById(R.id.aET);
aET.setHint("h?");
But even when edittext is focused, Hint is displayed twice(inside edittext also).
Please let me know if anyone had faced and found some workaround
when editText is focused...
when editText is not focused..
EDIT[10th July 2015]:
<android.support.design.widget.TextInputLayout
android:id="#+id/aTIL"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="#+id/aET" />
</android.support.design.widget.TextInputLayout>

This problem occurs because the hint from the xml is passed on to the TextInputLayout, so it can be displayed as a floating hint. But when you set it programatically, the hint is set to the EditText, which then results in two hints (one from the xml that is a floating hint and one you set programatically and is a normal EditText hint). If you wish to change the floating hint, you must set the hint on TextInputLayout.
You code will then look like this:
aTIL = (TextInputLayout) findViewById(R.id.aTIL);
aTIL.setHint("h?");

I found the solution !
In your EditText add
android:textColorHint="#android:color/transparent"
And in the code set the hint from the EditText
aET.setHint("h?");
The hint in your editText is hidden and the hint from the TextInputLayout is shown.
EDIT :
Other solution (The best)
Update Graddle with the new version of android:design
compile 'com.android.support:design:22.2.1'

I also had this issue.
when I needed to update the hint, I (erroneously) did that on both the EditText and the TextInputLayout, which resulted in a blur.
solution was to not call EditText.setHint() but only TextInputLayout.setHint()

You can go by using two hint texts. One for the TextInputLayout and other for the edit text inside it.Below is the reference:
<android.support.design.widget.TextInputLayout
style="#style/editText_layout"
android:id="#+id/entryScreenProduction_editText_percentCompleted_layout"
android:hint="%Completed">
<EditText
android:id="#+id/entryScreenProduction_editText_percentCompleted"
style="#style/editTextNotes"
android:gravity="center_vertical|top"
android:inputType="numberDecimal"
android:textAlignment="viewStart"
android:hint="0.0"/>
</android.support.design.widget.TextInputLayout>
But this has a problem. The UI will look like below. The hints will overlap.
To avoid the above ugly UI, you have to control this from program.Set the hint text of the EditText only when there is focus on the field, else remove the hint text.
android:hint="0.0"
Remove the above line from the layout xml file and do as below:
m_editText_completed = (EditText) findViewById(R.id.entryScreenProduction_editText_percentCompleted);
m_editText_completed.setOnFocusChangeListener(new View.OnFocusChangeListener() {
#Override
public void onFocusChange(View view, boolean b) {
if(b){
m_editText_completed.setHint("0.0");
}
else {
m_editText_completed.setHint("");
}
}
});
I hope this solves you issue. God Speed !!!

first compile dependency
compile 'com.rengwuxian.materialedittext:library:2.1.3'
add this in your xml
<com.rengwuxian.materialedittext.MaterialEditText
android:id="#+id/etId"
android:layout_width="match_parent"
android:layout_height="70dip"
android:hint="Hint goes here"
android:textColor = "#000000"
android:textSize="15sp"
app:met_accentTypeface="fonts/yourcustomfonts.ttf"
app:met_floatingLabel="normal"
app:met_floatingLabelTextColor="#ff0000"
app:met_floatingLabelTextSize="15sp"
app:met_hideUnderline="true"
app:met_textColorHint="#ff00ff"
app:met_typeface="fonts/yourcustomfont.ttf"/>
add xmlns:app="http://schemas.android.com/apk/res-auto"

Simple use this programmatically it's working for me
TextInputLayout til = new TextInputLayout(this);
til.setHintTextAppearance(android.R.style.TextAppearance_Large);
You can customize the style as i mention below...
<style name="TextInputLayout" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/colorPrimaryDark</item>
<item name="android:textColorHint">#color/colorPrimaryDark</item>
<item name="android:textSize">23sp</item>
</style>
TextInputLayout til = new TextInputLayout(this);
til.setHint("hai);
til.setHintTextAppearance(R.style.TextInputLayout);

In my case, I follow this line of code in kotlin
kotlin code
val edPasswordSignIn = findViewById<TextInputEditText>(R.id.edPasswordSignIn)
edPasswordSignIn.setHint("Password")
edPasswordSignIn.setOnFocusChangeListener { v, hasFocus ->
if (hasFocus){
edPasswordSignIn.setHint("Password")
}
else
edPasswordSignIn.setHint("")
}
XML code
<!--TextInput layout which acts as a wrapper to the edit text-->
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#f29358"
app:hintTextAppearance="#style/TextAppearance.AppCompat.Large"
app:passwordToggleEnabled="true"
app:passwordToggleTint="#color/colorPrimary"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
android:scrollbarSize="25dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:gravity="fill_vertical"
app:layout_constraintTop_toTopOf="parent">
<!--Using the TextInputEditText,which is
same as the edit text,but remember-->
<!--that we need to use TextInputEditText
with TextInputLayout-->
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/edPasswordSignIn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#null"
android:backgroundTint="#color/white"
android:gravity="center|left"
android:inputType="textPassword"
android:paddingTop="-2dp"
android:paddingBottom="-1dp"
android:textSize="#dimen/_11sdp" />
</com.google.android.material.textfield.TextInputLayout>
before enter the text
After the enter the text

<com.google.android.material.textfield.TextInputLayout
android:id="#+id/textInputLayout"
app:hintEnabled="false"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/textField"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="Hint" />
</com.google.android.material.textfield.TextInputLayout>
app:hintEnabled="false"
This is enough to hide the default label.