Cara Menerapkan Show/Hide Password di Android Studio


Assalamualaikum Warahmatullahi Wabarakatuh.

Didalam sebuah aplikasi, khususnya aplikasi online yang mempunyai fitur login, pastinya terdapat Field Password yang harus user inputkan, password yang diinputkan akan di hide dan hanya menampilkan simbol, pada umumnya field password tersebut terdapat sebuah fungsi yang digunakan untuk menampilkan password, agar user tidak salah dalam memasukan password tersebut.


Pada tutorial ini, kita akan membuat program sederhana dengan menggunakan EditText untuk memasukan password user dan membuat fungsi show/hide menggunakan CheckBox.

Materi yang harus kalian ikuti sebelumnya :


Cara Menerapkan Show/Hide Password di Android Studio

1) Buka aplikasi Android Studio kalian, Buat Project Baru.

2) Buka file activity_main.xml, disini kalian tambahkan EditText dan juga Chectbox, seperti berikut.
<?xml version="1.0" encoding="utf-8"?>
<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:layout_margin="16dp"
    android:gravity="center"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">


    <EditText
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Password"
        android:inputType="textPassword" />

    <CheckBox
        android:id="@+id/showPass"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Show Password" />
</LinearLayout>
jangan lupa untuk memasukan atribut inputType:"textPassword", disunakan untuk menghide password yang kita masukan.

View:


3) Buka file MainActivity.java kalian, masukan source code berikut ini:
package android.cianjur.developer.net.basicandroid;

/*
 Dibuat Oleh WILDAN M ATHOILLAH
 */

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.view.View;
import android.widget.CheckBox;
import android.widget.EditText;

public class MainActivity extends AppCompatActivity{

    //Deklarasi Variable
    private EditText PassInput;
    private CheckBox ShowPass;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        PassInput = findViewById(R.id.password);
        ShowPass = findViewById(R.id.showPass);
        
        //Set onClickListener, untuk menangani kejadian saat Checkbox diklik
        ShowPass.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if(ShowPass.isChecked()){
                    //Saat Checkbox dalam keadaan Checked, maka password akan di tampilkan
                    PassInput.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                }else {
                    //Jika tidak, maka password akan di sembuyikan
                    PassInput.setTransformationMethod(PasswordTransformationMethod.getInstance());
                }
            }
        });
    }
}
Demo:




Terimakasih atas kunjungannya, semoga tutorial yang saya berikan bisa bermanfaat untuk kalian semua, selebihnya, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.

Wildan M Athoillah
Wildan M Athoillah Blogger dan spesialis pembuat aplikasi android.