วิธีสลับระหว่างซ่อน/แสดงรหัสผ่านใน Android

วิธีสลับระหว่างซ่อน/แสดงรหัสผ่านใน Android

มีหลายกรณีที่ต้องการแสดงรหัสผ่านขณะพิมพ์หรือหลังจากพิมพ์เสร็จ ตัวอย่างนี้สาธิตวิธีสลับระหว่างซ่อนและแสดงรหัสผ่าน

ขั้นตอนที่ 1 - สร้างโปรเจกต์ใหม่ใน Android Studio

ไปที่ File → New Project และกรอกรายละเอียดที่จำเป็นทั้งหมดเพื่อสร้างโปรเจกต์ใหม่

ขั้นตอนที่ 2 - เพิ่มโค้ดใน res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    android:background="#dde4dd"
    android:orientation="vertical">
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/layoutEmail"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/email"
            android:hint="Enter Email id"
            android:inputType="textEmailAddress"/>
    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/layoutPassword"
        android:layout_marginTop="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox">
        <android.support.design.widget.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/password"
            android:hint="Password"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:gravity="center"
        android:layout_height="wrap_content">
        <Button
            android:id="@+id/passwordVisible"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Show"/>
        <Button
            android:id="@+id/click"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Click"/>
    </LinearLayout>
</LinearLayout>

ในโค้ดด้านบน เราให้ TextInputEditText สองตัวและปุ่มหนึ่งตัว หากคลิกปุ่ม Click จะดึงข้อมูลจาก EditText และแสดงใน Toast หรือหากคลิกปุ่ม Show จะแสดง/ซ่อนรหัสผ่านตามต้องการ

ขั้นตอนที่ 3 - เพิ่มโค้ดใน src/MainActivity.java

package com.example.andy.myapplication;

import android.graphics.Point;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.method.PasswordTransformationMethod;
import android.view.TextureView;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    Button passwordVisible;
    EditText email, password;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        email = findViewById(R.id.email);
        password = findViewById(R.id.password);
        passwordVisible = findViewById(R.id.passwordVisible);
        passwordVisible.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (password.getText().toString().isEmpty()) {
                    password.setError("Please Enter Pass word");
                } else {
                    if (passwordVisible.getText().toString().equals("Show")) {
                        passwordVisible.setText("Hide");
                        password.setTransformationMethod(null);
                    } else {
                        passwordVisible.setText("Show");
                        password.setTransformationMethod(new PasswordTransformationMethod());
                    }
                }
            }
        });
        Button click = findViewById(R.id.click);
        click.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!email.getText().toString().isEmpty() && (!password.getText().toString().isEmpty())) {
                    Toast.makeText(MainActivity.this, "you have entered email id " + email.getText().toString() + "Password " + password.getText().toString(), Toast.LENGTH_LONG).show();
                } else {
                    email.setError("Please Enter Email id");
                    password.setError("Please Enter Pass word");
                }
            }
        });
    }
}

เพื่อแสดงและซ่อนรหัสผ่าน เราใช้ Password Transformation Method ดังนี้:

if (passwordVisible.getText().toString().equals("Show")) {
    passwordVisible.setText("Hide");
    password.setTransformationMethod(null);
} else {
    passwordVisible.setText("Show");
    password.setTransformationMethod(new PasswordTransformationMethod());
}

ในข้างต้นกำหนดว่า:

แสดงรหัสผ่าน: password.setTransformationMethod(null);
ซ่อนรหัสผ่าน: password.setTransformationMethod(new PasswordTransformationMethod());

ขั้นตอนที่ 4 - เปิด build.gradle และเพิ่มการอ้างอิงไลบรารี Design Support

apply plugin: 'com.android.application'
android {
    compileSdkVersion 28
    defaultConfig {
        applicationId "com.example.andy.myapplication"
        minSdkVersion 15
        targetSdkVersion 28
        compileSdkVersion 28
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
}

ลองรันแอปพลิเคชันของคุณ สมมติว่าคุณเชื่อมต่ออุปกรณ์ Android จริงกับคอมพิวเตอร์แล้ว เพื่อรันแอปจาก Android Studio ให้เปิดไฟล์กิจกรรมของโปรเจกต์หนึ่งและคลิกไอคอน Run จากแถบเครื่องมือ เลือกอุปกรณ์มือถือของคุณเป็นตัวเลือก และตรวจสอบอุปกรณ์ซึ่งจะแสดงหน้าจอเริ่มต้น

เป็นหน้าจอเริ่มต้นและคลิกปุ่ม Show โดยไม่กรอกรหัสผ่าน จะแสดงข้อผิดพลาด

ตอนนี้กรอกข้อมูลในช่องรหัสผ่านและคลิกปุ่ม Show จะแสดงผลลัพธ์ดังภาพด้านล่าง