scottyab / showhidepasswordedittext

Show/Hide Password EditText is a very simple extension of Android's EditText that puts a clickable hide/show icon in the right hand side of the EditText that allows showing of the password.

#Show/Hide Password EditText

#In Android Support Library, revision 24.2.0 (August 2016) TextInputLayout adds support for the password visibility toggle. Marking showhidepasswordedittext as Deprecated at of 18th Aug 2016.

Inputting text on mobile devices with their smaller keyboards can be error prone and when the password is obscured it can lead to failed login attempts that can frustrate users. Show/Hide Password EditText is a very simple extension of Android's EditText that puts a clickable hide/show icon in the right hand side of the EditText that allows showing of the password.

Features:

• Use custom fonts/typefaces
• Customise the show/hide icon
• Tint the show/hide icon
• Use either android:inputType="textPassword" or android:inputType="numberPassword"
• Compatible with TextInputLayout from the Design Support lib.
• Supports back to API 9+ (Gingerbread)
• Password visibility survives configuration changes

How to use

It's just like the regular EditText.

 <com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/simplePassword"
            android:hint="Password"
            />

Also see several examples in the sample project.

Add as dependency

This library is not yet released in Maven Central, until then you can add as a library module or use JitPack.io

add remote maven url

    allprojects {
        repositories {
            maven {
                url "https://jitpack.io"
            }
        }
    }

then add a library dependency. Remember to check for latest release here

    dependencies {
        compile 'com.github.scottyab:showhidepasswordedittext:0.8'
    }

Customization

• Customise the hide/show icons via custom attributes

  • app:drawable_show="@drawable/ic_custom_show"
  • app:drawable_hide="@drawable/ic_custom_hide"

• You can also tint icon

  • xml-attribute app:tint_color="@android:color/holo_orange_dark"
  • runtime using setTintColor(int color)

• Increase the size of the touch area that makes the view toggle app:additionalTouchTargetSize=50dp

##Licence

Copyright (c) 2015 Scott Alexander-Bown

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

showhidepasswordedittext's Issues

Strange behavior when using layout_centerHorizontal

I've noticed the icon would not work if I set android:layout_centerHorizontal=true in the ShowHidePasswordEditText view, but I also observed that it would work (and apparently that's only way) if I swipe the icon from left to right.

PS: I'm using RelativeLayout, I don't know if this makes any difference.

Edit: I forgot to mention that I'm also using api 24.

EditText is not materialized on prelollipop

Using ShowHidePasswordEditText , the editText does not get the material design on pre-lollipop devices (Kitkat for example)

Drawable-Left image vanishes after clicking on edit text

<com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:id="@+id/password_editText"
        android:hint="Type your Password"
        android:drawableLeft="@drawable/key"
        android:drawablePadding="15dp" />

The Left-Drawable image vanishes after we start typing in the edit text

set tint of icon based on theme

Would be cool if showhidepasswordedittextview would automatically read the theme colorAccent and set the icon tint accordingly.

Only show symbol when edittext has focus

Hi,

I'd really like to have the option to only show the icon when the edit text has focus. If this is something you'd be interested in adding, I'm happy to submit a pull request.

android:inputType="number" is not working on Marshamallow

android:inputType="number" and android:digits="0123456789" is not working on Marshamallow

show some alphabetic keypad

error icon over laid on show/hide image

When inputView.setError("my error msg") is set, the error icon is drawn over the show/hide icon.

Remove "android:label" from manifest

Hi.

The library should not have android:label="@string/app_name" in the manifest because it will force the app that uses the library to use the replace attribute.

Error when using this library:

Error:Execution failed for task ':app:processDebugManifest'.
> Manifest merger failed : Attribute application@label value=(@string/app_name) from AndroidManifest.xml:35:9-46
    is also present at [com.github.scottyab:showhidepasswordedittext:0.3] AndroidManifest.xml:11:18-50 value=(@string/app_name).
    Suggestion: add 'tools:replace="android:label"' to <application> element at AndroidManifest.xml:31:5-82:19 to override. 

Add support for icon tinting

Using DrawableCompat.wrap() and DrawableCompat.setTint() it would be possible to tint icon on the fly

how move icon drawable show to left edit text

app:drawable_hide="@drawable/eye"

idont how make this work , for rtl language when i writing on edit text is a right of edit text and want icon left on edit text show for me

Image causes text to be off-center

If you have two text fields one on top of the other with one being a regular EditText field and the other of this custom type and both have a gravity of center; then the text will not line up once the show/hide image appears.

allow setting of text instead of an icon

Show/Hide text is less mental strain to understand and can be localised.

• Add two new attributes show_text and hide_text and corresponding java methods.
• If text set then use this in preference over drawable

Suggestion: treat the text as a drawable create inner class that extends Drawable. This way it can just be handled as a drawable and the logic of the view can stay the same (not if text do this). If possible get the typeface from the edittext in case a custom font has been set.

Extend from android.support.design.widget.TextInputEditText

Is it possible to extend the ShowHidePasswordEditText from android.support.design.widget.TextInputEditText

Doesn't support RTL languages

This is an outrage!

Idea to improve "clickability" using dead drawablePadding space

I've experimented some hard times clicking when the drawable is small. One simple but not elegant solution is to use bigger drawables or include empty margins in the drawable.

I think that checking only for inner X border is smart, but could be even better by adding some extra space.
My first simple approach was to add an offset to the border. I used a relative value, but it could be done with an absolute value too:

private static double boundsXExtension = 1.5f; //It could be an xml attribute
// Then inside onTouchEvent()
 if ((leftToRight && (x >= (this.getRight() - (int)(boundsXExtension*bounds.width())))) ||
                    (!leftToRight &&  (x <= (this.getLeft() + (int)(boundsXExtension*bounds.width()))))){

Then i came up with a probably more elegant solution; which is taking advantage of the "drawablePadding" attribute. Its pixel value is accesible via getCompoundDrawablePadding(). This solution feels quite nice since it is adding some user value to an empty space that i guess everyone is using!

if ((leftToRight && (x >= (this.getRight() - (bounds.width()+getCompoundDrawablePadding())))) ||
                    (!leftToRight &&  (x <= (this.getLeft() + (bounds.width()+getCompoundDrawablePadding())))))

InputType gets changed when clicking the Show/Hide icon

I have a password field with an input type of TYPE_CLASS_NUMBER which causes the numeric keyboard to be shown when given focus. If I click the Show/Hide icon then the keyboard unexpectedly changes to alphanumeric.

Custom Typefaces overwritten

A typeface which is set using setTypeface(Typeface) is overwritten when tapping the icon. This is caused by the call to setInputType() in togglePasswordVisibility(). Instead of calling setInputType() it would be better to use setTransformationMethod() like this:

private void togglePasswordVisibility() {
    // Store the selection
    int selectionStart = this.getSelectionStart();
    int selectionEnd = this.getSelectionEnd();

    // Set transformation method to show/hide password
    if (isShowingPassword) {
        setTransformationMethod(new PasswordTransformationMethod());
    } else {
        setTransformationMethod(null);
    }

    // Restore selection
    this.setSelection(selectionStart, selectionEnd);

    // Toggle flag and show indicator
    isShowingPassword = !isShowingPassword;
    showPasswordVisibilityIndicator(true);
}

Benefits:

• InputType is preserved
• Typeface is preserved

Tested on API 23

not working with android.support.design.widget.TextInputLayout

it is not working with
<android.support.design.widget.TextInputLayout
android:id="@+id/login_input_layout_username"
android:layout_width="match_parent"
android:layout_height="wrap_content">

<com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText
android:id="@+id/simplePassword"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColorHint="@android:color/white"
android:inputType="textEmailAddress"
android:gravity="left"
android:textColor="#000"
android:hint="Password" />

    </android.support.design.widget.TextInputLayout>

cannot change font of password hint

If you want to change the font form the default monaspace font that is auto set my android when you when set the inputtype to password. There's a SO post about it here. An easy fix (albeit API16+) should be android:fontFamily="sans-serif" however this doesn't work with showhidepasswordedittext.