Solved the issue of overlapping between the clear text button and the…

… error exclamation mark at the end of the current elec meter reading text field. Performed `setError()` on `TextInputLayout` instead of `TextInputEditText`. When we perform `setError()` on `TextInputEditText`, the error message is show only when the text field is focuses else there will be only a red exclamation mark at the end of the text field, and it also overlaps if there is trailing icon or button like "clear_text" button. The error message is also shown as dialog linked with the exclamation. On the other hand, if we perform `setError()` on the `TextInputLayout`, the error message is shown below the text field which is the default Material behavior and the error message is shown regardless of whether the text field is focused or not. It also doesn't overlap the trailing icon or button.
thechinkysight · Feb 26, 2024 · 7fcf82c · 7fcf82c
1 parent 8e6b7d7
commit 7fcf82c
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 46 deletions.
diff --git a/.idea/appInsightsSettings.xml b/.idea/appInsightsSettings.xml
diff --git a/app/src/main/java/thechinkysight/app/payyourstay/screens/CalculatorFragment.kt b/app/src/main/java/thechinkysight/app/payyourstay/screens/CalculatorFragment.kt
@@ -5,13 +5,12 @@ import android.text.Editable
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import android.widget.EditText
 import androidx.annotation.StringRes
 import androidx.core.widget.doAfterTextChanged
 import androidx.databinding.DataBindingUtil
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
-import com.google.android.material.textfield.TextInputEditText
+import com.google.android.material.textfield.TextInputLayout
 import thechinkysight.app.payyourstay.R
 import thechinkysight.app.payyourstay.databinding.FragmentCalculatorBinding
 import thechinkysight.app.payyourstay.viewmodels.CalculatorViewModel
@@ -39,81 +38,81 @@ class CalculatorFragment : Fragment() {
         super.onViewCreated(view, savedInstanceState)
 
         showProperErrorOnTextField(
-            binding.previousElecMeterReadingTextField.editText,
+            binding.previousElecMeterReadingTextFieldTextInputLayout,
             R.string.error_message_for_empty_previous_reading,
-            currentElecMeterReadingTextFieldTextInputEditText = binding.currentElecMeterReadingTextField.editText
+            currentElecMeterReadingTextFieldTextInputLayout = binding.currentElecMeterReadingTextFieldTextInputLayout
         )
         showProperErrorOnTextField(
-            binding.currentElecMeterReadingTextField.editText,
+            binding.currentElecMeterReadingTextFieldTextInputLayout,
             R.string.error_message_for_empty_current_reading,
-            previousElecMeterReadingTextFieldTextInputEditText = binding.previousElecMeterReadingTextField.editText
+            previousElecMeterReadingTextFieldTextInputLayout = binding.previousElecMeterReadingTextFieldTextInputLayout
         )
         showProperErrorOnTextField(
-            binding.electricityRatePerUnitTextField.editText,
+            binding.electricityRatePerUnitTextFieldTextInputLayout,
             R.string.error_message_for_empty_electricity_rate
         )
 
 
 
         showProperErrorOnTextField(
-            binding.waterFeeTextField.editText,
+            binding.waterFeeTextFieldTextInputLayout,
             R.string.error_message_for_empty_water_fee
         )
         showProperErrorOnTextField(
-            binding.garbageFeeTextField.editText,
+            binding.garbageFeeTextFieldTextInputLayout,
             R.string.error_message_for_empty_garbage_fee
         )
 
 
 
         showProperErrorOnTextField(
-            binding.rentTextField.editText,
+            binding.rentTextFieldTextInputLayout,
             R.string.error_message_for_empty_rent
         )
     }
 
     private fun showProperErrorOnTextField(
-        textInputEditText: EditText?,
+        textInputLayout: TextInputLayout,
         @StringRes errorMessageId: Int,
-        previousElecMeterReadingTextFieldTextInputEditText: EditText? = null,
-        currentElecMeterReadingTextFieldTextInputEditText: EditText? = null
+        previousElecMeterReadingTextFieldTextInputLayout: TextInputLayout? = null,
+        currentElecMeterReadingTextFieldTextInputLayout: TextInputLayout? = null
     ) {
 
         val isItPreviousElecMeterReadingTextField: Boolean =
-            currentElecMeterReadingTextFieldTextInputEditText != null
+            currentElecMeterReadingTextFieldTextInputLayout != null
 
         val isItCurrentElecMeterReadingTextField: Boolean =
-            previousElecMeterReadingTextFieldTextInputEditText != null
+            previousElecMeterReadingTextFieldTextInputLayout != null
 
 
-        textInputEditText?.apply {
+        textInputLayout.editText?.apply {
 
-            setOnFocusChangeListener { v: View, hasFocus: Boolean ->
+            setOnFocusChangeListener { _: View, hasFocus: Boolean ->
                 showErrorWhenTextFieldIsEmptyAfterFocus(
                     errorMessageId,
-                    v,
+                    textInputLayout,
                     hasFocus
                 )
 
                 if (isItPreviousElecMeterReadingTextField || isItCurrentElecMeterReadingTextField) {
 
                     if (isItPreviousElecMeterReadingTextField) {
                         showErrorWhenCurrentElecMeterReadingIsLessThanPreviousElecMeterReading(
-                            this,
-                            currentElecMeterReadingTextFieldTextInputEditText
+                            textInputLayout,
+                            currentElecMeterReadingTextFieldTextInputLayout!!
                         )
                     } else {
                         showErrorWhenCurrentElecMeterReadingIsLessThanPreviousElecMeterReading(
-                            previousElecMeterReadingTextFieldTextInputEditText,
-                            this
+                            previousElecMeterReadingTextFieldTextInputLayout!!,
+                            textInputLayout
                         )
                     }
                 }
             }
 
             doAfterTextChanged { text: Editable? ->
                 showErrorWhenTextFieldIsEmptyAfterTextChange(
-                    textInputEditText,
+                    textInputLayout,
                     errorMessageId,
                     text
                 )
@@ -122,13 +121,13 @@ class CalculatorFragment : Fragment() {
 
                     if (isItPreviousElecMeterReadingTextField) {
                         showErrorWhenCurrentElecMeterReadingIsLessThanPreviousElecMeterReading(
-                            this,
-                            currentElecMeterReadingTextFieldTextInputEditText
+                            textInputLayout,
+                            currentElecMeterReadingTextFieldTextInputLayout!!
                         )
                     } else {
                         showErrorWhenCurrentElecMeterReadingIsLessThanPreviousElecMeterReading(
-                            previousElecMeterReadingTextFieldTextInputEditText,
-                            this
+                            previousElecMeterReadingTextFieldTextInputLayout!!,
+                            textInputLayout
                         )
                     }
                 }
@@ -140,53 +139,53 @@ class CalculatorFragment : Fragment() {
 
     private fun showErrorWhenTextFieldIsEmptyAfterFocus(
         @StringRes errorMessageId: Int,
-        v: View,
+        textInputLayout: TextInputLayout,
         hasFocus: Boolean
     ) {
         if (!hasFocus) {
-            val isTextFieldEmpty: Boolean = (v as TextInputEditText).text?.isEmpty() == true
+            val isTextFieldEmpty: Boolean = textInputLayout.editText?.text?.isEmpty() == true
             if (isTextFieldEmpty) {
-                v.error = getString(errorMessageId)
+                textInputLayout.error = getString(errorMessageId)
             } else {
-                v.error = null
+                textInputLayout.error = null
             }
         }
     }
 
 
     private fun showErrorWhenTextFieldIsEmptyAfterTextChange(
-        textInputEditText: EditText?,
+        textInputLayout: TextInputLayout,
         @StringRes errorMessageId: Int,
         text: Editable?
     ) {
         if (text.toString().isEmpty()) {
-            textInputEditText?.error =
+            textInputLayout.error =
                 getString(errorMessageId)
         } else {
-            textInputEditText?.error = null
+            textInputLayout.error = null
         }
     }
 
 
     private fun showErrorWhenCurrentElecMeterReadingIsLessThanPreviousElecMeterReading(
-        previousElecMeterReadingTextFieldTextInputEditText: EditText?,
-        currentElecMeterReadingTextFieldTextInputEditText: EditText?
+        previousElecMeterReadingTextFieldTextInputLayout: TextInputLayout,
+        currentElecMeterReadingTextFieldTextInputLayout: TextInputLayout
     ) {
         val previousElecMeterReading: String =
-            previousElecMeterReadingTextFieldTextInputEditText?.text.toString()
+            previousElecMeterReadingTextFieldTextInputLayout.editText?.text.toString()
 
         val currentElecMeterReading: String =
-            currentElecMeterReadingTextFieldTextInputEditText?.text.toString()
+            currentElecMeterReadingTextFieldTextInputLayout.editText?.text.toString()
 
         if (currentElecMeterReading.isNotEmpty()) {
 
             if (currentElecMeterReading.toInt() < (previousElecMeterReading.toIntOrNull()
                     ?: 0)
             ) {
-                currentElecMeterReadingTextFieldTextInputEditText?.error =
+                currentElecMeterReadingTextFieldTextInputLayout.error =
                     getString(R.string.error_message_for_current_reading_less_than_previous)
             } else {
-                currentElecMeterReadingTextFieldTextInputEditText?.error = null
+                currentElecMeterReadingTextFieldTextInputLayout.error = null
             }
 
         }

diff --git a/app/src/main/res/layout/fragment_calculator.xml b/app/src/main/res/layout/fragment_calculator.xml
@@ -51,7 +51,7 @@
                     android:visibility="invisible" />
 
                 <com.google.android.material.textfield.TextInputLayout
-                    android:id="@+id/previousElecMeterReadingTextField"
+                    android:id="@+id/previousElecMeterReadingTextFieldTextInputLayout"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginBottom="20dp"
@@ -69,7 +69,7 @@
 
 
                 <com.google.android.material.textfield.TextInputLayout
-                    android:id="@+id/currentElecMeterReadingTextField"
+                    android:id="@+id/currentElecMeterReadingTextFieldTextInputLayout"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginBottom="20dp"
@@ -87,7 +87,7 @@
 
 
                 <com.google.android.material.textfield.TextInputLayout
-                    android:id="@+id/electricityRatePerUnitTextField"
+                    android:id="@+id/electricityRatePerUnitTextFieldTextInputLayout"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginBottom="40dp"
@@ -104,7 +104,7 @@
                 </com.google.android.material.textfield.TextInputLayout>
 
                 <com.google.android.material.textfield.TextInputLayout
-                    android:id="@+id/waterFeeTextField"
+                    android:id="@+id/waterFeeTextFieldTextInputLayout"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginBottom="20dp"
@@ -122,7 +122,7 @@
 
 
                 <com.google.android.material.textfield.TextInputLayout
-                    android:id="@+id/garbageFeeTextField"
+                    android:id="@+id/garbageFeeTextFieldTextInputLayout"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginBottom="40dp"
@@ -139,7 +139,7 @@
                 </com.google.android.material.textfield.TextInputLayout>
 
                 <com.google.android.material.textfield.TextInputLayout
-                    android:id="@+id/rentTextField"
+                    android:id="@+id/rentTextFieldTextInputLayout"
                     android:layout_width="match_parent"
                     android:layout_height="wrap_content"
                     android:layout_marginBottom="40dp"