How to show/hide password in app using android studio

how-to-show-hide-password-in-app-using-android-studio

how-to-show-hide-password-in-app-using-android-studio

Passwords have become lengthy and complicated for security purposes. At times, it becomes difficult to keep track of typing the characters. To facilitate the user with the display of actual characters of password when needed is a useful functionality. Many web logins and android applications are embedding this functionality for user convenience.

hide_password.xml

<vector android:height="24dp" android:viewportHeight="52"
    android:viewportWidth="52" android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    
    <path android:fillColor="#FF000000" android:pathData="M51.8,25.1c-1.6,-3.2 -3.7,-6.1 -6.3,-8.4L37,25.1c0,0.3 0,0.6 0,0.9c0,6.1 -4.9,11 -11,11c-0.3,0 -0.6,0 -0.9,0l-5.4,5.4c2,0.4 4.1,0.7 6.2,0.7c11.3,0 21.1,-6.6 25.8,-16.1C52.1,26.3 52.1,25.7 51.8,25.1z"/>
    
    <path android:fillColor="#FF000000" android:pathData="M48.5,5.6l-2.1,-2.1C45.8,2.9 44.7,3 44,3.8l-7.3,7.3C33.4,9.7 29.8,9 26,9C14.7,9 4.9,15.6 0.2,25.1c-0.3,0.6 -0.3,1.3 0,1.8c2.2,4.5 5.5,8.2 9.6,11L3.8,44c-0.7,0.7 -0.8,1.8 -0.3,2.4l2.1,2.1C6.2,49.1 7.3,49 8,48.2L48.2,8C49,7.3 49.1,6.2 48.5,5.6zM15,26c0,-6.1 4.9,-11 11,-11c2,0 3.8,0.5 5.4,1.4l-3,3C27.6,19.2 26.8,19 26,19c-3.9,0 -7,3.1 -7,7c0,0.8 0.2,1.6 0.4,2.4l-3,3C15.5,29.8 15,28 15,26z"/>
    
</vector>

MainActivity.java

public class MainActivity extends AppCompatActivity {
    ImageView icon;
    EditText password;

    boolean isVisible = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        icon = findViewById(R.id.password_hide_view);
        password = findViewById(R.id.password);

        icon.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (isVisible){
                    isVisible = false;
                    password.setTransformationMethod(PasswordTransformationMethod.getInstance());
                    icon.setImageResource(R.drawable.hide_password);
                } else {
                    isVisible = true;
                    password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                    icon.setImageResource(R.drawable.ic_baseline_remove_red_eye_24);
                }
            }
        });

    }
}

YouTube Video :

Leave a Reply

Your email address will not be published. Required fields are marked *