Change Edittext line color when on focus

Question

I've been trying to change the baseline color for my edittext when on focus but it doesn't seem to work..

Here's my .xml snippet:

<android.support.design.widget.TextInputLayout
                android:id="@+id/til_passwordWrapper"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:paddingBottom="@dimen/dimen_10"
                android:paddingLeft="@dimen/dimen_10"
                android:paddingRight="@dimen/dimen_10"
                android:hint="@string/hint_login_password"
               >
                <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/password"
                    android:textSize="17sp"
                    android:fontFamily="sans-serif"
                    android:textColor="#000000"
                    android:textCursorDrawable="#000000"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"
                    app:backgroundTint="#000000"
                    android:maxLines="1"
                    />
            </android.support.design.widget.TextInputLayout>

And here is my styles-v21 file:

<style name="AppTheme" parent="AppTheme.Base">
    <item name="colorPrimary">@color/ColorPrimary</item>
    <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
    <item name="colorAccent">@color/ColorPrimary</item>
</style>

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="android:windowContentTransitions">true</item>
    <item name="android:windowEnterTransition">@android:transition/slide_bottom</item>
    <item name="android:windowExitTransition">@android:transition/slide_bottom</item>
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">true</item>
    <item name="android:windowSharedElementEnterTransition">@android:transition/move</item>
    <item name="android:windowSharedElementExitTransition">@android:transition/move</item>
</style>

where : - ColorPrimary = #CD060C (red) - ColorPrimaryDark = #8B181B (darker-red)

I tested this on a Lollipop device and it works great. I can't say the same for my Marshamallow device. I took a look at the issue here on S.O to see how this can be solved for M and above devices. Someone suggested an approach which consist of adding these few lines of code in my activity class:

passwordWrapper.getEditText().setOnFocusChangeListener(new View.OnFocusChangeListener(){
        @Override
        public void onFocusChange(View v, boolean hasFocus){
            if (hasFocus)
            {
                if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
                    v.setBackgroundTintList(ColorStateList.valueOf(getResources().getColor(R.color.ColorBlackTransparent)));
                }
            }
        }
    });

On my Marshmallow device, whenever I focus on the edittext, I keep on having the coloraccent i.e red color for the baseline..I want it to be black..

Does anyone has a workaround on this issue ? Thanks

rafsanahmad007 · Answer 1 · 2017-04-07T20:15:11.113

3

First of all you don't need to use a setOnFocusChangeListener to change underline color of TextInputLayout

There is android item attribute for that, which will change color when your edittext is activated.

Add this attribute in you base theme:

<style name="AppTheme.Base" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="colorControlNormal">#c5c5c5</item>
    <item name="colorControlActivated">#000000</item>  //black color
    <item name="colorControlHighlight">#000000</item>
</style>

make sure you use the theme in activity: Manifest

<activity android:name=".YourActivity"
        android:theme="@style/AppTheme.Base"/>

EDIT

setting colorControlHighlight will affect the navigation drawer selected item color. so use:

in res/drawable/drawer.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@color/colorPrimary" android:state_checked="true" />
        <item android:drawable="@android:color/transparent" />
</selector>

now in your navigation view set the background as:

app:itemBackground="@drawable/drawer"

edited Apr 07 '17 at 20:15

answered Apr 07 '17 at 19:23

rafsanahmad007

23,683
6
47
62

Yeah I know about using colorControlHighlight and colorControlActivated (I've already tried it actually...). However, I have a nav drawer in my app and changing the default colorControlHighlight to black will affect my nav drawer highlight color. That's why I have been looking for a way around in the activity class directly.. – Claude Hangui Apr 07 '17 at 19:44
I tried your proposal......and i'm still stuck with the red color (on marshamallow..) when the edittext is activated – Claude Hangui Apr 10 '17 at 10:09
Focused edit text still had color primary color for me, so I had to use this approach: https://stackoverflow.com/a/36543554/2413303 – EpicPandaForce Apr 25 '18 at 11:07

Change Edittext line color when on focus

1 Answers1