EditText.setError()'s popup message layout looks weird

Question

I use a EditText view inside my toolbar, and when the "check" icon is clicked, the app will check all fields are empty or not. If is empty, then setError() method is called. But the popup message looks strange (in the below figure).

And I hide soft input, it looks like this.

Another problem is that a EditText view is in the root layout, and when setError() is called, the view automatically scrolled up (Appbarlayout is hidden). How to let the layout correctly be below the view?

Is this the layout design's problem?

layout.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >

        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:minHeight="?attr/actionBarSize"
            android:theme="@style/ActionbarStyle"
            app:layout_scrollFlags="scroll|enterAlways|snap">

            <EditText
                android:id="@+id/et_ItemName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/item_name"
                android:inputType="text|textAutoCorrect"
                android:maxLength="20"
                android:textStyle="bold">

                <requestFocus />
            </EditText>
        </android.support.v7.widget.Toolbar>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:paddingBottom="@dimen/layout_padding"
        android:paddingLeft="@dimen/layout_padding"
        android:paddingRight="@dimen/layout_padding"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

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

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    app:srcCompat="@drawable/ic_money_black_24dp" />

                <EditText
                    android:id="@+id/et_Dollar"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:gravity="end|right"
                    android:inputType="numberDecimal"
                    android:textStyle="bold" />
            </LinearLayout>

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

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    app:srcCompat="@drawable/ic_sort_black_24dp" />

                <Button
                    android:id="@+id/btn_SelectCategory"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="?attr/selectableItemBackground"
                    android:clickable="true"
                    android:gravity="end|right|center_vertical"
                    android:hint="@string/select_category" />
            </LinearLayout>

            <EditText
                android:id="@+id/et_Note"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@drawable/background_border"
                android:gravity="top|left"
                android:hint="@string/note"
                android:inputType="textMultiLine"
                android:minLines="1"
                android:padding="@dimen/TextPAdding" />

            <include
                android:id="@+id/view_image_container"
                layout="@layout/layout_add_photo"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="@dimen/widget_padding" />

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

Answer 1

• You Can use Snackbar as Validation which looks much better and have customization as u can show proper message for specific period of time... Example: on textChangedListener or On Button Click-->

   submitBT = (Button) findViewById(R.id.submitBT);
  
         submitBT.setOnClickListener(new View.OnClickListener() {
             @Override
             public void onClick(View v) {
                 if (loginET.getText().toString().isEmpty() || loginET.length() == 0 || loginET.length() > 50) {
             Snackbar.make(view, "Please Enter Username/Email", Snackbar.LENGTH_SHORT).show();
             return;
         }
         if (passwordET.getText().toString().isEmpty() || passwordET.length() == 0 || passwordET.length() > 50) {
             Snackbar.make(view, "Password", Snackbar.LENGTH_SHORT).show();
         }
             }
         });
  

  you can also use for textChangedListener... And the view will not automatically scrolled up like seterror