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>
Related
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"
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"
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>
I'm using a TextInputLayout wrapped around an EditText. Right now the counter is black, I'd like it to be white. I'm not sure what option to set to get it to be white.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
android:textColor="#color/white"
android:textColorHint="#color/white"
>
<EditText
android:id="#+id/myfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
android:hint="#string/myfield_hint"
android:inputType="text"
android:maxLength="26"
android:textColor="#color/white"
android:textColorHint="#color/white"/>
</android.support.design.widget.TextInputLayout>
I decided to write this answer based on comments from previous one.
At first, you need to create the style for your counter, for example:
<style name="CounterStyle" parent="TextAppearance.AppCompat.Small">
<item name="android:textColor">#android:color/white</item>
<!--other parameters that you want to change -->
</style>
Then add this style to TextInputLayout:
app:counterTextAppearance="#style/CounterStyle"
That's all, it should works. Full code:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:counterEnabled="true"
app:counterTextAppearance="#style/CounterStyle"
android:textColor="#color/white"
android:textColorHint="#color/white">
<EditText
android:id="#+id/myfield"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:backgroundTint="#color/white"
android:hint="#string/myfield_hint"
android:inputType="text"
android:maxLength="26"
android:textColor="#color/white"
android:textColorHint="#color/white"/>
</android.support.design.widget.TextInputLayout>
You can also use some style for the overflow counter:
app:counterOverflowTextAppearance="#style/YourOverflowTextStyleHere"
As described here (thanks #Sufian for the link)
Please add:
app:counterTextAppearance="#android:color/white"
to your TextInputLayout.
Hope this helps!
I want to change the text color of TextInputLayout in all states.
Means when it Edittext has focus / When editext do not have focus and edittext is is not empty
I am doing like this.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
app:hintTextAppearance="#style/TextInputLayoutHint"
android:layout_height="wrap_content">
<EditText
android:id="#+id/location"
android:layout_width="match_parent"
style="#style/MyEditTextAppearance"
android:layout_height="wrap_content"
android:inputType="textEmailAddress"
android:hint="#string/location" />
</android.support.design.widget.TextInputLayout>
<style name="TextInputLayoutHint" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/edittext_hint_small</item>
</style>
I work find when my edittext has focus, however when edittext do not have focus it changes its hint text color to same as what edittext hint color is.