Search code examples
androidmaterial-designandroid-textinputlayoutandroid-textinputedittext

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


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>

Solution

  • 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>
    

    enter image description here

    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>
    

    enter image description here