Monday 18 May 2015

Android Example of showing or hiding password

Hello friends'

Here is a simple example of showing or hiding PASSWORD field.

Here i am setting an image icon on the right side of an edit text which is of type password.
When click or touch on this image icon the password field will be visible and when it touch or click again the password will hide again.

Here is the Layout file

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:tools="http://schemas.android.com/tools"
              android:layout_width="match_parent"
              android:layout_height="match_parent"
              android:paddingLeft="@dimen/activity_horizontal_margin"
              android:paddingRight="@dimen/activity_horizontal_margin"
              android:paddingTop="@dimen/activity_vertical_margin"
              android:paddingBottom="@dimen/activity_vertical_margin"
              android:gravity="center"
              tools:context=".MainActivity">

//Note android:inputType="textPassword"
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:hint="Enter Password"
        android:drawableRight="@mipmap/eye_icon"
        android:id="@+id/passwordET"/>

</LinearLayout>

Here is the Activity class

package example.hideorviewpassword;

import android.app.Activity;
import android.os.Bundle;
import android.text.InputType;
import android.view.MotionEvent;
import android.view.View;
import android.widget.EditText;


public class MainActivity extends Activity {

    private EditText passwordET;
    private boolean isPasswordShown;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        passwordET = (EditText) findViewById(R.id.passwordET);
        passwordET.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                final int DRAWABLE_RIGHT = 2;
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    if (event.getRawX() >= (passwordET.getRight() - passwordET.getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width())) {
                        if(isPasswordShown) {
                            isPasswordShown = false;
                            passwordET.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.mipmap.eye_icon, 0);
                            passwordET.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
                        }
                        else {
                            isPasswordShown = true;
                            passwordET.setCompoundDrawablesWithIntrinsicBounds(0, 0, R.mipmap.eye_visible_icon, 0);
                            passwordET.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
                        }
                        passwordET.setSelection(passwordET.getText().length());
                    }
                }
                return false;
            }
        });
    }
}

The output will be like:

          


For source code click here



No comments:

Post a Comment