Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> Android

Chuyển đổi hiển thị/ẩn mật khẩu (Show/Hide Password) trong Android

Mục tiêu

Cho phép người dùng bật/tắt hiển thị mật khẩu trong EditText bằng nút Show/Hide.

Các bước

Bước 1: Tạo project

Bước 2: Layout activity_main.xml - Dùng TextInputLayout

<LinearLayout ... android:orientation="vertical" android:background="#dde4dd">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/layoutEmail"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Enter Email id"
            android:inputType="textEmailAddress" />
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:id="@+id/layoutPassword"
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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>

Bước 3: MainActivity.java - Logic Show/Hide

public class MainActivity extends AppCompatActivity {
    Button btnShowHide;
    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);
        btnShowHide = findViewById(R.id.passwordVisible);

        btnShowHide.setOnClickListener(v -> {
            if (password.getText().toString().isEmpty()) {
                password.setError("Please Enter Password");
                return;
            }
            if (btnShowHide.getText().toString().equals("Show")) {
                btnShowHide.setText("Hide");
                password.setTransformationMethod(null); // Hiện text
            } else {
                btnShowHide.setText("Show");
                password.setTransformationMethod(new PasswordTransformationMethod()); // Ẩn text
            }
        });

        findViewById(R.id.click).setOnClickListener(v -> {
            if (!email.getText().toString().isEmpty() && !password.getText().toString().isEmpty()) {
                Toast.makeText(this, "Email: " + email.getText() + " Pass: " + password.getText(), Toast.LENGTH_LONG).show();
            } else {
                email.setError("Enter Email");
                password.setError("Enter Password");
            }
        });
    }
}

Cốt lõi:

// Hiện mật khẩu
password.setTransformationMethod(null);

// Ẩn mật khẩu
password.setTransformationMethod(new PasswordTransformationMethod());

Bước 4: build.gradle - Thêm design support library

implementation 'com.android.support:design:28.0.0'

Kết quả

Màn hình ban đầu:

Chuyển đổi hiển thị/ẩn mật khẩu (Show/Hide Password) trong Android

Nhập pass, bấm Show → hiển thị rõ text:

Chuyển đổi hiển thị/ẩn mật khẩu (Show/Hide Password) trong Android

Bấm Hide → chuyển về dạng chấm/dấu sao.