Change color of mask password selector

Question

As you can see in the picture I have a android app with a black background and white text. However there is in fact a "Show Text" icon that looks like an "eye" and it is black as well :(. Is there way to change the color of this?

activity_login.xml

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:fitsSystemWindows="true"
    android:background="@color/black">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="56dp"
        android:paddingLeft="24dp"
        android:paddingRight="24dp">

        <ImageView android:src="@drawable/logo"
            android:layout_width="wrap_content"
            android:layout_height="72dp"
            android:layout_marginBottom="24dp"
            android:layout_gravity="center_horizontal" />

        <!-- Email Label -->
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:textColorHint="#ffffff">
            <EditText android:id="@+id/input_email"
                android:theme="@style/MyEditTextTheme"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textEmailAddress"
                android:hint="E-Mail Address"/>
        </android.support.design.widget.TextInputLayout>

        <!-- Password Label -->
        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:textColor="#ffffff"
            android:textColorHint="#ffffff">
            <EditText android:id="@+id/input_password"
                android:theme="@style/MyEditTextTheme"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword"
                android:hint="Password"/>
        </android.support.design.widget.TextInputLayout>

        <android.support.v7.widget.AppCompatButton
            android:id="@+id/btn_login"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="24dp"
            android:layout_marginBottom="24dp"
            android:padding="12dp"
            android:text="Login"/>

        <TextView android:id="@+id/link_signup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="24dp"
            android:text="No account yet? Create one"
            android:textColor="#ffffff"
            android:gravity="center"
            android:textSize="16dip"/>

    </LinearLayout>
</ScrollView>

strings.xml

<resources>
    <color name="bg_color">#ffffff</color>
    <color name="black">#222222</color>
    <style name="MyEditTextTheme">
        <item name="colorControlNormal">#ffffff</item>
        <item name="colorControlActivated">#ffffff</item>
        <item name="colorControlHighlight">#ffffff</item>
        <item name="colorAccent">@android:color/white</item>
        <item name="android:textColor">#ffffff</item>
        <item name="android:textColorHint">#ffffff</item>
    </style>
</resources>

Wiley

Answer 1

Ok guys I found the right answer, there IS a way to customize the color of it. https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html#attr_android.support.design:passwordToggleTint

setPasswordVisibilityToggleTintList(ColorStateList)

Update: You can directly add following attribute in the TextInputLayout:

app:passwordToggleTint="#FFF"

Wiley

Awesomely awesome – Aperiodic

fyi, passwordToggleTint is now deprecated. Should use endIconTint – Franni

Answer 2

rapid3642's answer pointed in the right direction but I still needed to find out what exactly would work.

Follow these steps to change the colour of your toggle drawable:

1. Create selector_password_visibility_toggle in ~/res/color/:

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <!-- When password is shown as text, the drawable will be off_white coloured -->
       <item android:color="@color/off_white" android:state_checked="true"/>
       <item android:color="@android:color/white"/>
   
   </selector>
   

2. Add passwordToggleTintMode and passwordToggleTint to your TextInputLayout, as below:

   <android.support.design.widget.TextInputLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:passwordToggleTintMode="src_atop"
       app:passwordToggleTint="@color/selector_password_visibility_toggle"
       app:passwordToggleEnabled="true">
   

Now your TextInputLayout will have its drawable colour changed.

Brittan

Thank you for adding what worked for you! I hope this helps others! :) – Wiley

Answer 3

Here is a good way to do it programatically:

setPasswordVisibilityToggleTintList(AppCompatResources.getColorStateList(context, R.color.white));

Call this method on the TextInputLayout object.

Tiro

Answer 4

Add the following xmlns:app in your layout.

xmlns:app="http://schemas.android.com/apk/res-auto"

Now set the passwordToggleEnabled & passwordToggleTint in EditText accordingly

app:passwordToggleEnabled = "true"
app:passwordToggleTint="#FFFFFF"

Blackness

Answer 5

Add drawable file selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@color/dim_orange_btn_pressed" />
    <item android:state_focused="true" android:drawable="@color/dim_orange_btn_pressed" />
    <item android:drawable="@android:color/white" />
</selector>

add your EditText this line android:background="@drawable/selector"

    <LinearLayout
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
           <EditText android:id="@+id/txt_pass"
            android:theme="@style/MyEditTextTheme"
            android:layout_width="match_parent"
            android:background="@drawable/selector"
            android:layout_height="wrap_content"
           android:inputType="textPassword"
            android:hint="E-Mail Address"/>

        <ImageButton
        android:id="@+id/btn_eye"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/eye"
        />
   </LinearLayout>

In your code :

buttonEye.setOnTouchListener(new OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_DOWN) {

            txt_pass.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

        } else if (event.getAction() == MotionEvent.ACTION_UP) {

             txt_pass.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD);
        }
    }
};

Tamanaha

wow thank you for the useful edit and quick response! :), I tried this edit but it said I needed a name for each item, does it matter what the item names are? Total noob here sorry. If you would be so kind as to explain more. – Wiley

Thank you for being more clear with your edit, however I did this but it makes the entire field white, the goal im trying to achieve is to make just the "eye" or "password mask indicator" white. Is there a way to do this? Im sorry if I wasn't clear before. – Wiley

I could defiantly be wrong but I dont think adding a listener and setting it to show or hide will accomplish the color change that im trying to achieve, im a noob so maybe im wrong here but if I am please explain so I can understand more :) – Wiley

Answer 6

If your using background for edittext or texteditlayout then password visibility toggle is hidden under the background. So remove background or create a custom style and make it as a theme for edittext in xml layout.

 <style name="EditText_theme" parent="">
        <item name="passwordToggleTintMode">src_over</item>
    </style>

If you still face issue or if you have not kept any background then change the theme of the app itself because the main colors are determined there.

Here's other workaround which didn't work for me. This I got from Google's Android docs itself,

 <style name="EditText_theme" parent="">
        <item name="passwordToggleTint">@color/white</item>
    </style>

Antoine

Answer 7

Create a custom Style.

<style name="PasswordText" parent="TextAppearance.AppCompat">
    <item name="android:textColor">@color/dt_login_text</item>
    <item name="android:textColorPrimary">@color/dt_login_text</item>
</style>

XML Code. // This will change the password mask color.

<android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="@dimen/padding_6"
            android:theme="@style/PasswordText"
            android:layout_margin="@dimen/margin_3"
            android:gravity="center"
            android:inputType="textPassword"
            android:text="Q"/>

Zeller