In my app I get a color scheme for the app from the server. I update colors for all app views according to the server settings. My question is related to updating colors of EditText in the selected state:
I can change a background color of selection, using the editText.setHighlightColor() method, but can I somehow change a color of blue drag views at the left and right bottom corners? I can't change the color, using the colorAccent style attribute, as I get the color from the server at runtime. Can I change the drag views dynamically?
Here is full example, custom TextInputLayout colors:
in your custom *.xml file, check properties style and android:theme
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/txtConfirmPassword"
style="#style/TextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="9dp"
android:hint="#string/confirm_password_hint"
android:importantForAutofill="no"
app:hintAnimationEnabled="false"
app:hintEnabled="false"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
style="#style/TextInputEditTextStyle"
android:layout_width="match_parent"
android:layout_height="48dp"
android:hint="#string/password_hint"
android:inputType="textPassword"
android:singleLine="true"
android:theme="#style/TextInputEditTextTheme" />
</com.google.android.material.textfield.TextInputLayout>
in your themes.xml file
<style name="TextInputEditTextStyle">
<item name="android:textColor">#color/main_text</item>
</style>
<style name="TextInputEditTextTheme">
<item name="android:textColorHighlight">#color/gray2</item> <!-- background of selected text -->
<item name="android:colorControlActivated">#color/main_text</item> <!-- cursor -->
</style>
you can custom TextInputLayout's border, by adding this to themes.xml
<style name="TextInputLayoutStyle" parent="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/text_input_layout_tint</item>
<item name="boxStrokeWidth">1dp</item>
<item name="boxStrokeWidthFocused">1dp</item>
<item name="boxCornerRadiusBottomEnd">8dp</item>
<item name="boxCornerRadiusBottomStart">8dp</item>
<item name="boxCornerRadiusTopStart">8dp</item>
<item name="boxCornerRadiusTopEnd">8dp</item>
</style>
file #color/text_input_layout_tint:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/action_yes" android:state_focused="true" />
<item android:color="#color/stroke" />
</selector>
I'm trying to create a com.google.android.material.textfield.TextInputLayout aka TextInputLayout in my application and make hint text change its color depending on the presence of the text in the field.
Right now code for this element looks like this:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/sign_up_email_text_input"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="#string/sign_up_email_hint"
app:errorEnabled="true"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintVertical_bias="0.57"
app:layout_constraintWidth_percent="0.78"
android:textColorHighlight="#FF00FF"
android:textColorHint="#00FF00"
style="#style/TextInputLayout"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/sign_up_email_edit_text"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:inputType="textEmailAddress"
/>
</com.google.android.material.textfield.TextInputLayout>
I'm applying a style
<style name="TextInputLayout" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="android:textColorHint">#FFFFFF</item>
<item name="android:textColor">#FFFF00</item>
<item name="colorAccent">#FF00FF</item>
<item name="colorControlNormal">#FF0000</item>
<item name="colorControlActivated">#00FF00</item>
<item name="colorControlHighlight">#0000FF</item>
</style>
But this style only applies to the hint color when it's inactive and it applies the same color (android:textColorHint) to both states of the hint - when it fills the textField and when it jumps to a corner.
When the TextInput receives focus, the label changes color to a colorAccent color from the THEME, not from the style I applied
My question is - how can I make hint label change color depending on the presence of text (not on TextInput being focused or not) using XML only? I've seen examples of people doing so before (on support libraries) but I couldn't achieve such a result myself.
Same issue faced while migrate to AndroidX.
Change parent theme
<style name="TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="android:textColorHint">#FFFFFF</item>
<item name="android:textColor">#FFFF00</item>
<item name="colorAccent">#FF00FF</item>
<item name="colorControlNormal">#FF0000</item>
<item name="colorControlActivated">#00FF00</item>
<item name="colorControlHighlight">#0000FF</item>
</style>
Had the same problem. The issue is with com.google.android.material:material:1.1.0-alphaXX. Issue was resolved by reverting to com.google.android.material:material:1.0.0.
Side note: I can't even inflate a layout which contains TextInputLayout when using com.google.android.material:material:1.1.0-alpha08. 1.1.0 seems to be full of problems.
I'm placing a TextInputEditText widget onto a white background. When the fragment first loads, the widget does not have focus. The border around the widget is white (or almost white), so it is invisible on a white background. Here is a screenshot of that widget, drawn on a black background for contrast:
As soon as I tap on the widget, the border becomes that of my primary color, which is exactly what I want. Here is a similar screenshot after the widget is activated.
I'm trying to control these colors through a style, and I've tried everything that I can think of, but I cannot figure out how to adjust that color. Here is my style (feel free to laugh at the various attempts):
<style name="MyTextInputLayout" parent="Base.Widget.MaterialComponents.TextInputLayout">
<item name="android:colorBackground">#android:color/black</item>
<item name="android:textColorHint">#color/colorPrimary</item>
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="android:colorControlActivated">#android:color/black</item>
<item name="android:colorControlNormal">#android:color/black</item>
<item name="android:colorControlHighlight">#android:color/black</item>
<item name="android:backgroundTint">#android:color/black</item>
<item name="android:colorAccent">#android:color/black</item>
</style>
<style name="MyTextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText">
<item name="android:textColor">#android:color/black</item>
<item name="android:colorBackground">#android:color/black</item>
<item name="android:colorControlActivated">#android:color/black</item>
<item name="android:colorControlNormal">#android:color/black</item>
<item name="android:colorControlHighlight">#android:color/black</item>
<item name="android:backgroundTint">#android:color/black</item>
<item name="android:colorAccent">#android:color/black</item>
</style>
And finally, the xml of the layout in case it is helpful:
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginBottom="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
style="#style/MyTextInputLayout">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/reg_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/username"
style="#style/MyTextInputEditText"/>
</com.google.android.material.textfield.TextInputLayout>
How can I change this border color when the widget is not active (i.e. does not have focus)?
I solved this in two main steps:
First problem I had was that the parent style for my TextInputLayout style needed to be changed to Widget.MaterialComponents.TextInputLayout.OutlinedBox.
Once I figured that out, I traced through the Android xml for that style and got to a file called mtrl_box_stroke_color.xml. This is a selector where the three colors for the standard TextInputLayout border are declared. That file looks like this:
So I copied that and created my own file in the res/color folder that I called edit_text_box_border.xml. I modified the three colors to suit my purposes, ultimately coming up with this:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="#color/colorPrimary" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="#color/colorPrimary" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="#color/colorPrimary"/>
</selector>
Then, back in my style, I had to get rid of my many color attempts and add an item for boxStrokeColor that pointed to this file. Here are both styles:
<style name="MyTextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="android:textColorHint">#color/colorPrimary</item>
<item name="android:paddingStart">16dp</item>
<item name="android:paddingEnd">16dp</item>
<item name="boxStrokeColor">#color/edit_text_box_border</item>
</style>
<style name="MyTextInputEditText" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
<item name="android:textColor">#android:color/black</item>
</style>
Now, when I run the app, I start out with this:
Which then turns into this when I tap on it:
That's what I was going for, so problem solved. Hope this helps someone.
1.
<com.google.android.material.textfield.TextInputLayout
...
style="#style/Widget.MaterialComponents.TextInputLayout.OutlineBox"
app:boxStrokeColor = "#android:color/holo_purple"
//border color when in active status
...
2. add the following in colors.xml file
<color name="mtrl_textinput_default_box_stroke_color">#00ff00</color>
//border color when in inactive status
Add
app:boxStrokeColor="#color/black"
app:hintTextColor="#color/black"
to your XML file. I tried all the color options. You can replace the "#color/black" with any color HEX code. Also write app:color and android will show you all the color options, there are many color fields that can be changed, like the error field which we can set to red to indicate the user has entered Invalid Data.
In case you need to change the outline color dynamically (for automatic field validation, for example) you can use the following hack:
Set
app:errorTextColor="#color/colorAccepted"
app:errorIconTint="#color/colorAccepted"
for TextInputLayout in xml.
Then in code:
text_input_layout.errorIconDrawable = null to remove the error icon
and text_input_layout.error = " " to enable the coloring or text_input_layout.error = null to disable it.
This way TextInputLayout takes more space. To resolve this you can customize the errorTextAppearance by defining your own style:
<style name="ErrorTextStyle" parent="TextAppearance.MaterialComponents.Caption">
<item name="android:textSize">0sp</item>
</style>
Note:
That's clearly a hack rather than a proper solution.
I use this:
<style name="TextInputLayoutTheme" parent="TextAppearance.AppCompat">
<item name="android:textColorHint">#color/secondaryTextLight</item>
<item name="android:backgroundTint" tools:targetApi="lollipop">#color/colorAccent</item>
<item name="android:textColor">#color/white</item>
<item name="colorControlActivated">#color/colorAccent</item>
</style>
and in the xml:
<com.google.android.material.textfield.TextInputEditText
style="#style/TextInputLayoutTheme"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
I have a very specific issue for changing the outline of the textbox for TextInputLayout when it's unfocused. I can't seem to find an attribute to change the color for the border of my "unfocused" text box.
Here's a visual example of what I'm trying to do:
The color of this (textbox):border is not white. currently its not focused.
After I click it, it turns white:
I don't know what I need to change, it doesn't seem like there is an attribute to change it.
I'm also using material design text input layout styles, although I don't see if that will affect it.
Here is my xml code for the text box:
<other layouts ... >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_gravity="bottom"
android:layout_margin="5dp"
android:background="#drawable/item_recycler_view">
<android.support.design.widget.TextInputLayout
android:id="#+id/dialog_text_input_layout"
style="#style/Widget.AppTheme.TextInputLayoutList"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Quick Add..."
android:textColorHint="#color/colorWhite"
app:boxStrokeColor="#color/colorWhite"
app:errorEnabled="true"
>
<android.support.design.widget.TextInputEditText
android:id="#+id/dialog_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:maxLines="1"
android:textColor="#color/colorWhite"
android:textSize="14sp" />
</android.support.design.widget.TextInputLayout>
</RelativeLayout>
</other layouts...>
And here are the styles that I use for this:
<style name="TextAppearance.AppTheme.TextInputLayout.HintTextAlt" parent="TextAppearance.MaterialComponents.Subtitle2">
<item name="android:textColor">#color/colorWhite</item>
</style>
<style name="Widget.AppTheme.TextInputLayoutList" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="hintTextAppearance">#style/TextAppearance.AppTheme.TextInputLayout.HintTextAlt</item>
<item name="boxStrokeColor">#color/colorWhite</item>
<item name="boxCornerRadiusBottomEnd">5dp</item>
<item name="boxCornerRadiusBottomStart">5dp</item>
<item name="boxCornerRadiusTopEnd">5dp</item>
<item name="boxCornerRadiusTopStart">5dp</item>
<item name="android:layout_margin">5dp</item>
</style>
Thanks, any help or suggestions are welcome!
If you want to set the color for the outline box in unfocused mode instead of the default black, you have to add this line in colors.xml file which will override the default color for the outline box.
copy this line as it is. you can change color to what you want.
<color name="mtrl_textinput_default_box_stroke_color">#fff</color>
until now it will work, for more control on TextInputLayout you may add this style in styles.xml
<style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#fff</item>
<item name="boxStrokeWidth">2dp</item>
</style>
then add theme to TextInputLayout
android:theme="#style/TextInputLayoutStyle"
With the Material Components Library just use the boxStrokeColor attribute.
It can work with a selector.
Just use something like:
<com.google.android.material.textfield.TextInputLayout
app:boxStrokeColor="#color/text_input_layout_stroke_color"
..>
with:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="..." android:color="#color/...." android:state_focused="true"/>
<item android:alpha="..." android:color="#color/...." android:state_hovered="true"/>
<item android:alpha="..." android:color="#color/...." android:state_enabled="false"/>
<item android:alpha="..." android:color="#color/...."/> <!-- unfocused -->
</selector>
Answer from Amjad was right, but starting from 1.1.0-alpha02 (probably even alpha01) after this issue was resolved it's possible to define color in color state list using the same boxStrokeColor attribute, e.g. how it's done in lib:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorPrimary" android:state_focused="true"/>
<item android:alpha="0.87" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.38" android:color="?attr/colorOnSurface"/>
</selector>
Usage:
...
app:boxStrokeColor="#color/text_input_layout_stroke_color"
...
app:boxStrokeColor="#000000"
app:boxStrokeWidthFocused="0.5dp"
app:boxStrokeWidth="0.5dp"
This will make the box color constant event it is focused!
With reference to the new TextInputLayout released by Google, how do I change the floating label text color?
Setting colorControlNormal, colorControlActivated, colorControlHighLight in styles does not help.
This is what I have now:
Try The Below Code It Works In Normal State
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/TextLabel">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Hiiiii"
android:id="#+id/edit_id"/>
</android.support.design.widget.TextInputLayout>
In Styles Folder TextLabel Code
<style name="TextLabel" parent="TextAppearance.AppCompat">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#color/Color Name</item>
<item name="android:textSize">20sp</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#color/Color Name</item>
<item name="colorControlNormal">#color/Color Name</item>
<item name="colorControlActivated">#color/Color Name</item>
</style>
Set To Main Theme of App,It Works Only Highlight State Only
<item name="colorAccent">#color/Color Name</item>
Update:
UnsupportedOperationException: Can't convert to color: type=0x2 in api 16 or below
Solution
Update:
Are you using Material Components Library
You can add below lines to your main theme
<item name="colorPrimary">#color/your_color</item> // Activated State
<item name="colorOnSurface">#color/your_color</item> // Normal State
or else do you want different colors in noraml state and activated state and with customization follow below code
<style name="Widget.App.TextInputLayout" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="materialThemeOverlay">#style/ThemeOverlay.App.TextInputLayout</item>
<item name="shapeAppearance">#style/ShapeAppearance.App.SmallComponent</item> //Changes the Shape Apperance
<!--<item name="hintTextColor">?attr/colorOnSurface</item>--> //When you added this line it will applies only one color in normal and activate state i.e colorOnSurface color
</style>
<style name="ThemeOverlay.App.TextInputLayout" parent="">
<item name="colorPrimary">#color/colorPrimaryDark</item> //Activated color
<item name="colorOnSurface">#color/colorPrimary</item> //Normal color
<item name="colorError">#color/colorPrimary</item> //Error color
//Text Appearance styles
<item name="textAppearanceSubtitle1">#style/TextAppearance.App.Subtitle1</item>
<item name="textAppearanceCaption">#style/TextAppearance.App.Caption</item>
<!--Note: When setting a materialThemeOverlay on a custom TextInputLayout style, don’t forget to set editTextStyle to either a #style/Widget.MaterialComponents.TextInputEditText.* style or to a custom one that inherits from that.
The TextInputLayout styles set materialThemeOverlay that overrides editTextStyle with the specific TextInputEditText style needed. Therefore, you don’t need to specify a style tag on the edit text.-->
<item name="editTextStyle">#style/Widget.MaterialComponents.TextInputEditText.OutlinedBox</item>
</style>
<style name="TextAppearance.App.Subtitle1" parent="TextAppearance.MaterialComponents.Subtitle1">
<item name="fontFamily">#font/your_font</item>
<item name="android:fontFamily">#font/your_font</item>
</style>
<style name="TextAppearance.App.Caption" parent="TextAppearance.MaterialComponents.Caption">
<item name="fontFamily">#font/your_font</item>
<item name="android:fontFamily">#font/your_font</item>
</style>
<style name="ShapeAppearance.App.SmallComponent" parent="ShapeAppearance.MaterialComponents.SmallComponent">
<item name="cornerFamily">cut</item>
<item name="cornerSize">4dp</item>
</style>
Add the below line to your main theme or else you can set style to textinputlayout in your xml
<item name="textInputStyle">#style/Widget.App.TextInputLayout</item>
<style name="TextAppearance.App.TextInputLayout" parent="#android:style/TextAppearance">
<item name="android:textColor">#color/red</item>
<item name="android:textSize">14sp</item>
</style>
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/gray" //support 23.0.0
app:hintTextAppearance="#style/TextAppearence.App.TextInputLayout" >
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/hint" />
</android.support.design.widget.TextInputLayout>
Found the answer, use android.support.design:hintTextAppearance attribute to set your own floating label appearance.
Example:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:hintTextAppearance="#style/TextAppearance.AppCompat">
<EditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/prompt_password"/>
</android.support.design.widget.TextInputLayout>
how do I change the floating label text color?
With the Material Components library you can customize the TextInputLayout the hint text color using (it requires the version 1.1.0)
In the layout:
app:hintTextColor attribute : the color of the label when it is collapsed and the text field is active
android:textColorHint attribute: the color of the label in all other text field states (such as resting and disabled)
<com.google.android.material.textfield.TextInputLayout
app:hintTextColor="#color/mycolor"
android:textColorHint="#color/text_input_hint_selector"
.../>
extending a material style Widget.MaterialComponents.TextInputLayout.*:
<style name="MyFilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="hintTextColor">#color/mycolor</item>
<item name="android:textColorHint">#color/text_input_hint_selector</item>
</style>
The default selector for android:textColorHint is:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.38" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0.6" android:color="?attr/colorOnSurface"/>
</selector>
You don't need to use android:theme="#style/TextInputLayoutTheme" to change the floating label color, since it's going to affect to the entire theme for the small TextView used as label. Instead, you could use app:hintTextAppearance="#style/TextInputLayout.HintText" where:
<style name="TextInputLayout.HintText">
<item name="android:textColor">?attr/colorPrimary</item>
<item name="android:textSize">#dimen/text_tiny_size</item>
...
</style>
Let me know if the solution works :-)
Ok, so, I found this answer very helpful and thanks to all the people who contributed. Just to add something, though. The accepted answer is indeed the correct answer...BUT...in my case, I was looking to implement the error message below the EditText widget with app:errorEnabled="true" and this single line made my life difficult. it seems that this overrides the theme I chose for android.support.design.widget.TextInputLayout, which has a different text color defined by android:textColorPrimary.
In the end I took to applying a text color directly to the EditText widget. My code looks something like this:
styles.xml
<item name="colorPrimary">#color/my_yellow</item>
<item name="colorPrimaryDark">#color/my_yellow_dark</item>
<item name="colorAccent">#color/my_yellow_dark</item>
<item name="android:textColorPrimary">#android:color/white</item>
<item name="android:textColorSecondary">#color/dark_gray</item>
<item name="android:windowBackground">#color/light_gray</item>
<item name="windowNoTitle">true</item>
<item name="windowActionBar">false</item>
<item name="android:textColorHint">#color/dark_gray</item>
<item name="android:colorControlNormal">#android:color/black</item>
<item name="android:colorControlActivated">#android:color/white</item>
And my widget:
<android.support.design.widget.TextInputLayout
android:id="#+id/log_in_layout_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<EditText
android:id="#+id/log_in_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="#android:color/black"
android:ems="10"
android:hint="#string/log_in_name"
android:inputType="textPersonName" />
</android.support.design.widget.TextInputLayout>
Now it displays black text color instead of the textColorPrimary white.
Programmatically you can use:
/* Here you get int representation of an HTML color resources */
int yourColorWhenEnabled = ContextCompat.getColor(getContext(), R.color.your_color_enabled);
int yourColorWhenDisabled = ContextCompat.getColor(getContext(), R.color.your_color_disabled);
/* Here you get matrix of states, I suppose it is a matrix because using a matrix you can set the same color (you have an array of colors) for different states in the same array */
int[][] states = new int[][]{new int[]{android.R.attr.state_enabled}, new int[]{-android.R.attr.state_enabled}};
/* You pass a ColorStateList instance to "setDefaultHintTextColor" method, remember that you have a matrix for the states of the view and an array for the colors. So the color in position "colors[0x0]" will be used for every states inside the array in the same position inside the matrix "states", so in the array "states[0x0]". So you have "colors[pos] -> states[pos]", or "colors[pos] -> color used for every states inside the array of view states -> states[pos] */
myTextInputLayout.setDefaultHintTextColor(new ColorStateList(states, new int[]{yourColorWhenEnabled, yourColorWhenDisabled})
Explanation:
Get int color value from a color resource (a way to present rgb colors used by android).
I wrote ColorEnabled, but really it should be, for this answer, ColorHintExpanded & ColorViewCollapsed. Anyway this is the color you will see when the hint of a view "TextInputLayout" is on Expanded or Collapsed state; you will set it by using next array on function "setDefaultHintTextColor" of the view.
Reference:
Reference for TextInputLayout - search in this page the method
"setDefaultHintTextColor" for more info
Looking to docs above you can see that the functions set the colors for Expanded & Collapsed hint by using a ColorStateList.
ColorStateList docs
To create the ColorStateList I first created a matrix with the states I want, in my case state_enabled & state_disabled (whose are, in TextInputLayout, equals to Hint Expanded and Hint Collapsed [I don't remember in which order lol, anyway I found it just doing a test]).
Then I pass to the constructor of the ColorStateList the arrays with int values of color resources, these colors have a correspondences with the states matrix (every element in colors array correspond to the respective array in states matrix at same position). So the first element of the colors array will be used as color for every state in the first array of the states matrix (in our case the array has only 1 element: enabled state = hint expanded state for TextInputLayut).
Last things states have positive / negative values, and you have only the positive values, so the state "disabled" in android attrs is "-android.state.enabled", the state "not focused" is "-android.state.focused" ecc.. ecc..
Hope this is helpful.
Bye have a nice coding (:
I suggest you make style theme for TextInputLayout and change only accent color. Set parent to your app base theme:
<style name="MyTextInputLayout" parent="MyAppThemeBase">
<item name="colorAccent">#color/colorPrimary</item>
</style>
<android.support.design.widget.TextInputLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:theme="#style/MyTextInputLayout">
In the latest version of the support library (23.0.0+), TextInputLayout takes the following attribute in XML to edit the floating label color: android:textColorHint="#color/white"
Instead of Brahmam Yamani answer I prefer to use Widget.Design.TextInputLayout as parent. That ensures, that all required items are present, even if not all items are overwritten. In Yamanis answer, the app will crash with an unresolvable resource, if setErrorEnabled(true) is called.
Simply change the style to the following:
<style name="TextLabel" parent="Widget.Design.TextInputLayout">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#color/Color Name</item>
<item name="android:textSize">20sp</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#color/Color Name</item>
<item name="colorControlNormal">#color/Color Name</item>
<item name="colorControlActivated">#color/Color Name</item>
</style>
To change color of hint and edit text underline color : colorControlActivated
To change character counter color : textColorSecondary
To change error message color : colorControlNormal
To change password visibility button tint : colorForeground
For more info on TextInputLayout read http://www.zoftino.com/android-textinputlayout-tutorial
<style name="MyAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorControlActivated">#e91e63</item>
<item name="android:colorForeground">#33691e</item>
<item name="colorControlNormal">#f57f17</item>
<item name="android:textColorSecondary">#673ab7</item>
</style>
In my case I added this "app:hintTextAppearance="#color/colorPrimaryDark"in my TextInputLayout widget.
From the documentation:
The hint should be set on the TextInputLayout, rather than the EditText. If a hint is specified on the child EditText in XML, the TextInputLayout might still work correctly; TextInputLayout will use the EditText's hint as its floating label. However, future calls to modify the hint will not update TextInputLayout's hint. To avoid unintended behavior, call setHint(CharSequence) and getHint() on TextInputLayout, instead of on EditText.
So I set android:hint and app:hintTextColor on TextInputLayout, not on TextInputEditText and it worked.
This is simple but the developer gets confused due to multiple views having the same attributes in different configurations/namespaces.
In the case of the TextInputLayout we have every time a different view and with params either with TextInputEditText or directly to TextInputLayout.
I was using all the above fixes:
But I found that I was using
app:textColorHint="#color/textcolor_black"
actually i should be using
android:textColorHint="#color/textcolor_black"
As an attribute of TextinputLayout
textcolor_black.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/black_txt" android:state_enabled="true" />
<item android:color="#color/black_txt" android:state_selected="true" />
<item android:color="#color/txtColorGray" android:state_selected="false" />
<item android:color="#color/txtColorGray" android:state_enabled="false" />
</selector>
Too many complicated solutions. Here is a one liner to change the color of the floating label.
<com.google.android.material.textfield.TextInputLayout
app:hintTextColor="#color/white"/>
In addition to change other attributes:
To change the box stroke color:
<com.google.android.material.textfield.TextInputLayout
app:boxStrokeColor="#color/green"
To change the box stroke width:
<com.google.android.material.textfield.TextInputLayout
app:boxStrokeWidth="1.5dp"
To change the edit TextInputEditText hint color:
<com.google.android.material.textfield.TextInputEditText
android:textColorHint="#color/white"
To change the TextInputEditText color:
<com.google.android.material.textfield.TextInputEditText
android:textColor="#color/white" />
you should change your colour here
<style name="Base.Theme.DesignDemo" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#673AB7</item>
<item name="colorPrimaryDark">#512DA8</item>
<item name="colorAccent">#FF4081</item>
<item name="android:windowBackground">#color/window_background</item>
</style>
Now, simply using colorAccent and colorPrimary will work perfectly.
I solve the problem.
This is Layout：
<android.support.design.widget.TextInputLayout
android:id="#+id/til_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/username"
>
<android.support.v7.widget.AppCompatEditText android:id="#+id/et_username"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
/>
</android.support.design.widget.TextInputLayout>
This is Style:
<style name="AppBaseTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!--
Theme customizations available in newer API levels can go in
res/values-vXX/styles.xml, while customizations related to
backward-compatibility can go here.
-->
</style>
<!-- Application theme. -->
<style name="AppTheme" parent="AppBaseTheme">
<!-- All customizations that are NOT specific to a particular API-level can go here. -->
<item name="colorAccent">#color/pink</item>
<item name="colorControlNormal">#color/purple</item>
<item name="colorControlActivated">#color/yellow</item>
</style>
You should use your theme in application:
<application
android:allowBackup="true"
android:icon="#drawable/ic_launcher"
android:label="#string/app_name"
android:theme="#style/AppTheme" >
</application>
to change color of the text label when you are focusing on it. i.e. typing in it. you have to add specify
<item name="android:textColorPrimary">#color/yourcolorhere</item>
Just a note:
You have to add all these implementations to your main theme.
Its Working for me .....
add hint color in TextInputLayout
<android.support.design.widget.TextInputLayout
android:textColorHint="#ffffff"
android:id="#+id/input_layout_password"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/edtTextPassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:hint="Password"
android:inputType="textPassword"
android:singleLine="true"
/>
</android.support.design.widget.TextInputLayout>
I tried using android:textColorHint in the android.support.design.widget.TextInputLayout it works fine.
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="#color/colorAccent">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Hello"
android:imeActionLabel="Hello"
android:imeOptions="actionUnspecified"
android:maxLines="1"
android:singleLine="true"/>
</android.support.design.widget.TextInputLayout>
<style name="AppTheme2" parent="AppTheme">
<!-- Customize your theme here. -->
<item name="colorControlNormal">#fff</item>
<item name="colorControlActivated">#fff</item></style>
add this to styles and set TextInputLayout Theam to App2 and it will work ;)
<com.google.android.material.textfield.TextInputLayout
android:hint="Hint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/TextInputLayoutHint">
<androidx.appcompat.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:maxLines="1"
android:paddingTop="#dimen/_5sdp"
android:paddingBottom="#dimen/_5sdp"
android:textColor="#000000"
android:textColorHint="#959aa6" />
</com.google.android.material.textfield.TextInputLayout>
res/values/styles.xml
<style name="TextInputLayoutHint" parent="">
<item name="android:textColorHint">#545454</item>
<item name="colorControlActivated">#2dbc99</item>
<item name="android:textSize">11sp</item>
</style>
Can use app:hintTextColor if you use com.google.android.material.textfield.TextInputLayout, try this
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/app_name"
app:hintTextColor="#android:color/white">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>
</com.google.android.material.textfield.TextInputLayout>
Try The Below Code It Works In Normal State
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="#style/TextLabel">
<android.support.v7.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Hiiiii"
android:id="#+id/edit_id"/>
</android.support.design.widget.TextInputLayout>
In Styles Folder TextLabel Code
<style name="TextLabel" parent="TextAppearance.AppCompat">
<!-- Hint color and label color in FALSE state -->
<item name="android:textColorHint">#color/Color Name</item>
<item name="android:textSize">20sp</item>
<!-- Label color in TRUE state and bar color FALSE and TRUE State -->
<item name="colorAccent">#color/Color Name</item>
<item name="colorControlNormal">#color/Color Name</item>
<item name="colorControlActivated">#color/Color Name</item>
</style>
Because you must add colorControlNormal, colorControlActivated, colorControlHighLight items to main application theme:
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlActivated">#color/yellow_bright</item>
<item name="colorControlNormal">#color/yellow_black</item>
</style>