CODEWITHSUNDEEP
androidandroid-textinputlayoutandroid-textinputedittext
10101101
10101101

Reputation: 305

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.

Upvotes: 2

Views: 1774

Answers (3)

Jokubas Trinkunas
Jokubas Trinkunas

Reputation: 854

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>

Upvotes: 3

mostafa hashim
mostafa hashim

Reputation: 482

If you want to set the color for the outline box in unfocused mode instead of the default black, you have to add this line in colors.xml file which will override the default color for the outline box.

copy this line as it is. you can change color to what you want.

<color name="mtrl_textinput_default_box_stroke_color">#fff</color>

Upvotes: 1

10101101
10101101

Reputation: 305

With the great help of this and that I managed to get it to work.

So basicly what I did was replace EditText with support library AppCompatEditText and set backgroundTint on it with color being underline color.

And finally set textColorHint on TextInputLayout with color being hint text color.

Like this :

<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"
            android:textColorHint="@color/colorLoginHint">

            <android.support.v7.widget.AppCompatEditText
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/passwordHint"
                android:textColor="@color/colorLoginHint"
                android:textSize="@dimen/login_font_minor"
                android:textStyle="normal"
                android:inputType="textPassword"
                android:backgroundTint="@color/colorTealLight"/>
        </android.support.design.widget.TextInputLayout>

Maybe not so beutiful but it works.

EDIT

It turned out that this problem was related to my broken res dir hierarhy. I had there some ancient unused values-v21 for whatever reason and it had some styles inside. Today I was doing some refactoring and saw it and just deleted this whole dir and left only one styles (those in default values dir) and after that all styles started working. I guess that if I copied correct styles to this v21 it would work, but I just dont needed that at all.

Upvotes: 0

Related Questions