Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change to custom icon from eye-icon(default) for hide-show password in android EditText

I want to change/display different icons for show password in android edittext. I am using following code to display icon.

<android.support.design.widget.TextInputLayout     android:id="@+id/layoutTextInput"     android:textColorHint="@color/aluminium">     <android.support.v7.widget.AppCompatEditText         android:id="@+id/editTextValue"         android:imeOptions="actionNext"         android:layout_marginBottom="8dp"         android:inputType="text"/> </android.support.design.widget.TextInputLayout> 

I want to use custom icons instead of normal icons(eye-icon). Please help me.

like image 460
Saianuradha Jandhyala Avatar asked May 25 '17 05:05

Saianuradha Jandhyala


People also ask

How to show password icon in EditText android?

Show/Hide Password in EditText in AndroidsetTransformationMethod(PasswordTransformationMethod. getInstance()); Here one edittext with input type = password and one eye toggle ImageView button. We have to manage show/hide password using this Imageview onClick Action.

How to show/hide password using edittext in Android?

Steps to show/hide password EditText should be provided with attribute of android:inputType="textPassword". Password can be shown or hidden using EditText.transformationMethod. To show the password, set pwd.transformationMethod = PasswordTransformationMethod.getInstance().

How to hide/show Password using eye icon in HTML and JavaScript?

Hide/Show Password using Eye icon in HTML and JavaScript 1. Create HTML Login form with Eye Icon We are going to place the eye icon inside the password text field. We can use... 2. Add JavaScript to Toggle Show/Hide Password

How to change the color of the default eye icon?

If you would like to use default eye icon (show/hide password) but change the icon color then you simply put the line to change the color of the icon. your custom icon color does not show. Tint color will be shown. The whole xml code like below:

How to add eye icon in HTML form text?

First of all import the awesome font Stylesheet into your HTML form page. Use the tag <i> to display the eye icon. This icon is also know as visibility eye icon. Use below CSS to put the eye icon at the end of the password text field. If you are new to CSS, refer how to add CSS in HTML. Put this tag below the passwords input field.


1 Answers

Create a new drawable file and named it as show_password_selector.xml

<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/ic_visibility_black_18dp" android:state_checked="true"/> <item android:drawable="@drawable/ic_visibility_off_black_18dp"/> </selector> 

and in your layout file, add app:passwordToggleDrawable attribute in TextInputLayout :

<android.support.design.widget.TextInputLayout     android:id="@+id/layoutTextInput"     app:passwordToggleEnabled="true"     app:passwordToggleDrawable="@drawable/show_password_selector"     android:textColorHint="@color/gray">     <android.support.v7.widget.AppCompatEditText         android:id="@+id/editTextValue"         android:imeOptions="actionNext"         android:layout_marginBottom="8dp"         android:inputType="text"/> </android.support.design.widget.TextInputLayout> 

For Reference: https://www.youtube.com/watch?v=dW0YIV0Z9qk

like image 121
sham.y Avatar answered Sep 18 '22 20:09

sham.y