How to stop textinputlayout for changing color of the endIcondrawable and change the color of underline only when user clicks?

Question

Issue-1: TextInputLayout is changing the color of endIconDrawable, it is green and white by default but it is getting changed to grey so how do i stop it?

Issue-2: I want to change the backgroundtint or underline color only when user clicks the TextInputLayout and start typing so how to do it.

Code:

        <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/d"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/_10sdp"
            app:endIconMode="custom"
            app:endIconDrawable="@drawable/green"
            app:endIconContentDescription="@string/D"
            android:hint="@string/D">
            <com.google.android.material.textfield.TextInputEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                />
        </com.google.android.material.textfield.TextInputLayout>

Gabriele Mariotti · Accepted Answer · 2020-05-22T13:12:39.320

13

To avoid tinting the endIconDrawable you have to use the app:endIconTint="@null" otherwise the widget will use the default selector:

 <com.google.android.material.textfield.TextInputLayout
    app:endIconTint="@null"

To change the underline color you have to use the boxStrokeColor attribute with a custom selector:

<com.google.android.material.textfield.TextInputLayout
    app:boxStrokeColor="@color/myselector"

with:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_focused="true"/>  <-- this line
  <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>

To change the background color use the app:boxBackgroundColor attribute:

    <com.google.android.material.textfield.TextInputLayout
        app:endIconTint="@null"
        app:boxBackgroundColor="@color/bk_selector"

with a selector like:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0.16" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface" android:state_focused="true"/>  <-- this line
  <item android:alpha="0.04" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>

edited May 22 '20 at 13:12

answered May 22 '20 at 12:23

Gabriele Mariotti

320,139
94
887
841

I want to change the line color, in your answer it is the greenish blue line below text hint color... the boxselector is not working – Cosmic Dev May 22 '20 at 12:46
@CosmicDev It is not clear for me. What is the line? Which version of material components are you using? – Gabriele Mariotti May 22 '20 at 12:57
The line below EditText where user types the text and material version is: material:1.2.0-alpha06 – Cosmic Dev May 22 '20 at 13:03
@Cosmic Just tried with 1.2.0-alpha06. As described in the answer with a `FillexBox` style (it is the default style) to change this color line you can use `boxStrokeColor` with your custom selector (or a fixed color for all states). You can use in the selector your custom colors. In particular you have to change the color in `android:state_focused="true"` – Gabriele Mariotti May 22 '20 at 13:08
It is not changing anything, it is keeping the color of the line same as of textcolor – Cosmic Dev May 22 '20 at 13:30
@CosmicDev There is something wrong in somewhere. Are you using a Material Component Theme? – Gabriele Mariotti May 22 '20 at 14:41
the theme used at application level and defined in manifest is "Theme.AppCompat.Light.NoActionBar" – Cosmic Dev May 23 '20 at 04:43
@CosmicDev You have to use a [Material Components Theme](https://github.com/material-components/material-components-android/blob/master/docs/getting-started.md#material-components-themes) – Gabriele Mariotti May 23 '20 at 07:47
ohh i can't as the theme is customized and i am not allowed to change it. – Cosmic Dev May 23 '20 at 08:16
@CosmicDev No way. Most of components starting with 1.1.0 give you an error without a Material Components Theme. You can use a Bridge theme, but not an AppCompat theme without changes. – Gabriele Mariotti May 23 '20 at 08:56
1

I have changed the theme and it is working, but can you please tell me how can i reverse this effect? Like somewhere i want to keep the hint color and line color constant as always whether focused or not. – Cosmic Dev May 26 '20 at 09:54
@CosmicDev If you want a fixed color just use a color instead of a selector, or use the same color in the selector in the different states. For the hint color you can also check [this answer](https://stackoverflow.com/questions/30546430/how-to-change-the-floating-label-color-of-textinputlayout/57811487#57811487) – Gabriele Mariotti May 26 '20 at 10:20

How to stop textinputlayout for changing color of the endIcondrawable and change the color of underline only when user clicks?

1 Answers1