[Android] Material Design text field 색상 속성 정리

Filled text field

1. Container
2. Leading icon
3. Label
4. Input text
5. Trailing icon
6. Activation indicator
7. Helper/error/counter text
8. Prefix/suffix/placeholder (not shown)

※ 아래 표의 모든 속성은 TextInputLayout에 설정되어야 합니다. 단, 입력 텍스트 속성 예외입니다. (TextInputEditText에 설정)

 

Filled text field 색상 속성 정리

Attribute(속성)		Related method(s)	Default value(기본값)	Description(설명)
Color	app:boxBackgroundColor	setBoxBackgroundColor setBoxBackgroundColorResource getBoxBackgroundColor	?attr/colorOnSurface at 12% opacity	①컨테이너 배경 색상
Color	app:startIconTint	setStartIconTintList	colorOnSurface at 54% opacity	②시작 아이콘 색상
Color	android:textColorHint	setDefaultHintTextColor getDefaultHintTextColor	?attr/colorOnSurface at 60% opacity	textfield를 클릭하지 않았을 때 ③레이블 색상 : android:hint=""로 지정
Collapsed (floating) color	app:hintTextColor	setHintTextColor getHintTextColor	?attr/colorPrimary	textfield를 클릭했을 때 ③레이블 색상 : android:hint=""로 지정
Input text color	android:textColor	setTextColor getTextColors getCurrentTextColor	?android:textColorPrimary	④입력 텍스트 색상
Color	app:endIconTint	setEndIconTintList	colorOnSurface at 54% opacity and colorPrimary (activated)	⑤끝 아이콘 색상
Error icon color	app:errorIconTint	setErrorIconTintList	?attr/colorError	error 났을 때 ⑤끝 아이콘이 error로 변경된 색상
Color	app:boxStrokeColor	setBoxStrokeColor setBoxStrokeColorStateList getBoxStrokeColor	?attr/colorOnSurface at 42% opacity and ?attr/colorPrimary (focused)	⑥테두리 색상
Error color	app:boxStrokeErrorColor	setBoxStrokeErrorColor getBoxStrokeErrorColor	?attr/colorError	error 났을 때 ⑥테두리 색상
Helper text color	app:helperTextColor	setHelperTextColor getHelperTextColor	?attr/colorOnSurface at 60% opacity	⑦도움말 색상
Error text color	app:errorTextColor	setErrorTextColor getErrorCurrentTextColors	?attr/colorError	error 났을 때 ⑦error 텍스트 색상
Counter text color	app:counterTextColor app:counterOverflowTextColor	setCounterTextColor setCounterOverflowTextColor getCounterTextColor getCounterOverflowTextColor	?attr/colorOnSurface at 60% (app:counterTextColor) ?attr/colorError (app:counterOverflowTextColor	⑦글자수 카운터 색상
Prefix color	app:prefixTextColor	setPrefixTextColor getPrefixTextColor	?attr/colorOnSurface at 60% opacity	⑧입력 텍스트 앞에 붙는 접두사 (표시 되지 않음.)
Suffix color	app:suffixTextColor	setSuffixTextColor getSuffixTextColor	?attr/colorOnSurface at 60% opacity	⑧입력 텍스트 뒤에 붙는 접미사 (표시 되지 않음.)

 

Outlined text field

1. Container
2. Leading icon
3. Label
4. Input text
5. Trailing icon
6. Helper/error/counter text
7. Prefix/suffix/placeholder (not shown)

 

Outlined text field 색상 속성 정리

Attribute(속성)		Related method(s)	Default value(기본값)	Description(설명)
Color	app:startIconTint	setStartIconTintList	colorOnSurface at 60% opacity	②시작 아이콘 색상
Color	android:textColorHint	setDefaultHintTextColor getDefaultHintTextColor	?attr/colorOnSurface at 60% opacity	textfield를 클릭하지 않았을 때 ③레이블 색상 : android:hint=""로 지정
Collapsed (floating) color	app:hintTextColor	setHintTextColor getHintTextColor	?attr/colorPrimary	textfield를 클릭했을 때 ③레이블 색상 : android:hint=""로 지정
Input text color	android:textColor	setTextColor getTextColors getCurrentTextColor	?android:textColorPrimary	④입력 텍스트 색상
Color	app:endIconTint	setEndIconTintList	colorOnSurface at 60% opacity and colorPrimary (activated)	⑤끝 아이콘 색상
Error icon color	app:errorIconTint	setErrorIconTintList	?attr/colorError	error 났을 때 ⑤끝 아이콘이 error로 변경된 색상
Stroke color	app:boxStrokeColor	setBoxStrokeColor setBoxStrokeColorStateList getBoxStrokeColor	?attr/colorOnSurface at 38% opacity and ?attr/colorPrimary (focused)	테두리 색상
Stroke error color	app:boxStrokeErrorColor	setBoxStrokeErrorColor getBoxStrokeErrorColor	?attr/colorError	error 났을 때 테두리 색상
Helper text color	app:helperTextColor	setHelperTextColor getHelperTextColor	?attr/colorOnSurface at 60% opacity	⑥도움말 색상
Error text color	app:errorTextColor	setErrorTextColor getErrorCurrentTextColors	?attr/colorError	error 났을 때 ⑥error 텍스트 색상
Counter text color	app:counterTextColor app:counterOverflowTextColor	setCounterTextColor setCounterOverflowTextColor getCounterTextColor getCounterOverflowTextColor	?attr/colorOnSurface at 60% (app:counterTextColor) ?attr/colorError (app:counterOverflowTextColor	⑥글자수 카운터 색상
Prefix color	app:prefixTextColor	setPrefixTextColor getPrefixTextColor	?attr/colorOnSurface at 60% opacity	⑦입력 텍스트 앞에 붙는 접두사 (표시 되지 않음.)
Suffix color	app:suffixTextColor	setSuffixTextColor getSuffixTextColor	?attr/colorOnSurface at 60% opacity	⑦입력한 텍스트 뒤에 붙는 접미사 (표시 되지 않음.)

 

그 외 Style 코드

- colorAccent : 커서색, 드래그 시 하이라이트 색, EditText 선택 시 밑줄 하이라이트 색 등 강조 색

- colorPrimary : 버튼 색상, EditText 레이블과 테두리 색 등 앱의 대표 색상

 

[res] - [style] - style.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="colorAccent">@color/mainBlue</item>
        <item name="colorPrimary">@color/mainBlue</item>
    </style>
</resources>

 

 

 

 

본 작성자는 안드로이드 개발을 공부하고 있는 학생으로 피드백 및 질문을 환영합니다. 그러나 무단복제 및 배포는 정중하게 사양하고 있으며, 참고 사이트로 링크를 남기실 때는 동의를 구해주시기 바랍니다.