[Android | Kotlin] 비밀번호 숨기기/보이기 버튼 만들어보기(TextInputLayout 아님!)

🧐 도입

프로젝트를 진행 중 비밀번호 입력란에 비밀번호 숨기기/보이기 토글 버튼을 추가하고싶었다.
TextInputLayout을 이용하면 쉽게 추가할 수 있었지만, 디자인을 내 입맛대로 custom하고 싶었기 때문에 직접 만들어보기로 했다.

💻 설명 및 코드

✅모든 기능과 디자인은 최소화하여 진행했습니다.

• ic_hide.xml

<layer-list xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/_ic_hide"
        android:width="25dp"
        android:height="23dp"
        tools:ignore="ResourceCycle" />

</layer-list>

@drawable/_ic_hide 는 비밀번호 숨김 아이콘 png 파일입니다.

• ic_show.xml

<layer-list xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/_ic_show"
        android:width="25dp"
        android:height="23dp"
        tools:ignore="ResourceCycle" />

</layer-list>

@drawable/_ic_show 는 비밀번호 보임 아이콘 png 파일입니다.

• activity_main.xml

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ImageButton
        android:id="@+id/btnPasswordHide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="5dp"
        android:background="@drawable/ic_show"
        android:tag="0"
        android:translationZ="1dp"
        
        app:layout_constraintBottom_toBottomOf="@id/etPassword"
        app:layout_constraintEnd_toEndOf="@id/etPassword"
        app:layout_constraintTop_toTopOf="@id/etPassword" />

    <EditText
        android:id="@+id/etPassword"
        android:layout_width="200dp"
        android:layout_height="36dp"

        android:background="@color/material_dynamic_neutral60"
        android:inputType="textPassword"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

ImageButton의 tag를 지정해두고 MainActivity에서 해당 값을 이용해 제어합니다.

• MainActivity.kt

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.text.method.HideReturnsTransformationMethod
import android.text.method.PasswordTransformationMethod
import android.widget.EditText
import android.widget.ImageButton

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val etPassword = findViewById<EditText>(R.id.etPasswordCheck)
        val btnHide = findViewById<ImageButton>(R.id.btnPasswordHide)
        btnHide.setOnClickListener {
            when(it.tag){
                "0" -> {
                    btnHide.tag = "1"
                    etPassword.transformationMethod = HideReturnsTransformationMethod.getInstance()
                    btnHide.setImageResource(R.drawable.ic_hide)
                }
                "1" -> {
                    btnHide.tag = "0"
                    etPassword.transformationMethod = PasswordTransformationMethod.getInstance()
                    btnHide.setImageResource(R.drawable.ic_show)
                }
            }
            etPassword.setSelection(etPassword.text!!.length)
        }
    }
}

• etPassword.setSelection(etPassword.text!!.length) 는 숨기기/보이기 후에 커서의 위치가 가장 끝 글자에 오게 합니다.
• when 문 내에서 숨기기/보이기와 ImageButton의 이미지를 변경합니다.

• 초기 화면

• ImageButton을 클릭했을 때 화면

✍️정리

TextInputLayout을 사용하면 쉽게 사용할 수 있는 기능이지만, custom을 위해 직접 구현해보려니 생각보다 쉽지 않았다.
처음에는 구글링 했을 때는 etPassword.inputType을 변경하는 방법으로 구현할 수 있는 것 같았는데, 해당 방법으로는 되지 않아 더 검색해본 결과

etPassword.transformationMethod = HideReturnsTransformationMethod.getInstance()
etPassword.transformationMethod = PasswordTransformationMethod.getInstance()

로 제어할 수 있었다.