PasswordEditText

A custom EditText with a switchable icon which shows or hides the password

Programming language: Java

License: MIT License

Tags: TextView/EditText Widget    

Latest version: v0.9

README

Deprecated

This library is deprecated now as there is an official way to use the password toggle with the TextInputLayout (inside the support library starting with version 24.2.0).

<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true">

        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout

For more information check the official docs.

Password EditText

A simple extension to the standard Android EditText which shows an icon on the right side of the field and lets the user toggle the visibility of the password he puts in.

NOTE

Support-library versions 24.2.0 and upwards now have built-in functionality to show an eye icon and toggle password visibility (For more info see docs). You can nevertheless still use this lib, maybe because you want some of the features that the built-in approach does not have.

How does it look like?

Usage

For a complete sample you can check out the sample project provided within.

In short: Just include the PasswordEditText instead of the standard EditText and you are good to go.

<com.maksim88.passwordedittext.PasswordEditText
            android:id="@+id/input_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="Password" />

You can also wrap PasswordEditText inside a TextInputLayout to get a material design moving label on top:

<android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <com.maksim88.passwordedittext.PasswordEditText
            android:id="@+id/input_password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="Password" />
    </android.support.design.widget.TextInputLayout>

Note: be sure to include the design library to use TextInputLayout. (for more details see sample)

You can also use TextInputLayout to achieve an even prettier setError() dialog using setErrorEnabled(true) on the outer TextInputLayout and then calling setError() on it. This underlines the text and shows an error message underneath the text.

Customize

You can add your own custom icons which are shown on the right side of the EditText.

Do this by first adding the custom namespace to your root layout, e.g.:

<LinearLayout
    [...]
    xmlns:app="http://schemas.android.com/apk/res-auto"
    [...]>
</Linearlayout>

After that you can add the icons with the attributes app:pet_iconShow and app:pet_iconHide:

<com.maksim88.passwordedittext.PasswordEditText
    [...]
    app:pet_iconShow="@drawable/..."
    app:pet_iconHide="@drawable/..."
    [...]
/>

You can also set toggle the monospace Font inside the PasswordEditTexts with app:pet_nonMonospaceFont:

<com.maksim88.passwordedittext.PasswordEditText
    [...]
    app:pet_nonMonospaceFont="true"
    [...]
/>

Another customization is to just toggle the visibility of the password when the icon is hovered with app:pet_hoverShowsPw:

<com.maksim88.passwordedittext.PasswordEditText
    [...]
    app:pet_hoverShowsPw="true"
    [...]
/>

If you do not like the alpha, that is set to all the icons, you can disable it using app:pet_disableIconAlpha

NOTE: alpha values are taken from the material design guidelines (https://www.google.com/design/spec/components/text-fields.html#text-fields-password-input)

<com.maksim88.passwordedittext.PasswordEditText
    [...]
    app:pet_disableIconAlpha="true"
    [...]
/>

For a working example of the different customizations check out the activity_main.xml inside the sample project.

Download

The library is available from jcenter(), so all you need to do is include it in your apps build.gradle:

dependencies {
          compile 'com.maksim88:PasswordEditText:v0.9'
  }

Alternatively you can use jitpack.io: More info here: https://jitpack.io/#maksim88/PasswordEditText

Questions?

If you have any questions feel free to open a github issue with a 'question' label

License

Licensed under the MIT license. See [LICENSE](LICENSE.md).