Search code examples
androidandroid-textinputlayoutandroid-textinputedittext

How to change textinput edittext underline color when unfocused?


I am using android design library's TextinputLayout. But couldn't customize the underline color of EditText inside TextinputLayout. Please help.

I tried thises how to change color of TextinputLayout's edittext underline android and those (Material) EditText underline color .

But unfortunetly could not make it to work.

This is my last try which i tried today didnt worked :

<android.support.design.widget.TextInputLayout
            android:id="@+id/tilPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/tilLogin"
            android:layout_marginBottom="@dimen/login_line_v_margin"
            app:hintTextAppearance="@style/TextAppearence.App.TextInputLayoutLight">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/passwordHint"
                android:inputType="textPassword" />
        </android.support.design.widget.TextInputLayout>

and the styles :

<!-- Base application 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>
    </style>

<style name="TextAppearence.App.TextInputLayoutLight" parent="@android:style/TextAppearance">
        <item name="android:textColor">@color/colorTealLight</item>
        <item name="android:textSize">18sp</item>
        <item name="colorControlNormal">#fff</item>
        <item name="colorControlActivated">@color/colorTealLight</item>
    </style>

The problem I have is to have one clean solution for both underline and hint text colors.

My goal is that this what I have here works for when text input layout is FOCUSED and its nice. Now I want to set it also for when text input layout is NOT FOCUSED.


Solution

  • I had a similar problem aswell, where my focused hint color was different compared to unfocused.

    The solution that worked for me is the following:

    In your text input layout set android:textColorHint="@color/your_unfocused_color" for unfocused color and app:hintTextColor="@color/your_focused_color" for focused, this also changes the underline stroke color, when the state is focused.

    For the underline, you need to set app:boxStrokeColor="@color/underline_colors"

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/focused" android:state_enabled="true" />
        <item android:color="@color/focused" android:state_hovered="true" />
        <item android:color="@color/focused" android:state_focused="true" />
        <item android:color="@color/unfocused" />
    </selector>