[Android/EditText] EditText 커서, 밑줄 색상 변경 - XML 이용하기

목표

1. xml 파일에서 EditText의 속성추가를 통해 커서, 밑줄의 색상을 변경할 수 있다.

EditText?

EditText는, 사용자에게 어떤 값들(텍스트, 숫자 등)을 입력받을 때 사용하는 속성입니다.

숫자만 입력받게 하거나, 입력할 수 있는 글자수를 제한하거나... 여러가지 제한을 할 수 있는 속성이 있지만

이번 포스팅에서는 EditText가 활성화 되었을 때 표시되는 커서와 밑줄 색상 변경해 대해서 다루겠습니다.

 

(左) 아무것도 입력하지 않은 상태 ／ (右) 텍스트 입력후 영역지정 했을 때

기본적으로, EditText는 활성화 상태가 되면 밑줄, 커서, 그리고 영역지정 부분이 민트색상으로 표시됩니다.

그리고 영역지정된 부분의 양 끝에 위치해 있는 기울어진 물방울 같은 모양도 바꿀 수 있습니다.

 

 

1. xml 코드에서 변경하기

(左) 밑줄 색상 변경 ／ (右) 영역지정 색상 변경

 

(左) 지정영역 양 끝 이미지(모양) 변경 ／ (右) 활성화된 커서 아래쪽 이미지 추가

 

(左) 커서 색상을 컬러로 지정했을 때 / (右) 커서 색상을 이미지로 지정했을 때

커서의 경우.. 'textCursorDrawable' 이름에서 볼 수 있듯이 이미지로 지정하는게 원칙인 것 같습니다.. ㅎㅎ

혹시나 하고 색상으로 지정해본 결과 색이 변하긴 하지만, 정말 얇은 커서로 바뀌기 때문에 차이를 잘 느끼지 못합니다.

 

얇은 직사각형 이미지를 하나 준비해서 오른쪽 사진과 같이 이미지를 적용하면 차이를 느끼실 수 있습니다!

저는 차이를 한 눈에 확인하기 위해 삼각형 모양을 커서로 지정했습니다.

 

<EditText
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:textSize="20dp" 
    
	android:backgroundTint="@color/yellow" <!-- 밑줄 색상 변경 : 비활성화, 활성화 상태 모두 -->
	android:textColorHighlight="@color/yellow" <!-- 영역지정 배경색 변경 -->

	android:textSelectHandle="@drawable/ic_select_handle_24" <!-- 현재 활성화된 커서 아래 이미지 추가 -->
	
 	<!-- 커서 색상 변경 : color(차이가 미묘하게 나타남), image 파일 권장 -->
	android:textCursorDrawable="@color/rad"
        
	<!-- 영역지정 좌,우 커서 아래 이미지 추가 -->
	android:textSelectHandleLeft="@drawable/ic_point_right_24"
	android:textSelectHandleRight="@drawable/ic_point_left_24"
/>

---

1-1. @color/red , @color/yellow 가 뭔가요?

res > values > colors.xml 에서 색상을 선언하고 사용하시면 됩니다.

 

1-2. 커서 이미지 @drawable/ic_select_handle_24, @drawable/ic_point_right_24... 는 어디에 있나요?

사용하고자 하는 이미지를 drawable 폴더에 집어 넣고 사용하시면 됩니다.

위 예제에서는 drawable 폴더에서 우클릭 > New > Vector Asset 에서 원하는 이미지를 선택하여 사용했습니다.

color 코드 추가 + drawable 폴더 안 이미지 추가