CoordinatorLayout messing up setError popup position

Question

I'm facing an issue with EditText setError popup position.

I'm using the following code in to create the layout:

activity_profile.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"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:fitsSystemWindows="true"
    tools:context=".ProfileActivity"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout android:layout_height="wrap_content"
        android:layout_width="match_parent" android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar android:id="@+id/toolbar"
            android:layout_width="match_parent" android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/profile" />

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

profile.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".ProfileActivity"
    tools:showIn="@layout/activity_profile">

    <EditText
        android:id="@+id/etProfileName"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:capitalize="words"
        android:hint="@string/et_hint_profile_name"
        android:textAlignment="center" />
</RelativeLayout>

What I have tried

If I change the android.support.design.widget.CoordinatorLayout with LinearLayout the setError issue won't happen, but that will change the status bar color to white one and my UI is looking odd.

I'm new to Android programming and not sure what's going on, please help me.

Answer 1

What worked for me is an extra LinearLayout in activity_main.xml (yes, there):

<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activityRoot"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="com.example.biptest.MainActivity">

    <!-- *** THIS ONE *** -->
    <LinearLayout
    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:id="@+id/appbar"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

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

    <include layout="@layout/content_main" /> <!-- FRAGMENT(S) INSIDE -->

    </LinearLayout>
    <!-- *** BUT LEAVE THE FAB ALONE *** -->

    <android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@android:drawable/ic_dialog_email"
    android:visibility="gone"
    />

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

This also works around the layout bug that shows when you toggle visibility of a view in a fragment.

And the next problem is white-on-white error messages in the popup on Android 2.x (link)

Answer 2

I had the same problem. Testing a little bit the UI, I found that the problem appeared when the EditText widget gets the focus programatically to show the error, in my case calling .requestFocus(), but when focusing on the widget again manually the popup appeared correctly.

So my workaround was to delay the call to .requestFocus() in a Runnable (simulating a user clicking on the EditText widget).

Here is the code:

        if (mFocusView != null) mFocusView.clearFocus(); // clear current focus. Needed to simulate a new "manual" focus

        getActivity().runOnUiThread(new Runnable() {
            @Override
            public void run() {
                final Handler handler = new Handler();
                final boolean b = handler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        mFocusView.requestFocus(); // request focus
                    }
                }, 1); // only delay 1 milisecond
            }
        });

mFocusView is the current EditText view to show an error.

Depending on your use case you may need to handle the focus when the keyboard is dismissed, as it makes the popup appear in the wrong position again.

Don't know if this will solve your problem. Hope it helps while Google solves this problem.

Answer 3

This was an Android bug and it is now fixed.

Reference : https://code.google.com/p/android/issues/detail?id=193793

Answer 4

Actually, the problem is not the CoordinatorLayout, but AppBarLayout.ScrollingViewBehavior. As a simple workaround you can remove the line app:layout_behavior="@string/appbar_scrolling_view_behavior" and add android:layout_marginBottom="?attr/actionBarSize" to your nested view if you don't need nested scroll.