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"
Related
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"
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 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 has a default green tear drop that appears under the text to help select text or position. How can I change the color of it without #drawables? I tried android:textSelectHandle="#color/colorPrimary" but that just made it disappear.
<EditText
android:inputType="text"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_toEndOf="#+id/imgMagnifyingGlass"
android:textAlignment="viewStart"
android:backgroundTint="#color/colorWhite"
android:textCursorDrawable="#null"
android:textSelectHandle="#color/colorPrimary"
android:textColor="#color/colorGray"
android:id="#+id/editTextWord" />
I fixed it by adding this to my styles.xml:
<item name="colorControlActivated">#color/colorPrimary</item>
All the other accepted answers on this topic involve #drawables and this seems the simplest way.
My login screen locks like this
http://pbrd.co/UVekFg
with that code
<TextView
android:id="#+id/login_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingTop="20dp"
android:text="#string/login_label_text" />
<EditText
android:id="#+id/username"
android:layout_width="#dimen/textfield_width"
android:layout_height="#dimen/textfield_height"
android:background="#drawable/textfeld"
android:ems="10" >
<requestFocus />
</EditText>
<TextView
android:id="#+id/login_password_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="#string/password" />
<EditText
android:id="#+id/login_password"
android:layout_width="#dimen/textfield_width"
android:layout_height="#dimen/textfield_height"
android:background="#drawable/textfeld"
android:inputType="textPassword" />
Actually the first character starts directly on the left border of the edittextfield. Is there an option so that there a bit padding between the first character and the left border of my textbox?
Thanks
You should probably provide padding for all the four edges of the widget by declaring android:padding = 5dp attribute in your EditText.
From what I see in your screen shot, it would be better to use android:layout_margin attribute to provide breathing space between your widgets.
You'll want to set android:padding
But if you plan on using this custom EditText throughout your app, you may want to create a style and store all the custom pieces in there.
So for example in your styles.xml, you'd have:
<style name="Custom.EditText.Style" parent="#android:style/Widget.EditText">
<item name="android:background">#drawable/textfeld</item>
<item name="android:paddingLeft">6dp</item>
<item name="android:paddingTop">4dp</item>
<item name="android:paddingBottom">4dp</item>
</style>
Then in your xml layout, all you'd need is:
<EditText
...
style="#style/Custom.EditText.Style"
/>