TextInputLayout error alignment issue with AppCompat Spinner

Question

I am using an app which displays a drop down Spinner with an EditText as a child of TextInputLayout next to it.

When an underlined error is shown under the TextInputLayout, then the EditText will go up, and alignment will miss !!

See my screenshot please:

What I am trying to do is:

Here is my xml code:

<LinearLayout
    android:layout_width="@dimen/edittext_width"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="bottom">

    <android.support.v7.widget.AppCompatSpinner
        android:id="@+id/spinner_countries"
        style="@style/Widget.AppCompat.Spinner.Underlined"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="30"
        android:layout_gravity="start"
        android:spinnerMode="dialog" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_mobile"
        style="@style/TextInputLayoutTheme"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="70">

        <com.cashu.app.ui.widgets.CustomEditText
            android:id="@+id/et_fragment_register_step_one_mobile"
            android:layout_width="@dimen/edittext_mobile_num_width"
            android:layout_height="wrap_content"
            android:ems="12"
            android:gravity="center_vertical"
            android:layout_gravity="start"
            android:hint="@string/mobile_hint"
            android:inputType="number"
            android:textSize="@dimen/font_size_normal" />
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

Here is my TextInputLayout theme:

<!-- TextInputLayout Style -->
<style name="TextInputLayoutTheme" parent="Widget.Design.TextInputLayout">
    <item name="android:gravity">center</item>
    <item name="android:textColor">@color/white</item>
    <item name="android:textColorHint">@color/colorControlActivated</item>
    <item name="errorTextAppearance">@style/AppTheme.TextErrorAppearance</item>
    <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
    <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
</style>

I tried searching for many keywords, terms and methods but unfortunately with no luck.

I would appreciate if anyone has a hack for this issue.

Bondie

Answer 1

I figured out my problem, I set margin to my AppCompatSpinner and set top gravity to it with specific hight.

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="bottom"
        android:orientation="horizontal">

        <android.support.v7.widget.AppCompatSpinner
            android:id="@+id/spinner_countries"
            style="@style/Widget.AppCompat.Spinner.Underlined"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginBottom="26dp"
            android:layout_weight="30"
            android:spinnerMode="dialog" />

        <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_mobile"
            style="@style/TextInputLayoutTheme"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="70"
            app:errorEnabled="true">

            <com.cashu.app.ui.widgets.CustomEditText
                android:id="@+id/et_mobile"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="start"
                android:ems="12"
                android:gravity="center_vertical"
                android:hint="@string/mobile_hint"
                android:inputType="number"
                android:textSize="@dimen/font_size_normal" />
        </android.support.design.widget.TextInputLayout>

</LinearLayout>

[EDIT]

When my TextInputLayout has an error, I remove it by adding the following lines:

myTextInputLayout.setErrorEnabled(false);
myTextInputLayout.setErrorEnabled(true);
myTextInputLayout.setError(" ");

Why?

• This line: myTextInputLayout.setErrorEnabled(false); will clear the error from the TextInputLayout

• This line: myTextInputLayout.setErrorEnabled(true); will enable error for the TextInputLayout again

• This line: myTextInputLayout.setError(" "); will prevent layout alignment disruption.

Problem now is solved.

Bondie

Answer 2

Add app:errorEnabled="true" in TextInputLayout.

This will leave space for error even if error is not displayed. This will consume more space but will help you to maintain alignment.

Make your TextInputLayout as below.

 <android.support.design.widget.TextInputLayout
    android:id="@+id/input_layout_mobile"
    style="@style/TextInputLayoutTheme"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="70"
    app:errorEnabled="true">

Later in java:

1. To set error text use

   textInputLayout.setError("Email can not be blank");
   

2. To remove error text and set view as normal

   textInputLayout.setError("");
   

*Note that the use of textInputLayout.setErrorEnable(false) to remove the error will take out entire text view of error from the textInputLayout which will disturb your alignment.

Sokotra

At first look, things seems ok, but when an error shows then you type something inside the EditText then navigate away from it, the TextInputLayout goes bottom as same as the error space ! – Bondie

How do you disable error? Are you using setErrorEnabled(false); ? – Sokotra

There is the problem. That will disturb layout alignment. Instead of setErrorEnable(false); you should use setError(""); to remove error text. – Sokotra

I am usingt this method myTextInputLayout.setError(""); – Bondie

Earlier you mentioned (in deleted comment) that you were using setErrorEnabled(false); to remove error text. Anyways myTextInputLayout.setError(""); isn't solving your problem? It solved the same issue for me. – Sokotra

This still not solved my problem, the underline color of the TextInputLayout still in red. Also layout miss alignment in different locales :( – Bondie

I solved my question, please check my answer again, thank you – Bondie

Answer 3

try this,

 <LinearLayout
    android:layout_width="300dp"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="bottom">

    <android.support.v7.widget.AppCompatSpinner
        android:id="@+id/spinner_countries"
        style="@style/Widget.AppCompat.Spinner.Underlined"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="30"
        android:spinnerMode="dialog" />

    <android.support.design.widget.TextInputLayout
        android:id="@+id/input_layout_mobile"
        style="@style/TextInputLayoutTheme"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="70">

        <EditText
            android:id="@+id/et_fragment_register_step_one_mobile"
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:ems="12"
            android:gravity="center_vertical"
            android:layout_gravity="start"
            android:hint="Mobile No."
            android:inputType="number"
            android:textSize="20sp" />
    </android.support.design.widget.TextInputLayout>

Simmers

When TextInputLayout has an error, the layout misses. The TextInputLayout goes up and spinner stays down, any fix for this? – Bondie