[Android] 패스워드 아이콘이 글자가 존재할 때만 보이도록 만들기

내가 원하는 결과물

• 패스워드창 제일 오른쪽에 위치한 눈 모양 아이콘을 누르면 패스워드가 보인다.
  
  • 해당 아이콘을 visible/invisible icon이라 부르겠다.
• 사용자가 패스워드를 입력했을 때에만 해당 아이콘을 보여주고 싶다.
  • 즉, 아무런 내용을 패스워드창에 입력하지 않았을 땐 해당 아이콘이 안보이게 만들어주고 싶다.

 

 

방법

1. 우선 FrameLayout으로 패스워드창 레이아웃인 TextInputLayout을 감싸주자.

 

2. 그 다음 visible/invisible icon의 바로 위에 겹쳐 올려줄 네모 상자(dummyImage)를 FrameLayout안에 넣어주자.

 

참고: 네모 상자는 아이콘을 가리기 위한 용도이니, 당연히 패스워드 창의 배경색깔과 동일한 색으로 만들어줘야한다!

 

네모상자(dummyImage)

<View
    android:id="@+id/dummyImage"
    android:layout_width="85dp"
    android:layout_height="match_parent"
    android:layout_gravity="right"
    android:background="@color/black"
    />

 

즉, 전체 코드는 아래와 같아진다.

...

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="62dp"
    android:layout_weight="1">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/login_pw_textinputlayout"
        android:layout_width="match_parent"
        android:layout_height="62dp"
        app:endIconDrawable="@drawable/btn_pw_visible_toggle_selector"
        app:endIconMode="password_toggle">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/login_pw_input"
            android:layout_width="match_parent"
            android:layout_height="62dp"
            android:layout_weight="2"
            android:background="@null"
            android:inputType="textPassword"
            android:textColor="@color/white"
            android:textCursorDrawable="@drawable/cursor"
            android:textSize="25dp">

        </com.google.android.material.textfield.TextInputEditText>

    </com.google.android.material.textfield.TextInputLayout>

    <View
        android:id="@+id/dummyImage"
        android:layout_width="85dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:background="@color/black" />

</FrameLayout>

...

 

3. 이제 LoginFragment.kt로 가서 리스너(addTextChangedListener)를 사용하여 언제 네모상자를 사용자에게 노출시켜 visible/invisible 아이콘을 가려줄지에대해 로직을 만들어주자.

 

LoginFragment.kt

class LoginFragment : Fragment() {

    private lateinit var loginViewModel: LoginViewModel
    private var _binding: FragmentLoginBinding? = null
    private val binding get() = _binding!!

    override fun onCreateView(

        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {

        _binding = FragmentLoginBinding.inflate(inflater, container, false)

        _binding!!.loginPwInput.addTextChangedListener(object : TextWatcher {
            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {
            }
            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
                if (TextUtils.isEmpty(_binding!!.loginPwInput.text)) {
                    _binding!!.dummyImage.visibility= View.VISIBLE;
                } else {
                    _binding!!.dummyImage.visibility= View.GONE
}
            }
            override fun afterTextChanged(s: Editable?) {
            }
        })
        return _binding!!.root
}

}

• text가 바뀌었을 때 (onTextChanged)
• 만약 text가 존재하지 않는다면 (TextUtils.isEmpty(_binding!!.loginPWInput.text)
• 네모상자(dummyImage)를 보여주기 (View.VISIBLE)