[TECKHIT] Material3 Text fields

출처 : Tekhit Android App School / Soft campus 윤재성 강사님

공식 문서

Text fields – Material Design 3

📌 Text fields

기존 안드로이드 컴포넌트 중 EditText와 유사한 동작을 하지만 에러 메시지를 출력하거나 Box형식으로 입력을 받을 수 있는 등 기존의 EditText보다 발전된 컴포넌트 입니다.

 

📕 주요 속성

- hint : 입력 안내 문구를 표시합니다.
- startIconDrawable : 좌측에 표시되는 아이콘을 설정합니다.
- endIconMode : 우측에 표시되는 아이콘을 설정 합니다.

• password_toggle : 사용자가 입력한 텍스트를 가리고 비밀번호를 표시하거나 숨기는 토글 아이콘 제공
• clear_text : 텍스트 필드에 입력된 값을 초기화
• custom : 사용자가 원하는 아이콘으로 설정

• - startIconDrawable : 좌측에 표시되는 아이콘을 설정합니다.

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/textInputLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:endIconMode="clear_text"
    app:startIconDrawable="@drawable/refresh">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/textField"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
        
</com.google.android.material.textfield.TextInputLayout>

<com.google.android.material.textfield.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:endIconMode="password_toggle">

    <com.google.android.material.textfield.TextInputEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="hint"
        android:inputType="textPassword" />
</com.google.android.material.textfield.TextInputLayout>

📕 주요 리스너

addTextChangedListener: 키보드 입력을 실시간으로 감지합니다.

 

아래 예시는 제가 프로젝트에서 사용중인 Text fields 부분을 가져와봤습니다.

• setStartIconDrawable : 좌측에 표시될 아이콘을 지정합니다.
• setStartIconTintList : 좌측에 표시될 아이콘의 색상을 지정합니다.
• boxStrokeColor : TextInputLayout의 테두리 색상을 지정합니다.
• helperText : 사용자에게 보여줄 경고 메시지를 지정합니다
• setHelperTextColor : 경고 메시지의 색상을 지정합니다.

class CPRFragment : Fragment() {
    // 생략 ...
    
    cprEdit.addTextChangedListener{
        val input = it.toString()
        if (input.length < crnMax10 || input.length > crnMax10){
            setWarningBox(cprIs10)
        } else{
            cprLayout.helperText = ""
            cprLayout.setStartIconDrawable(R.drawable.baseline_check_24)
            cprLayout.setStartIconTintList(ContextCompat.getColorStateList(requireContext(),
                R.color.helper_text_color_green))
            cprLayout.boxStrokeColor = setHelperTextGreen()
            viewModel.getCRNState(binding.cprEdit.text.toString())
            searchBtn.isClickable = true
        }
    }
}

private fun setWarningBox(helperText: String){
        with(binding) {
            cprLayout.setStartIconDrawable(R.drawable.baseline_priority_high_24)
            cprLayout.setStartIconTintList(setHelperTextRedList())
            cprLayout.setHelperTextColor(
                ColorStateList.valueOf(setHelperTextRed()))
            cprLayout.boxStrokeColor = setHelperTextRed()
            cprLayout.helperText = helperText
        }

    }