[Android] 로그인 시 아이디 창에 적힌 글자 한 번에 clear하는 기능 구현

공부한 내용

 

Android Studio 빌드 안되는 문제 해결하기

→ 컴퓨터가 심하게 느려져, Chrome을 켠다던가 바탕화면으로 넘어간다던가 하는 모든 동작이 되지 않음

→ 해당 프로그램은 Ahnlab V3 Service. 즉, V3가 CPU를 다 잡아먹고 있었던 것이었다

→ 결론적으로 V3를 업데이트 하니 해당 문제가 사라졌다..고 생각했는데 다시 뻑났다

→ 일주일간 V3를 지우고 회사업무 보기로 전산팀과 이야기 됨🤣

→ V3가 Android Studio의 소스코드를 악성코드로 인식한 것 같다는 추측

→ Ctrl + Alt + Del 하여 [작업관리자]모드로 들어가보니 ASDF Service Application 이라는 것이 CPU를 98%이상 잡아먹고 있었음

→ Android Studio를 열어 소스코드를 빌드하면 Android Studio가 먹통이 되는 상황 발생

 

EditText에 적힌 text를 버튼 하나로 한 번에 clear하는 기능 구현

예) 로그인 시 사용자가 id를 잘못 입력하였을 때, 버튼 한 번으로 한꺼번에 지울 수 있도록!

 

→ 해당 레이아웃의 endIconMode의 속성의 clear_text를 사용하면 딱 내가 원하는 기능!

→ 그러나 텍스트를 지워주는 버튼 모양(icon)을 자체적으로 custom하고싶었음

→ EditText로 열심히 구현하려는 도중, TextInputLayout이란 레이아웃을 알게 되었음

 

 

내가 원하는 모양의 버튼으로 endIconMode속성의 clear_text기능을 사용하기

우선 기존의 소스코드는 다음과 같다.

 

fragment_login.xml

<com.google.android.material.textfield.TextInputLayout
                        android:layout_width="match_parent"
                        android:layout_height="62dp"
                        android:layout_weight="1"          
                        app:endIconMode="clear_text">

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

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

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

 

text를 한 번에 지워주는 버튼을 커스텀하기위해 아래 속성을 TextInputLayout에 넣는다.

app:endIconDrawable="@drawable/id_clear_btn"

 

 

이렇게 하면 끝이지만, 해당 drawble소스의 이미지 크기를 조절하고 싶다면?

 

아래와 같이 drawable 파일에서 `width`와 `height`을 직접 지정해주자.

또한 padding을 넣는 것과 같은 기능을 넣고싶다면 우선 공백을 주고 싶은 부분(`right`)을 지정하고 @dimen을 사용해 그 크기를 조절하자.

 

id_clear_btn.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:width="20dp"
        android:height="20dp"			
        android:bottom="@dimen/padding_bottom" 
        android:drawable="@drawable/img"
        android:right="@dimen/fragment_vertical_margin"
        />
</layer-list>

 

여기서 @dimen에 기본적으로 들어가있는 사이즈들이 다 맘에 안든다면? 

dimens.xml를 직접 커스텀 해서 만들어 주면 된다.

 

 

res → values → dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="fragment_horizontal_margin">16dp</dimen>
    <dimen name="fragment_vertical_margin">16dp</dimen>

    <!-- 내가 커스텀하여 만들어준 dimen -->
    <dimen name="padding_bottom">10dp</dimen>
</resources>

 

결과물

 

궁금한 내용 / 부족한 내용 🧐

drawable의 xml파일엔 많은 속성들이 있는데 내가 아직 잘 알고있지 않은 것 같다.

오늘처럼 그 때 그 때 궁금한 내용 검색하며 천천히 공부해나가도 될 것 같다!

 

느낀 점 🤔

오늘은 V3로 인해 Android Studio를 사용할 수 없어서 시간을 그냥 허투루 보내버렸다..

V3가 너무 말썽이어서 일주일간 해당 프로그램을 삭제하고 개발하기로 하였는데.. 괜찮으려나?

그렇지만 어제 구현하지 못했던 text를 한번에 clear하는 기능을 구현해서 매우 기분이 좋다!

그런데 내가 찾던 endIconDrawable기능이 Document에 적혀있었음에도 불구하고, 영어로 적혀있어 제대로 알아듣지 못해 더 헤매었다.

정확히! endIconDrawable은 end icon을 지정할 수 있는 속성이고, 이 매서드는 TextInputLayout을 선언하고 endIconMode를 지정해준 다음 사용이 가능하다고 나와있다.

영어문서로 보니 직접 와닿지가 않아서 그런 것 같기도 하고.. 내가 Document에 익숙하지 않아서 그런 것 같기도 하다.

📌 앞으론 Document를 더 가까이 할 것!

---

 

제 글이 누군가에게 도움이 되었길 바랍니다.

추가적인 질문은 언제든지 환영해요.

 

인상깊게 보셨다면 바로 위에 있는 광고 한 번만 클릭해주세요!

정말 큰 힘이 됩니다~! 🤠