[Android/Kotlin] EditText 속성(커서, 밑줄, 하이라이트) 색깔 변경하기(cursor, highlight, bottom line color change)

안녕하세요 골드입니다.

오늘은 EditText에 있는 여러가지 속성들의 색깔을 변경해보도록 하겠습니다.

 

1. EditText 밑줄 색깔 변경

먼저 밑줄입니다. xml파일에서 간단한 속성 추가로 밑줄의 색깔을 변경할 수 있습니다.

EditText 속성에 코드를 한 줄 추가합니다.

안드로이드 최신버전(4.0)에서 @color/colorPrimary의 색깔은 보라색입니다.

밑줄이 보라색으로 변경된 것을 볼 수 있습니다. 컬러만 여러분이 원하는 색상으로 바꾸면 되겠습니다. 

 

1-1 코드로 색깔 변경

이번에는 xml이 아닌 .kt 파일입니다. 프로그래밍적으로 코드에서 어떻게 밑줄의 색깔을 바꾸는지 알아보겠습니다. 코드를 어디에 넣어야할지 잘 모르시겠다면 onCreate() 함수 안에 넣으면 됩니다.

(참고로 backgroundTintList는 lollipop 이상에서 사용 가능합니다.)

코틀린으로 작성한 안드로이드에 장점은 findViewById가 필수적이지 않다는 점입니다. 여기서 editMemo는 EditText의 id값입니다. EditText가 가지고 있는 속성을 코드로 다루는데, backgroundTintList는 반드시 ColorStateList값을 받아야 합니다. Context는 늘 어렵지만 어플리케이션 전체에 대한 정보를 가지고 있는 설계도라고 이해하면 좋습니다. 

 

getColorStateList() 함수의 매개변수는 (Context, @color int)입니다. 작성하고 있는 어플리케이션의 Context 정보를 작성하고 두 번째 매개변수에 여러분이 원하는 색깔에 대한 리소스 정보를 입력하면 됩니다.

 

2. 커서 색깔 변경

EditText에 글자를 입력하기 위한 포인터 혹은 커서라고 불리우는 이 녀석의 색깔을 변경하겠습니다.

속성에 코드 한 줄을 추가합니다.

drawable 폴더에 cursor_drawable.xml 파일을 하나 생성합니다. 코드에서 볼 수 있듯이 Drawable이라고 써있습니다. 그렇기 때문에 반드시 drawable폴더에 파일을 생성해야 합니다.

단순히 색깔만 변경하면 커서가 보이지 않기 때문에 width값이 같이 들어가야 합니다.

통일성을 위해 같은 색깔로 바꿔줍니다.

EditText의 커서와 밑줄을 보라색으로 바꾼 모습입니다. 

 

2-1 코드로 색깔 변경

마찬가지로 코드로 변경해 보도록 하겠습니다. (textCursorDrawable 코드는 안드로이드 Q 버전 이상에서 사용 가능하기 때문에 if문 안에 선언되어 있습니다.)

editMemo는 제가 설정한 EditText의 id값입니다.

 

 textCursorDrawable은 코드에 나타나있듯이 Drawable 객체를 받아야 합니다. 위에서 밑줄 색깔을 변경할 때와 같은 맥락이지만 두 번째 매개변수를 drawable값으로 받는다는 것이 차이점입니다. 위에 설명해서 생성한 drawable을 전달해줍니다.

 

 

3. 하이라이트 색깔 변경

하이라이트는 텍스트를 복사하기 위해 드래그했을때 생기는 것을 말합니다. 하이라이트 색깔도 역시 xml 파일에서 쉽게 변경할 수 있습니다.

보라색으로 바꾸면 검정색 텍스트가 잘 안보이기 때문에 주황색으로 바꾸겠습니다. 속성 한 줄이면 하이라이트 색깔을 바꿀 수 있습니다. 하지만 텍스트를 드래그했을 때 생성되는 핸들러는 색깔이 바뀌지 않았습니다. 모바일의 작은 화면에서 텍스트에 포커스를 줄 수 있도록 도와주는 것을 핸들이라고 부릅니다.

핸들러는 안드로이드에서 제공하는 이미지를 디폴트 값으로 사용하고 있습니다. 그렇다는 것은 단순히 색깔만 바꾸게 되면 이미지가 사라져서 핸들러 역시 화면에 나타나지 않게 됩니다. 위에서 바꿨던 커서와 똑같은 상황이라고 생각하면 되겠습니다. 

 

그렇기 때문에 이번에도 drawable 폴더에 select_handler.xml 파일을 생성합니다. 

하이라이트와 같은 주황색으로 색깔을 변경합니다. 그리고 사각형을 사용하기에는 너무 어색한 부분이 있어서 원이 되도록 radius 속성을 추가했습니다. (만약 이미지를 만들 수 있다면 사실 제일 좋습니다.)

 

EditText에 속성을 추가합니다.

 핸들은 세 가지가 있습니다. 텍스트를 선택했을 때 나타나는 일반 핸들과 텍스트를 드래그했을 때 양 옆에 나타나는 Right, Left가 있습니다. 모두 똑같은 파일로 지정합니다. 

xml파일에서 설정한 것처럼 주황색으로 나오는 것을 볼 수 있습니다. 

 

3-1 코드로 변경

(안드로이드 Q 버전 이상에서 사용이 가능합니다.)

이번에는 set 함수를 사용하기 때문에 =가 아니라 괄호 안에 Drawable을 전달합니다. Drawable은 위에서 생성한 파일을 사용하면 되겠습니다. Handle만 작성했지만 Right와 Left도 모두 작성해야 xml에서 바꾼 것처럼 작동합니다.

 

 

여기까지 골드였습니다.

감사합니다.

 

 

참고자료 : https://stackoverflow.com/questions/7238450/set-edittext-cursor-color

Set EditText cursor color

https://stackoverflow.com/questions/40426928/how-to-programmatically-set-backgroundtint-of-floatingactionbutton-with-colorsta

How to programmatically set backgroundTint of FloatingActionButton with ColorStateList?