Develop Reference

How to change inactive border stroke color of Android Material TextInputLayout component [duplicate]

This question already has answers here:
Issue: change border color or box stroke for unfocused TextInputLayout in android
(4 answers)
Closed 2 years ago.
I am trying to setting up TextInputLayout unfocused border stroke color. For the same, There are too many questions and their answers and I have tried all of them. Like Created styles and used as theme, Created color selector and applied that, and also applied directly app:boxStrokeColor with color selector. But not luck with any of these available solutions.
Not sure, where do i am doing wrong or something i still missing. I pushed my code to Test project to github for to get better visibility of my whole setup. Here is some sample code for quick review:
activity_main.xml (TextInputLayout inside ConstraintLayout)
<com.google.android.material.appbar.MaterialToolbar
android:id="#+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- Tried this as well - app:boxStrokeColor="#color/text_input_box_stroke_color" -->
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/emailTextInputLayout"
android:hint="Email"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="24dp"
android:theme="#style/TextInputLayoutStyle"
android:layout_marginHorizontal="24dp"
app:layout_constraintTop_toBottomOf="#id/toolbar"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="#+id/emailTextInput"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:importantForAutofill="no"
android:inputType="textEmailAddress" />
</com.google.android.material.textfield.TextInputLayout>
styles.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#FF00CC</item>
<item name="boxStrokeWidth">2dp</item>
</style>
</resources>
text_input_box_stroke_color.xml (color selector)
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/mtrl_textinput_focused_box_stroke_color" android:state_focused="true"/>
<item android:color="#color/mtrl_textinput_hovered_box_stroke_color" android:state_hovered="true"/>
<item android:color="#color/mtrl_textinput_disabled_color" android:state_enabled="false"/>
<item android:color="#color/mtrl_textinput_default_box_stroke_color"/>
</selector>
It would be great help if someone can provide some guideline and suggestion and help me figure out any mistake made by me.
Thanks in advance.

I have tested your code and it works after you do the below changes:
1.First change your res/color/text_input_box_stroke_color.xml like below to see the different states colors. In the below example i have set a Red color for the focused state and a Light Blue color for default-inactive state:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#android:color/holo_red_dark" android:state_focused="true" />
<item android:color="#android:color/holo_green_dark" android:state_hovered="true" />
<item android:color="#color/mtrl_textinput_disabled_color" android:state_enabled="false" />
<item android:color="#android:color/holo_blue_light" />
</selector>
2.Then change your res/values/styles.xml with the boxStrokeColor linking to the above selector like below:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
<item name="boxStrokeColor">#color/text_input_box_stroke_color</item>
<item name="boxStrokeWidth">2dp</item>
</style>
</resources>
3.Finally in your TextInputLayout add this style like below:
<com.google.android.material.textfield.TextInputLayout
style="#style/TextInputLayoutStyle"
android:id="#+id/emailTextInputLayout"
Currently your adding the style like: android:theme="#style/TextInputLayoutStyle" instead of style="#style/TextInputLayoutStyle"

Solution for this is next, and this works because I JUST NOW tested it.
Go to your colors.xml inside your res>values folder.
In there you'll have your colorPrimary and other colors you already created before. Scroll to the bottom and add this line:
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">#color/colorPrimary</color>
When you do that, you can just change the color there. I defined as #color/colorPrimary but you can use whatever you want. Before applying this line I got this:
And after applying that line this is the result:
Also I applied style="#style/YourStyle" for both TextInputLayout and TextInputEditText

Create a box stroke color for active and inactive state like below:
box_stroke_color
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#2C2C2C" android:state_focused="true"/>
<item android:color="#2C2C2C" android:state_hovered="true"/>
<item android:color="#D7D7D7"/>
</selector>
Make a TextInputLayout style : TextInputLayoutStyle
<style name="TextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">#color/box_stroke_color</item>
<item name="boxStrokeWidth">1dp</item>
</style>
Use in your TextInputLayout
<com.google.android.material.textfield.TextInputLayout
style="#style/TextInputLayoutStyle" >
<com.google.android.material.textfield.TextInputEditText.. />
</com.google.android.material.textfield.TextInputLayout>

How to remove underline from dropdown menu material design in android

I can't seem to get rid of the black underline from Exposed Dropdown Menu done according to material design guide in my android UI.
The dropdown looks like this:
I have tried setting background to null, transparent or custom shape. app:boxBackgroundMode="none" doesn't work either.
<com.google.android.material.textfield.TextInputLayout
android:id="#+id/spinner_age"
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#drawable/bg_rounded_button"
android:hint="Age">
<AutoCompleteTextView
android:id="#+id/age_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#android:color/transparent"/>
</com.google.android.material.textfield.TextInputLayout>
Ideally the dropdown would look like a button without the underline. How do I get rid of it?

Please change your this line
android:background="#android:color/transparent"
With
android:background="#00000000"

Make background = null
<AutoCompleteTextView
android:id="#+id/age_dropdown"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"/>

just add this line to remove the underline
android:inputType="textNoSuggestions"

Just use the standard style #style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu and
You don't need to use a custom background shape, you can just use the
app:boxCornerRadius* attributes to define the rounded shape.
Something like:
<com.google.android.material.textfield.TextInputLayout
style="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
app:boxCornerRadiusBottomEnd="32dp"
app:boxCornerRadiusTopEnd="32dp"
app:boxCornerRadiusBottomStart="32dp"
app:boxCornerRadiusTopStart="32dp"
app:boxStrokeColor="#color/myselector"
...>
<AutoCompleteTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#null"
/>
</com.google.android.material.textfield.TextInputLayout>
To change the color of the line under the component, you have to change the app:boxStrokeColor attribute. Just customize the selector as you prefer:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:alpha="0" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
<item android:alpha="0" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
<item android:alpha="0" android:color="?attr/colorOnSurface"/>
</selector>
This is the result:
Pay attention to this note in doc:
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. This allows TextInputLayout to set a filled background on the EditText.
Alternative:
With the new version 1.1.0 you can also use the shapeAppearanceOverlay attribute to customize the shape of your component.
Just use:
<com.google.android.material.textfield.TextInputLayout
style="#style/MyFilledBox_ExposedDropdownMenu
...>
<AutoCompleteTextView
android:background="#null"
... />
</com.google.android.material.textfield.TextInputLayout>
and this style:
<!-- Rounded -->
<style name="MyFilledBox_ExposedDropdownMenu" parent="#style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu">
<item name="shapeAppearanceOverlay">#style/ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded</item>
<item name="boxStrokeColor">#color/myselector</item>
</style>
<style name="ShapeAppearanceOverlay.MyApp.TextInputLayout.Rounded" parent="">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">32dp</item>
</style>

Setting boxStrokeWidth = 0dp would solve it

Android - spotShadowAlpha only for linearlayout

I am using the elevation attribute for my linearlayout, but the shadow is to bright. I need a darker shadow only for the linear layout.
I added android:spotShadowAlpha to my styles.xml. It worked, but not only for the linear layout. Every View has a darker shadow.
Styles.xml
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="android:ambientShadowAlpha">0</item>
<item name="android:spotShadowAlpha">0.55 </item>
<item name="colorPrimary">#color/colorPrimary</item>
<item name="colorPrimaryDark">#color/colorPrimaryDark</item>
<item name="colorAccent">#color/colorAccent</item>
</style>
</resources>
linearlayout in activity_main.xml
<LinearLayout
android:id="#+id/linl"
android:layout_width="250dp"
android:layout_height="250dp"
android:layout_marginStart="55dp"
android:layout_marginTop="208dp"
android:layout_marginEnd="56dp"
android:layout_marginBottom="209dp"
android:background="#drawable/custom_buttom"
android:elevation="70dp"
android:orientation="horizontal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</LinearLayout>
Background #drawable/custom_buttom
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
<solid android:color="#FFFFFF"/>
<corners android:radius="999dp"/>
</shape>

DISCLAIMER: ONLY WORKS CORRECTLY FOR API 28 AND ABOVE
I know this question is kind of old, but i ran into the same problem. This guy has a pretty good solution. Essentially you set android:ambientShadowAlpha and android:spotShadowAlpha to 1. then you can use SetOutlineAmbientShadowColor and SetOutlineSpotShadowColor using a value that contains an alpha value to set it on an item by item basis. For everything else these act as the default shadow colors with system default alpha values:
<color name="defaultOutlineAmbientShadowColor">#0A000000</color> <color name="defaultOutlineSpotShadowColor">#30000000</color>
These are set in styles.xml:
<item name="android:ambientShadowAlpha">1</item> <item name="android:outlineAmbientShadowColor">#color/defaultOutlineAmbientShadowColor</item> <item name="android:spotShadowAlpha">1</item> <item name="android:outlineSpotShadowColor">#color/defaultOutlineSpotShadowColor</item>

android:ambientShadowAlpha and android:spotShadowAlpha theme attributes values are used at pretty low level, so there is no way to set specific values to these attributes for particular view of hierarchy (even using theme overlay approach).
It is possible to set custom values statically per activity basis:
create custom theme derived from your app theme and override android:ambientShadowAlpha and android:spotShadowAlpha in it:
<style name="Theme.YourApp" parent="...">
...
</style>
<style name="Theme.YourApp.StrongShadows">
<item name="android:ambientShadowAlpha">1</item>
<item name="android:spotShadowAlpha">1</item>
</style>
In manifest set this theme for your activity:
<application
android:theme="#style/Theme.YourApp">
<activity android:name=".ActivityWithDefaultShadows" />
<activity
android:name=".ActivityWithStrongShadows"
android:theme="#style/Theme.YourApp.StrongShadows" />
</application>
The best effort you can make at the moment to have better shadow customization is the approach that #ottermatic suggested in his answer (which of course works only for API level 28 and above). I'll describe it more accuratly:
in themes.xml file in values resources folder define base app theme and app theme derived from based without mentioned attributes:
<style name="Base.Theme.YourApp" parent="...">
...
</style>
<style name="Theme.YourApp" parent="Base.Theme.YourApp"/>
in themes.xml file in values-v28 override app theme for api versions 28 and above:
<style name="Theme.YourApp" parent="Base.Theme.YourApp">
<item name="android:ambientShadowAlpha">1</item>
<item name="android:spotShadowAlpha">1</item>
<item name="android:outlineAmbientShadowColor">#color/defaultOutlineAmbientShadowColor</item>
<item name="android:outlineSpotShadowColor">#color/defaultOutlineSpotShadowColor</item>
</style>
We set android:ambientShadowAlpha and android:spotShadowAlpha to 1 so they do not influence the shadow color. And instead we can customize shadow by changing android:outlineAmbientShadowColor and android:outlineSpotShadowColor attributes - they have reasonable default values (for default shadows to be similar to shadows on previous api versions) set in app theme but also their values can be overriden for each separate view:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button
android:id="#+id/button1"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:text="Button with default theme shadow"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="#+id/button2"
android:outlineAmbientShadowColor="#55FF0000"
android:outlineSpotShadowColor="#55FF0000"
android:text="Button with custom red shadow"
app:layout_constraintTop_toBottomOf="#id/button1"
app:layout_constraintStart_toEndOf="#id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

Edit text cursor show bottom line

I have apply an style to my EditText to change bottom line when no selected, I do it like this:
<style name="JoinMeetingEditText" parent="Widget.AppCompat.EditText">
<item name="colorControlNormal">#color/edit_text_no_selected_color</item>
<item name="android:textCursorDrawable">#null</item>
<item name="android:theme">#style/JoinMeetingEditText</item>
</style>
But the cursor in the EditText is displayed like this
If I remove <item name="android:theme">#style/JoinMeetingEditText</item> then that line is not displayed but my edit text doesn't display correct color when no selected
This is how I definde EditText in XMl
<android.support.design.widget.TextInputLayout
style="#style/JoinMeetingTextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:id="#+id/email"
android:theme="#style/JoinMeetingEditText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Email"
android:inputType="number"
android:textColor="#color/white"
android:textSize="16sp">
<requestFocus />
</EditText>

You can create custom drawable like this
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:color="#color/colorAccent"
/> <!-- pressed -->
<item
android:state_focused="true"
android:color="#color/colorPrimary"
/> <!-- focused -->
<item
android:drawable="#android:drawable/edittext_normal"
/> <!-- default -->
</selector>
use this custom style into background of that edittext. This may help you.

Change parent of your custom theme on global "AppTheme" like this:
parent="AppTheme"
or common theme, for example:
parent="Theme.AppCompat.Light.NoActionBar"
In your case custom theme is used as theme for all EditText child views (including cursor view). When you set AppTheme as parent, it overlap special attributes for cursor view over EditText attributes.
I hope this helps you.

I had the same issue. Here's how I solved it: https://stackoverflow.com/a/44036429/1439957
P.S. I recommend using a TextInputEditText as the child of your TextInputLayout instead of an EditText since TextInputEditTexts were specifically designed for this.

EditText underline below text property

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.