Menu
I have an OutlinedBox TextInputLayout and I want to change the box color in the unfocused mode of editText.
How can I do that?
962
We can just use ThemeOverlay and change the “colorAccent” for a single view. We should inherit our style from ThemeOverlay. AppCompat and set it as the “android:theme” parameter of the view and that is all. As for the selection highlight, you can change it via android:textColorHighlight of the EditText.
According to the documentation we can change the box color of a TextInputLayout using the attribute boxStrokeColor. in truth, unless this is defined as a color selector, this only alter the focused color. It looks usually ok on white background but it's really bad in dark background.
As for the OutlinedBox, it does not have the bottom line but has an outline instead. To change its color we should use “app:boxStrokeColor” parameter, but this parameter changes stroke color in the focused state only. Changing the default state of the stroke is a bit tricky. We should override mtrl_textinput_default_box_stroke_color color.
To change the background color of a filled text field, you can set the boxBackgroundColor attribute on your TextInputLayout. Note: When using a filled text field with an EditText child that is not a TextInputEditText, make sure to set the EditText ’s android:background to @null.
Hint color could be set via “android:textColorHint” parameter of TextInputLayout. This parameter also changes the label default color (label focused color could also be changed in other ways). Let’s set a purple color (#673AB7) as an example.
In the theme Add colorOnSurface attribute and assign any color you want
<style name="Apptheme"
parent="Theme.MaterialComponents.Light.NoActionBar">
<!-- General theme colors -->
<item name="colorPrimary">@color/material_green_500</item>
<item name="colorSecondary">@color/material_green_600</item>
<item name="colorAccent">@color/illiniColorAccent</item>
<item name="colorOnSurface">@color/blue</item><!--inputtext unfocused color-->
</style>
The result is:
Also colorPrimary is the color of focused state.
Other attributes you can customize are:
<item name="enforceMaterialTheme">true</item>
<item name="enforceTextAppearance">true</item>
<item name="boxBackgroundMode">outline</item>
<item name="boxBackgroundColor">@null</item>
<item name="endIconTint">@color/mtrl_outline_end_icon_tint</item>
<item name="boxCollapsedPaddingTop">0dp</item>
<item name="boxCornerRadiusTopStart">@dimen/mtrl_textinput_box_corner_radius_medium</item>
<item name="boxCornerRadiusTopEnd">@dimen/mtrl_textinput_box_corner_radius_medium</item>
<item name="boxCornerRadiusBottomEnd">@dimen/mtrl_textinput_box_corner_radius_medium</item>
<item name="boxCornerRadiusBottomStart">@dimen/mtrl_textinput_box_corner_radius_medium</item>
<item name="boxStrokeColor">@color/mtrl_outlined_stroke_color</item>
<item name="counterTextAppearance">?attr/textAppearanceCaption</item>
<item name="counterOverflowTextAppearance">?attr/textAppearanceCaption</item>
<item name="errorTextAppearance">?attr/textAppearanceCaption</item>
<item name="helperTextTextAppearance">?attr/textAppearanceCaption</item>
<item name="hintTextAppearance">?attr/textAppearanceCaption</item>
<item name="counterTextColor">@color/mtrl_indicator_text_color</item>
<item name="counterOverflowTextColor">@color/mtrl_error</item>
<item name="errorTextColor">@color/mtrl_error</item>
<item name="helperTextTextColor">@color/mtrl_indicator_text_color</item>
<!-- The color of the label when it is collapsed and the text field is active -->
<item name="hintTextColor">?attr/colorPrimary</item>
<!-- The color of the label in all other text field states (such as resting and disabled) -->
<item name="android:textColorHint">@color/mtrl_indicator_text_color</item>
<item name="shapeAppearance">?attr/shapeAppearanceSmallComponent</item>
<item name="shapeAppearanceOverlay">@null</item>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With