I'm having this issue when I touch an EditText for changing text on Android:
A white frame appears around the red cursor, and I need it to be transparent for showing properly the line of the EditText. How do I change this?
code:
<EditText
android:id="#+id/login_user_name_text"
android:textCursorDrawable="#null"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="#color/black"
android:textSize="16sp"
android:inputType="textEmailAddress"
android:imeOptions="actionNext"
android:maxLines="1"
android:hint="#string/email"
android:maxLength="60"
/>
EDIT: I could fix it by replacing:
<item name="android:background">#color/white</item>
for
<item name="android:background">#color/transparent</item>
in styles.xml
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:windowDisablePreview">true</item>
<item name="android:background">#color/transparent</item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="drawerArrowStyle">#style/DrawerArrowStyle</item>
</style>
Sorry for the late,
I think you have <item name="android:popupBackground">#color/white</item> in your style from v21, just remove it, It may solve your problem
Another solution, which works if you are having this problem with an EditText inside a SearchView while using a Toolbar.
In your activity XML add the android:background="?attr/colorPrimary" attribute to Toolbar:
<android.support.v7.widget.Toolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:theme="#style/ToolBarStyle"
android:background="?attr/colorPrimary"
android:elevation="2dp" />
Then, remove <item name="android:background">#color/colorPrimary</item> from your ToolBarStyle in styles.xml.
Hope this helps someone else looking for a solution for this particular case.
better using #android:color/transparent instead of null on the android:textCursorDrawable="#android:color/transparent"
Add the following to your EditText XML instead of null;
android:textCursorDrawable="#drawable/colorcursor"
Then, create a file called colorcursor.xml inside your drawable folder;
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="3dp" />
<solid android:color="#FFFFFF" />
</shape>
Setting android:background to transparent didn't do the trick for me.
In my case I set a theme to the parent viewgroup that defined the background to be a certain color, so it was applied to the EditText as well. Making sure that the background was just set for the parent solved it.
Related
I have created a BottomNavigationView with 4 menus. Somehow its not setting the background color to cover the text and icon. See the screenshot, the text and image are still showing the white background
<style name="BottomNavigationView" parent="">
<item name="labelVisibilityMode">labeled</item>
<item name="itemHorizontalTranslationEnabled">false</item>
<item name="itemBackground">#android:color/holo_green_light</item>
<item name="itemTextColor">#drawable/selector_bottom_bar_text</item>
<item name="itemIconTint">#drawable/selector_bottom_bar_icon</item>
<item name="itemTextAppearanceActive">#style/navTextActive</item>
<item name="itemTextAppearanceInactive">#style/navTextInactive</item>
</style>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
style="#style/BottomNavigationView"
app:menu="#menu/bottom_nav" />
How to fix the text and iconbackground?
How to add a bit of space between the icon and text?
android:background="?android:attr/windowBackground"
app:itemIconTint="#drawable/bg_navigation"
app:itemTextColor="#drawable/bg_navigation"
Then create bg_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:color="hex_color_code" />
<item android:state_checked="true" android:color="hex_color_code" />
</selector>
For Spacing issue, You can check this answer.
I am not sure whether this will work. But, you can try adding this to your Activity.java file and see if it works.
navigationView.setItemIconTintList(null);
navigationView.setBackgroundTintList(null);
Thanks to #Eugen Pechanec. It worked. I was setting the background color in theme. That caused this. After removing the background from the theme it works correctly
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'm trying to customize a TextInputLayout with material style. I managed to set the focused state to the colors I want:
Using
<com.google.android.material.textfield.TextInputLayout
style="#style/LoginTextInputLayoutStyle"
android:theme="#style/LoginTextInputLayoutStyle"
android:textColorHint="#fff"
app:boxStrokeColor="#fff"
.....>
<EditText ...
where the style is:
<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="colorAccent">#fff</item>
</style>
But when the textinput is not focused I get this look:
How can I change the color of the black line to be white too?
Use this style to apply border color and border width like this :
<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#fff</item>
<item name="boxStrokeWidth">2dp</item>
</style>
get Additional details about styling from this link
Add below line in your colors.xml file that overrides default color for TextInputLayout
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>
As of version 1.1.0-alpha02 of the Material Components for Android it works to simply create a ColorStateList for these items. The procedure is as follows:
Create a new resource directory "color" in res and inside color add a color resource file named "text_input_box_stroke.xml" res/color/text_input_box_stroke.xml put something like the following:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#fcc" android:state_focused="true"/>
<item android:color="#cfc" android:state_hovered="true"/>
<item android:color="#ccf"/>
</selector>
Then in your styles.xml you would put:
<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/text_input_box_stroke</item>
</style>
Finally indicate your style for the actual TextInputLayout:
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/my_layout_id"
style="#style/LoginTextInputLayoutStyle"
...
As of Material Components Alpha 7 you simply create a color selector file as so:
colors/text_input_outline_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true" android:color="#color/buttonDark"/>
<item android:state_hovered="true" android:color="#color/buttonDark"/>
<item android:state_focused="true" android:color="#color/buttonDark"/>
<item android:color="#color/buttonDark"/>
</selector>
For more context into how this is being set. Here is relevant source code:
ColorStateList boxStrokeColorStateList =
MaterialResources.getColorStateList(context, a, R.styleable.TextInputLayout_boxStrokeColor);
if (boxStrokeColorStateList != null && boxStrokeColorStateList.isStateful()) {
defaultStrokeColor = boxStrokeColorStateList.getDefaultColor();
disabledColor =
boxStrokeColorStateList.getColorForState(new int[] {-android.R.attr.state_enabled}, -1);
hoveredStrokeColor =
boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_hovered}, -1);
focusedStrokeColor =
boxStrokeColorStateList.getColorForState(new int[] {android.R.attr.state_focused}, -1);
} else {
// If attribute boxStrokeColor is not a color state list but only a single value, its value
// will be applied to the box's focus state.
focusedStrokeColor =
a.getColor(R.styleable.TextInputLayout_boxStrokeColor, Color.TRANSPARENT);
defaultStrokeColor =
ContextCompat.getColor(context, R.color.mtrl_textinput_default_box_stroke_color);
disabledColor = ContextCompat.getColor(context, R.color.mtrl_textinput_disabled_color);
hoveredStrokeColor =
ContextCompat.getColor(context, R.color.mtrl_textinput_hovered_box_stroke_color);
}
From this list you can see that you want to ensure you are using a color selector with all states defined, or it will default back to another color.
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:color="#FFFFFF"/>
<item android:state_focused="false" android:color="#FFFFFF"/></selector>
create the color directory and inside that create a resource file
paste the above code in color directory xml file
and in text input layout style paste the below line
<item name="boxStrokeColor">#color/focus_tint_list</item>
First Remove from your TextInputLayout
<item name="boxStrokeColor">#color/YourColor</item>
Second, add a new color attribute
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true" >YourColor</color>
Must write the same name mtrl_textinput_default_box_stroke_color do n't change
I'm creating dynamically my screen. I'm using TextInputLayout and create my dynamic edit text in TextInputLayout. If you want to give TextInputLayout to the border, do the following steps in order.
1- include Build.gradle;
implementation 'com.google.android.material:material:1.0.0'
2- in Kotlin code;
val textInputLayout = TextInputLayout(this)
textInputLayout.apply {
boxStrokeColor = Color.parseColor("#E68A06")
setBoxBackgroundMode(TextInputLayout.BOX_BACKGROUND_OUTLINE)
setHintTextAppearance(R.style.ValidatableInputLayoutStyle_OutlineBox_HintInputLayoutStyle)
setBoxCornerRadii(16f, 16f, 16f, 16f)
setPadding(4, 0, 0, 0)
}
3- style.xml
<style name="ValidatableInputLayoutStyle.OutlineBox.HintInputLayoutStyle" parent="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="android:textColor">#color/colorPrimary</item>
<item name="android:textSize">14sp</item>
My Component image link
Matrial Edit Text
Step 1: Add library in build.gradle(Module App) module dependency section
implementation 'com.android.support:design:28.0.0-alpha1'
Step 2 : xml Code
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:boxStrokeColor="#0000FF"
app:boxStrokeWidth="2dp"
android:layout_gravity="center"
>
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/txtusername"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/lable" />
</com.google.android.material.textfield.TextInputLayout>
I created a default config.
<style name="Widget.Design.TextInputLayout" parent="AppTheme">
<item name="hintTextAppearance">#style/AppTheme.TextFloatLabelAppearance</item>
<item name="errorTextAppearance">#style/AppTheme.TextErrorAppearance</item>
<item name="counterTextAppearance">#style/TextAppearance.Design.Counter</item>
<item name="counterOverflowTextAppearance">#style/TextAppearance.Design.Counter.Overflow</item>
</style>
<style name="AppTheme.TextFloatLabelAppearance" parent="TextAppearance.Design.Hint">
<!-- Floating label appearance here -->
<item name="android:textColor">#color/colorAccent</item>
<item name="android:textSize">20sp</item>
</style>
<style name="AppTheme.TextErrorAppearance" parent="TextAppearance.Design.Error">
<!-- Error message appearance here -->
<item name="android:textColor">#ff0000</item>
<item name="android:textSize">20sp</item>
</style>
Step 1. Use 1.2.0-alpha05 or later
implementation 'com.google.android.material:material:1.2.0-alpha05'
Step 2 - Important!. Make sure your app theme is or is a descendant of Theme.MaterialComponents. See here
Once that's set all attribute setting work as expected.
Step 3. Use the attribute setting from the specification
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/filledTextField"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="#string/label_text"
app:helperTextEnabled="true"
app:helperText="#string/helper_text"
app:counterEnabled="true"
app:counterMaxLength="20"
app:startIconContentDescription="#string/leading_icon_content_desc"
app:startIconDrawable="#drawable/baseline_favorite_24">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</com.google.android.material.textfield.TextInputLayout>
Create a Theme and override "colorOnSurface" attr.
<style name="AppTheme.LoginScreenTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="colorOnSurface">#FFF</item>
</style>
Apply the theme to your login activity.
<activity
android:name=".login.ui.login.LoginActivity"
android:label="#string/title_activity_login"
android:launchMode="singleInstance"
android:screenOrientation="portrait"
android:theme="#style/AppTheme.LoginScreenTheme"
android:windowSoftInputMode="adjustResize|stateHidden"/>
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
app:boxStrokeColor="#fff"
android:textColorHint="#fff"
app:passwordToggleEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
***app:boxStrokeColor="#fff"***
android:inputType="textPassword"
android:textColor="#fff"
/>
</com.google.android.material.textfield.TextInputLayout>
Step 1. add this line to your colors.xml file
<color name="mtrl_textinput_default_box_stroke_color">#4169E1</color>
Step 2. add this property in TextInputLayout
app:boxStrokeColor="#color/mtrl_textinput_default_box_stroke_color"
Summary
Steps to follow
1. Create ColorStateList for boxStrokeColor
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorSurface" android:state_focused="true" />
<item android:alpha="0.87" android:color="?attr/colorSurface" android:state_hovered="true" />
<item android:alpha="0.12" android:color="?attr/colorSurface" android:state_enabled="false" />
<item android:alpha="0.38" android:color="?attr/colorSurface" />
</selector>
2. Create ColorStateList for android:textColorHint
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.38" android:color="?attr/colorSurface" android:state_enabled="false" />
<item android:alpha="0.6" android:color="?attr/colorSurface" />
</selector>
3. Set view attributes - There are 3 ways that you can do this.
I. Using attribute set
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:textColorHint="#color/text_color_hint"
app:boxStrokeColor="#color/box_stroke_color"
app:hintTextColor="?attr/colorSurface">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
II. Using explicit style
Define custom style
<style name="CustomTextInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/box_stroke_color</item>
<item name="hintTextColor">?attr/colorSurface</item>
<item name="android:textColorHint">#color/text_color_hint</item>
</style>
Set style
<com.google.android.material.textfield.TextInputLayout
style="#style/CustomTextInputStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
III. Using default style attribute - set global style for TextInputLayout
<!-- Base application theme. -->
<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
...
<!-- Status bar color. -->
...
<!-- Customize your theme here. -->
<item name="textInputStyle">#style/CustomTextInputStyle</item>
</style>
Explanation
There are various ways to change TextInputLayout box stroke color and hint text color.
The responsible attribute for box outline color is boxStrokeColor.
First let's create ColorStateList in xml format. Create Android color resource directory and create new resource file named box_stroke_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="?attr/colorSurface" android:state_focused="true" />
<item android:alpha="0.87" android:color="?attr/colorSurface" android:state_hovered="true" />
<item android:alpha="0.12" android:color="?attr/colorSurface" android:state_enabled="false" />
<item android:alpha="0.38" android:color="?attr/colorSurface" />
</selector>
I referred resources of material design library. See how this is done in material design library https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/res/color/mtrl_outlined_stroke_color.xml
To change hint text color, we have to set two attributes,
hintTextColor (The color of the label when it is collapsed and the text field is active)
android:textColorHint (The color of the label in all other text field states, such as resting and disabled)
How do I know which attributes are required to change? I checked attributes defined in theme Widget.MaterialComponents.TextInputLayout.OutlinedBox. Look at parent theme if not defined in the child theme. https://github.com/material-components/material-components-android/blob/788866e4483621e2222f649e617ee95f7aa9caa6/lib/java/com/google/android/material/textfield/res/values/styles.xml#L88 (This may vary in master branch)
app:hintTextColor="?attr/colorSurface"
Note that hintTextColor is not stateful.
But android:textColorHint is stateful.
Let's create custom ColorStateList for android:textColorHint.
Referred this https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/res/color/mtrl_indicator_text_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0.38" android:color="?attr/colorSurface" android:state_enabled="false" />
<item android:alpha="0.6" android:color="?attr/colorSurface" />
</selector>
Note that I have used ?attr/colorSurface, because generally it's value is white in light theme and black in dark theme. You could use #android:color/white directly if you don't want dynamic color adjustments.
There are several ways that you can set box stroke color attribute value,
Attribute values are resolved using context.theme.obtainStyledAttributes().
If value is defined in multiple places, the following order determines which attribute value is ultimately applied.
AttributeSet - Value defined in layout xml file.
Style - Value defined in explicit style. (Retrieve it through theme.getExplicitStyle(AttributeSet))
defStyleAttr - Default style attribute, which is the third argument of view class constructor.
defStyleRes - Default style resource, which is the fourth argument of view class constructor.
Theme - If not defined in all of the above, theme attribute value is resolved.
Let's see them one by one
Using AttributeSet
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password"
android:textColorHint="#color/text_color_hint"
app:boxStrokeColor="#color/box_stroke_color"
app:hintTextColor="?attr/colorSurface">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Using explicit style
Define custom style in styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTextInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/box_stroke_color</item>
<item name="hintTextColor">?attr/colorSurface</item>
<item name="android:textColorHint">#color/text_color_hint</item>
</style>
</resources>
Define explicit style for the widget
<com.google.android.material.textfield.TextInputLayout
style="#style/CustomTextInputStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Password">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
Using default style attribute - This is used to define global style for a view. How do you know which attribute is required to set? Just check default value of third argument of any view constructor. For material TextInputLayout this value is com.google.android.material.R.attr.textInputStyle.
<!-- Base application theme. -->
<style name="Theme.TestApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
<!-- Primary brand color. -->
...
<!-- Status bar color. -->
...
<!-- Customize your theme here. -->
<item name="textInputStyle">#style/CustomTextInputStyle</item>
</style>
Using default style resource - This is only applicable when creating widgets programmatically. If you check fourth argument of the constructor of any view except material design views, you can see defStyleRes parameter. If theme.obtainStyledAttributes() cannot resolve from the above ways, then it looks for attribute in default style resource. This is not applicable in material design library widgets, because this value is hard coded in those widgets and not exposed to change programmatically. (It is internally applied through theme.applyStyle())
Using app theme - This is not possible in material design widgets, because defStyleRes is hard coded in material design widgets and it takes precedence over app theme attributes.
<!-- Customize your theme here. -->
<item name="boxStrokeColor">#color/box_stroke_color</item>
<item name="hintTextColor">?attr/colorSurface</item>
<item name="android:textColorHint">#color/text_color_hint</item>
Above is only applicable in Android Sdk provided widgets.
---> First customize style
<style name="Widget.TextInputLayout.FilledBox" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="boxStrokeColor">?attr/colorSecondary</item>
<item name="hintTextColor">?attr/colorSecondary</item>
</style>
Second If you want to this style for all TextinputLayout in whole app.
so add this style to your parent theme
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryVariant">#color/colorPrimaryDark</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorSecondary">#color/colorSecondary</item>
<item name="colorSecondaryVariant">#color/colorSecondaryVariant</item>
<item name="android:textColorPrimary">#color/textColorPrimary</item>
<item name="textInputStyle">#style/Widget.TextInputLayout.FilledBox</item>
</style>
If you just want to add only for this particular input field
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.TextInputLayout.FilledBox"
.....>
<style name="VerifyTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/colorWhite</item>
<item name="boxStrokeWidth">2dp</item>
<item name="colorOnSurface">#color/colorPrimary</item>
<item name="colorPrimary">#color/colorWhite</item>
</style>
For the border color:
app:boxStrokeColor="#color/gray" //for border color
For the hint color:
app:hintTextColor="#color/puce" //for hint color
This worked for me:
<com.google.android.material.textfield.TextInputLayout
android:textAppearance="?attr/textAppearanceBody2"
style="#style/LoginTextInputLayoutStyle"
android:theme="#style/LoginTextInputLayoutStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/txtUserName"
android:padding="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
android:textColor="#FFFFFF"
android:textColorHint="#FFFFFF"
android:textColorHighlight="#FFFFFF"
android:shadowColor="#FFFFFF"
android:outlineAmbientShadowColor="#FFFFFF"
android:outlineSpotShadowColor="#FFFFFF"
android:hint="Email"
android:textSize="#dimen/textxhdpi"/>
</com.google.android.material.textfield.TextInputLayout>
In the Styles:
<resources
xmlns:app="http://schemas.android.com/apk/res-auto">
<style name="AppTheme" parent="Theme.MaterialComponents.Light">
<item name="textAppearanceBody2">#style/TextAppearance.neurosales.Body2</item>
</style>
<style name="TextAppearance.neurosales.Body2" parent="TextAppearance.MaterialComponents.Body2">
<item name="colorAccent">#color/white</item>
<item name="android:textColorHint">#color/white</item>
<item name="colorControlNormal">#color/white</item>
<item name="colorControlActivated">#color/white</item>
<item name="colorControlHighlight">#color/white</item>
<item name="android:textColor">#color/white</item>
</style>
<style name="LoginTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#fff</item>
<item name="android:textColorHint">#fff</item>
<item name="app:hintTextColor">#fff</item>
</style>
In Color:
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#fff</color>
I am trying to change EditText cursor pointer color (from the primary color blue to white), but no solution is working for my project. I have tried to develop a demo project, where the same code is working fine. This code is working fine for >=android 5.0
I do not know, which attribute is overwritten by my value. I have two options to encounter this problem :
Find the attribute which is controlling that color value.
Change the color value by java code when page loads (in onViewCreated).
Please suggest how to resolve this issue.
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="my_text_layout_style">
<item name="android:textColor">#FFF</item>
<item name="android:textColorHint">#FFF</item>
<item name="colorAccent">#FFF</item>
<item name="colorControlNormal">#FFF</item>
<item name="colorControlActivated">#FFF</item>
<item name="colorControlHighlight">#FFF</item>
</style>
<style name="my_edit_text_style">
<item name="colorAccent">#FFF</item>
<item name="android:editTextStyle">#style/MyEditTextStyle</item>
</style>
<style name="MyEditTextStyle" parent="Widget.AppCompat.EditText" />
</resources>
layout.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:background="#color/base_disable_btn_bg_color"
android:orientation="vertical">
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:hint="just a hint"
app:hintTextAppearance="#style/my_text_layout_style"
android:theme="#style/my_text_layout_style"
android:layout_height="wrap_content">
<android.support.design.widget.TextInputEditText
android:layout_width="match_parent"
android:theme="#style/my_edit_text_style"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>
</LinearLayout>
Tried to add view programmatically but no success
AppLinearLayout appLinearLayout = (AppLinearLayout) view.findViewById(R.id.some_id);
EditText editText = new EditText(new ContextThemeWrapper(getContext(), R.style.AppTheme_Cursor));
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
editText.setLayoutParams(params);
appLinearLayout.addView(editText);
Try this link. For me, it worked.
And, you can find and modify the drawables on your SDK here: Android\sdk\platforms\YOUR_ANDROID_VERSION\data\res at drawables-*dpi.
You can copy and modify their color/form as your wish.
Try this solution:
Use this attribute in EditText: android:textCursorDrawable="#drawable/cursor_color"
In drawable, create : cursor_color.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<size android:width="1dp" />
<solid android:color="#c8c8c8" />
I used this and it's work with me correctly.
<style name="edittext" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorControlNormal">#color/gray</item>
<item name="colorControlActivated">#color/colorAccent</item>
<item name="colorControlHighlight">#color/colorAccent</item>
<item name="android:textColor">#color/white</item>
<item name="android:textColorHint">#color/gray</item>
</style>
<EditText
android:id="#+id/email"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="30dp"
android:gravity="center"
android:hint="#string/email_address"
android:inputType="textEmailAddress"
android:padding="#dimen/padding_16"
android:textColor="#color/white"
android:textColorHint="#color/login_color"
android:textCursorDrawable="#color/mdtp_white"
android:theme="#style/edit" />
Use this attribute in your EditText:
android:textCursorDrawable="#null"
You can create your own style/theme for only this EditText and change the ColorAccent :
<style name="EditTextColorCustom" parent="#style/AppBaseTheme">
<!-- Customize your theme here. -->
<item name="colorAccent">#color/colorAccent</item>
</style>
Use this same in style in your values-21 folder.
Make a new drawable.
Here, cursor.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<size android:width="2dp" />
<solid android:color="#EF5350"/>
<stroke android:color="#EF5350"/>
</shape>
and use it in EditText like this:
<EditText
android:id="#+id/ed"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/roundedcornerwhite"
android:hint="edit text"
android:paddingBottom="10dp"
android:paddingRight="10dp"
android:paddingTop="10dp"
android:maxLines="1"
android:singleLine="true"
android:imeOptions="actionNext"
android:textColor="#color/colorPrimaryText"
android:textColorHint="#color/hintcolor"
android:textCursorDrawable="#drawable/cursor"
android:textSize="16sp" />
UPDATED:
just make a new theme like -
<style name="themex" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimaryDark">#666666</item>
<item name="android:listDivider">#color/white_pressed</item>
<item name="colorPrimary">#color/colorIcons</item>
<item name="android:textColor">#b6b6b6</item>
<item name="android:windowDisablePreview">true</item>
<item name="colorControlActivated">#color/olagreen</item>
<item name="android:windowAnimationStyle">#null</item>
</style>
here colorcontrolactivated will be the answer to ur question. And add this theme in to your activity and remove the the style u gave to edittext in ur layout-
<activity
android:name="youractivityname"
android:parentActivityName="com.example.AboutUs"
android:screenOrientation="portrait"
android:theme="#style/themex"/>
UPDATE:
If not working for then, just check whether your fragment is inside the activity and you gave the correct theme to that activity. The fragment will also have this theme. If its not working then try this -
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/mainlayout"
style="#style/themex"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/colorIcons"
android:orientation="vertical"
android:weightSum="2">
</RelativeLayout>
i hope this will help you.
I've combined few answers on SO and found the best way to do this:
Look for the original drawable in your android sdk folder
(\android-sdk\platforms\android-23\android.jar\res\drawable-hdpi-v4)
Edit those images with an editor and put them in your drawable folder.
Add following lines to your style:
<item name="android:textSelectHandle">#drawable/my_drawable_handle</item>
<item name="android:textSelectHandleLeft">#drawable/my_drawable_handle_left</item>
<item name="android:textSelectHandleRight">#drawable/my_drawable_handle_right</item>
The result:
<style name="my_edit_text_style">
<item name="colorAccent">#FFF</item>
<item name="android:editTextStyle">#style/MyEditTextStyle</item>
<item name="colorAccent">#FFF</item>
<item name="colorControlNormal">#FFF</item>
<item name="colorControlActivated">#FFF</item>
</style>
This may help you.
I would like to change the blue colour below the edit text, i don't know what property it is.
I tried using a different background colour for it but it didn't work.
I've attached an image below:
It's actually fairly easy to set the underline color of an EditText programmatically (just one line of code).
To set the color:
editText.getBackground().setColorFilter(color, PorterDuff.Mode.SRC_IN);
To remove the color:
editText.getBackground().clearColorFilter();
Note: when the EditText has focus on, the color you set won't take effect, instead, it has a focus color.
API Reference:
Drawable#setColorFilter
Drawable#clearColorFilter
Use android:backgroundTint="" in your EditText xml layout.
For api<21 you can use AppCompatEditText from support library thenapp:backgroundTint=""
You have to use a different background image, not color, for each state of the EditText (focus, enabled, activated).
http://android-holo-colors.com/
In the site above, you can get images from a lot of components in the Holo theme. Just select "EditText" and the color you want. You can see a preview at the bottom of the page.
Download the .zip file, and copy paste the resources in your project (images and the XML).
if your XML is named: apptheme_edit_text_holo_light.xml (or something similar):
Go to your XML "styles.xml" and add the custom EditText style:
<style name="EditTextCustomHolo" parent="android:Widget.EditText">
<item name="android:background">#drawable/apptheme_edit_text_holo_light</item>
<item name="android:textColor">#ffffff</item>
</style>
Just do this in your EditText:
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="#style/EditTextCustomHolo"/>
And that's it, I hope it helps you.
This works fine for old and new version of Android (works fine even on API 10!).
Define this style in your styles.xml:
<style name="EditText.Login" parent="Widget.AppCompat.EditText">
<item name="android:textColor">#android:color/white</item>
<item name="android:textColorHint">#android:color/darker_gray</item>
<item name="colorAccent">#color/blue</item>
<item name="colorControlNormal">#color/blue</item>
<item name="colorControlActivated">#color/blue</item>
</style>
And now in your XML, set this as theme and style (style to set textColor, and theme to set all other things):
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="text"
style="#style/EditText.Login"
android:theme="#style/EditText.Login"/>
Edit
This solution causes a tiny UI glitch on newer Android versions (Lollipop or Marshmallow onwards) that the selection handles are underlined.
This issue is discussed in this thread. (I haven't tried this solution personally)
you can change Underline of EditText color specifying it in styles.xml. In your app theme styles.xml add the following.
<item name="android:textColorSecondary">#color/primary_text_color</item>
As pointed out by ana in comment section
<item name="android:colorControlActivated">#color/black</item>
setting this in theme style works well for changing color of an edittext underline.
So, you need to create a new .xml file in your drawable folder.
In that file paste this code:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="8dp"
android:left="-3dp"
android:right="-3dp"
android:top="-3dp">
<shape android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#color/white"/>
</shape>
</item>
</layer-list>
And in your EditText, set
android:background="#drawable/your_drawable"
You can play with your drawable xml, set corners, paddings, etc.
In your app style define the property colorAccent. Here you find an example
<style name="AppTheme" parent="Theme.AppCompat.Light">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/action_bar</item>
<item name="colorPrimaryDark">#color/primary_dark</item>
<item name="colorAccent">#color/action_bar</item>
</style>
You can change the color of EditText programmatically just using this line of code easily:
edittext.setBackgroundTintList(ColorStateList.valueOf(yourcolor));
To change bottom line color, you can use this in your app theme:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
<item name="colorControlNormal">#c5c5c5</item>
<item name="colorControlActivated">#ffe100</item>
<item name="colorControlHighlight">#ffe100</item>
</style>
To change floating label color write following theme:
<style name="TextAppearence.App.TextInputLayout" parent="#android:style/TextAppearance">
<item name="android:textColor">#4ffd04[![enter image description here][1]][1]</item>
</style>
and use this theme in your layout:
<android.support.design.widget.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="20dp"
app:hintTextAppearance="#style/TextAppearence.App.TextInputLayout">
<EditText
android:id="#+id/edtTxtFirstName_CompleteProfileOneActivity"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:capitalize="characters"
android:hint="User Name"
android:imeOptions="actionNext"
android:inputType="text"
android:singleLine="true"
android:textColor="#android:color/white" />
</android.support.design.widget.TextInputLayout>
Use below code to change background color of edit-text's border.
Create new XML file under drawable.
abc.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#00000000" />
<stroke android:width="1dip" android:color="#ffffff" />
</shape>
and add it as background of your edit-text
android:background="#drawable/abc"
If you don't have to support devices with API < 21, use backgroundHint in xml, for example:
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPersonName"
android:hint="Task Name"
android:ems="10"
android:id="#+id/task_name"
android:layout_marginBottom="15dp"
android:textAlignment="center"
android:textColor="#android:color/white"
android:textColorLink="#color/blue"
android:textColorHint="#color/blue"
android:backgroundTint="#color/lighter_blue" />
For better support and fallbacks use #Akariuz solution.
backgroundHint is the most painless solution, but not backward compatible, based on your requirements make a call.
change your colorAccent which color you need that color set on colorAccent and run you get the output
Simply change android:backgroundTint in xml code to your color
You can do it with AppCompatEditText and color selector:
<androidx.appcompat.widget.AppCompatEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:backgroundTint="#color/selector_edittext_underline" />
selector_edittext_underline.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/focused_color"
android:state_focused="true" />
<item android:color="#color/hint_color" />
</selector>
NOTE: Put this selector file in res/color folder, not res/drawable. ususually res/color does not exist and we may have to create it.