EditText setError is out of place in BottomSheetDialog

Question

I am facing a problem with the position of the error indicator of my EditText when calling editText.setError("...").

As you can see in the screenshot I am using a BottomSheetDialog with an EditText inside of it. When I display the error indicator, the text is completely out of place. It seems as if the dialog "thinks" that it is full-screen, while it is actually not.

This is my dialog layout file (phone_dialog.xml):

<android.support.constraint.ConstraintLayout 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="wrap_content"
                                             android:layout_weight="0"
                                             android:orientation="vertical">

    <TextView
        android:id="@+id/tvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:padding="@dimen/padding_layout_normal"
        android:text="@string/dialog_title_edit_phone"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        />

    <EditText
        android:id="@+id/etPhone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:gravity="center"
        android:inputType="phone"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tvTitle"/>


    <Button
        android:id="@+id/btnSavePhone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/etPhone"/>

</android.support.constraint.ConstraintLayout>

My Activity layout file (activity_contacts.xml):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvContacts"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

This is how I show the dialog from my Activity:

PhoneBottomDialog dialog = new PhoneBottomDialog(Context);
dialog.show();

This is my PhoneBottomDialog class:

public class PhoneBottomDialog extends BottomSheetDialog {

    public PhoneBottomDialog(Context context) {
        super(context);

        View view = getLayoutInflater().inflate(R.layout.phone_dialog, null);
        setContentView(view);

        // additional setup below this...
    }

    // ...
}

I am not performing any other layouting inside my custom PhoneButtomDialog. Changing the root layout of my dialog to RelativeLayout or LinearLayout as well as adding a ScrollView did not change anything. It's also not a device or specific Android version related issue as the problem occurs on all of my testing devices ranging from Android 5.0 to 7.1, it also occurs on the emulator.

Does anyone have an idea why this is happening?

Thanks for the suggestion, just tried it with `RelativeLayout`, same issue unfortunately. — Philipp Jahoda, May 13 '17 at 09:06
I have stripped down my activity layout to a minimum, only containing a `RecyclerView` and `LinearLayout`, issue is still present. — Philipp Jahoda, May 13 '17 at 09:19
@Philipp Jahoda did you try removing app:layout_constraint attributes from your edittext? — akhilesh0707, May 13 '17 at 09:21
Yes, I have, I have also removed any other layouting attributes not absolutely required. Still facing the same issue. — Philipp Jahoda, May 13 '17 at 09:26
@PhilippJahoda Is this behavior happening after twice click on save button ? Because when i am trying this at first attempt it's behavior is as expected showing error on point to `Edit Text`. — Jay Rathod, May 16 '17 at 13:06
As far as I know I only clicked the save button once, and unfortunately the error text is immediately out of place — Philipp Jahoda, May 16 '17 at 13:22
@PhilippJahoda At first attempt it is working perfect for me as you want Sir. — Jay Rathod, May 16 '17 at 13:24
@PhilippJahoda Sir refer to my answer and let me know if it is working or not. — Jay Rathod, May 19 '17 at 06:05
Yes facing same problem with BottomSheetDialog and BottomSheetDialogFragment. — Pravin Divraniya, May 19 '17 at 07:20
@PhilippJahoda Sir have you referred my answer ? is it working on your side or not Sir ? — Jay Rathod, May 19 '17 at 12:18

Jay Rathod · Accepted Answer · 2017-05-19T06:17:50.043

You can use TextInputLayout and inside that you can define Edit Text.

I have done some modification inside your phone_dialog.xml.

phone_dialog.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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/bottom_sheet"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_gravity="bottom"
    android:background="@android:color/holo_blue_light"
    android:padding="10dp"
    app:behavior_hideable="true"
    app:behavior_peekHeight="60dp"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior">


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

        <TextView
            android:id="@+id/tvTitle"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="8dp"
            android:gravity="center"
            android:padding="10dp"
            android:text="dialog_title_edit_phone" />

        <android.support.design.widget.TextInputLayout
            android:id="@+id/inputPhone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TextInputLayoutLabel">

            <EditText
                android:id="@+id/etPhone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Enter phone"
                android:imeOptions="actionDone"
                android:inputType="phone"
                android:maxLines="1"
                android:textSize="20sp" />

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


        <Button
            android:id="@+id/btnSavePhone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/etPhone"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="8dp"
            android:text="Save" />

    </LinearLayout>

</FrameLayout>

Inside style.xml add this.

<style name="TextInputLayoutLabel" parent="Widget.Design.TextInputLayout">
        <!-- Hint color and label color in FALSE state -->
        <item name="android:textColorHint">@android:color/black</item>
        <item name="android:textSize">15sp</item>
        <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
        <item name="colorAccent">@color/colorPrimary</item>
        <item name="colorControlNormal">@color/colorAccent</item>
        <item name="colorControlActivated">@color/colorAccent</item>
    </style>

PhoneBottomDialog.java

public class PhoneBottomDialog extends BottomSheetDialog {

    TextInputLayout inputPhone;
    EditText edtPhone;
    Button btnSave;

    public PhoneBottomDialog(Context context) {
        super(context);

        View view = getLayoutInflater().inflate(R.layout.phone_dialog, null);
        setContentView(view);

        // additional setup below this...

        inputPhone = (TextInputLayout) view.findViewById(R.id.inputPhone);

        edtPhone = (EditText) view.findViewById(R.id.etPhone);
        btnSave = (Button) view.findViewById(R.id.btnSavePhone);

        btnSave.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!validatePhone())
                    return;
            }
        });

    }

    private boolean validatePhone() {
        if (edtPhone.getText().toString().isEmpty()) {
            inputPhone.setError("Please enter valid phone number with country code.");
            requestFocus(edtPhone);
            return false;
        } else {
            inputPhone.setErrorEnabled(false);
        }
        return true;
    }

    private void requestFocus(View view) {
        if (view.requestFocus()) {
            getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_VISIBLE);
        }
    }

    // ...
}

And inside Activity.

@SuppressLint("SetTextI18n")
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test24);
        mContext = this;

        this.getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_ADJUST_RESIZE);

        PhoneBottomDialog dialog = new PhoneBottomDialog(mContext);
        dialog.show();
}

Below you can see the output for this.

I went with the TIL and got it to work. Still wondering why EditText.setError(...) has such problems with BottomSheetDialog. — Philipp Jahoda, May 22 '17 at 12:36

score 1 · Answer 2 · edited Jun 30 '17 at 11:10

From Lollipop(5.0) version android provide TextInputLayout to do this. Use below xml and java code to show same type view.

abc.xml:

<android.support.design.widget.TextInputLayout
                android:id="@+id/text_input_layout_user"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_vertical"
                app:theme="@style/AppTheme">

                <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/et_username"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="Username"
                    android:imeOptions="actionNext"
                    android:inputType="text"
                    android:singleLine="true"
                    android:textColor="@color/icons"
                    android:textSize="16sp" />
            </android.support.design.widget.TextInputLayout>

Abc.java:

private TextInputLayout
textInputLayout_User = (TextInputLayout) findViewById(R.id.text_input_layout_user);
textInputLayout_User.setError(getString(R.string.valid_username));

Just give a better format to your answer, don't post only code — Brandon Zamudio, May 18 '17 at 15:06

score 1 · Answer 3 · edited May 29 '17 at 08:27

add compile 'com.android.support:design:24.2.0' in gradle dependencies

use TextInputLayout in xml.

<android.support.design.widget.TextInputLayout
    android:id="@+id/textInputServer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="36dp"
    app:errorTextAppearance="@style/TextErrorAppearance">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        ........./>
</android.support.design.widget.TextInputLayout>

EditText setError is out of place in BottomSheetDialog

3 Answers3