개요

예를 들어 로그인 양식에 정보를 입력하여 로그인을 시도했을 때 이메일 주소와 암호가 잘못되었을 때 오류 메시지를 표시하고 싶습니다. 해당 항목의 입력란 근처에 표시하는 방법을 정리한다.


이번에는 머티리얼 디자인 TextInputLayout을 사용했다.

EditText에 오류 표시

fragment_form.xml

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/emailField"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="メールアドレス"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
                <EditText
                    android:id="@+id/emailText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textEmailAddress"/>
            </com.google.android.material.textfield.TextInputLayout>
            <com.google.android.material.textfield.TextInputLayout
                android:id="@+id/passwordField"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="パスワード"
                style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
                <EditText
                    android:id="@+id/passwordText"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:inputType="textPassword"/>
            </com.google.android.material.textfield.TextInputLayout>
        </LinearLayout>

setError("string") (또는 textInputLayout.error = "string") 에러를 표시하고 싶은 EditText 밖의 TextInputLayout에 에러 문을 세트한다.

FormFragment.kt

class FormFragment : Fragment() {
    private lateinit var emailTextInput: TextInputLayout
    private lateinit var emailEditText: EditText
    private lateinit var passwordTextInput: TextInputLayout
    private lateinit var passwordEditText: EditText

    ... (略)

    private fun setError() {
        if (emailEditText.text.isEmpty()) {
            emailTextInput.setError("メールアドレスを入力してください")
        } else if (emailEditText.text.toString() == "a") {
            emailTextInput.error = "aです"
        }
        if (passwordEditText.text.isEmpty()) {
            passwordTextInput.setError("パスワードを入力してください")
        }
    }
}

이제 해당 EditText 아래에 오류 메시지가 표시됩니다.

덤: 공통 오류 표시

예를 들어, 로그인하려고 서버와의 통신에 실패했을 때 「통신에 실패했습니다」등으로 표시하고 싶은 경우가 있습니다.
그 경우는 TextView 등을 두고 실패했을 때에 에러 메세지를 세트 하면 된다.

fragment_form.xml

    ... (略)
        <TextView
            android:id="@+id/login_form_error_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:textColor="#FF0000" />
    </LinearLayout>

FormFragment.kt

    private fun setError() {
        if (emailEditText.text.isEmpty() && passwordEditText.text.isEmpty()) {
            errorText.text = "通信に失敗しました"
        } else {

        ... (略)

여담: 배경색이 녹색인 것은 이 과 같은 프로젝트를 사용하고 있어 Fragment의 다른 것을 알기 쉽게 하기 위해서이지만, 이번에는 다른 Fragment는 필요 없었다.
위 링크의 기사에는 빨간색 배경과 파란색 배경의 Fragment가 등장한다. 다음 몇 가지 색상으로하자.

요약

TextInputLayout을 사용하여 EditText에 오류를 표시했습니다.