android - TextInputLayout clear focus when edittext is empty

Question

I want to clear focus on TexInputLayout when editText is empty. How can I set that property on my app?

when Application is running, the editText looks like:

After I enter something the editText looks like:

When I delete everything in the editText then it looks like:

When editText is empty, I want it to look like first image (when application is running). How can I do that?

<

com.google.android.material.textfield.TextInputLayout
                    android:id="@+id/user_phone"
                    
   style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:hint="Phone Number"
                    android:background="@color/white"
                    android:textColorHint="@color/black"
                    app:boxStrokeColor="@color/black"
                    app:boxStrokeWidthFocused="2dp"
                    app:endIconMode="clear_text"
                    app:endIconTint="@color/black"
                    app:startIconDrawable="@drawable/ic_phone"
                    app:startIconTint="@color/black">

                    <com.google.android.material.textfield.TextInputEditText
                        android:layout_width="match_parent"
                        android:layout_height="match_parent"
                        android:fontFamily="@font/muli_semibold"
                        android:inputType="phone"
                        android:textColor="@color/black" />

Answer 1

First, put android:focusable="true" and android:focusableInTouchMode="true" onto parent view group.

Then, you can use a TextWatcher to see when input is empty. On kotlin would be something like this:

        editText.addTextChangedListener(object : TextWatcher {
            override fun afterTextChanged(s: Editable?) {
                if (s.isNullOrEmpty()) {
                    // hide keyboard
                    val inputMethodManager = activity?.getSystemService(Activity.INPUT_METHOD_SERVICE) as? InputMethodManager
                    inputMethodManager?.hideSoftInputFromWindow(editText.windowToken, 0)
                    // remove focus
                    editText.clearFocus()
                }
            }

            override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {

            }

            override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {

            }
        })