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>

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"

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.

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.

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"