Change mask password selection color

Question

As you can see in the picture, I have an Android app with a black background and white text. However, there is actually a “Show Text” icon that looks like an “eye,” and it is also black :( Is there a 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 correct answer, there is a way to adjust its color. https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html#attr_android.support.design:passwordToggleTint

 setPasswordVisibilityToggleTintList(ColorStateList) 

Update: you can directly add the following attribute to TextInputLayout:

 app:passwordToggleTint="#FFF" 

Answer 2

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

Follow these steps to change the color of your switch:

• 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> 

• Add passwordToggleTintMode and passwordToggleTint to your TextInputLayout , as shown 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 change its color.

Answer 3

Add the following xmlns: app to your layout.

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

Now set the ToggleEnabled password & ToggleTint password in EditText respectively

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

Answer 4

Here is a good way to do this programmatically:

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

Call this method in the TextInputLayout object.

Answer 5

If you use the background for edittext or texteditlayout, then switching the visibility of the password is hidden under the background. Therefore, remove the background or create your own style and make it the theme for the text of editing in XML format.

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

If the problem persists or the background is not saved, change the theme of the application itself, as the primary colors are defined there.

Here is another workaround that didn't work for me. This is what I got from Google Android Docs,

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

Answer 6

 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"/> 

Answer 7

Add file with selector.xml drawing:

 <?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 to this android:background="@drawable/selector" 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); } } };