Edittext Error Icon and Show Password Missplaced

EditText error icon and show password missplaced

Don't call setError on the EditText, use TextInputLayout's setError()

TextEdit validation overlays show password icon

So here is what I had to do to fix this. I disabled the standard text view of the textEdit by doing the following:

app:passwordToggleEnabled="false"

This will disable the view of the icon to toggle the password visibility. Then What I did was to add an imageView and added my own eye icon to the app:

<ImageView
    android:id="@+id/imageView_registerPasswordVisibility"
    android:layout_width="24dp"
    android:layout_height="24dp"
    android:clickable="true"
    android:src="@drawable/eye"
    android:layout_row="4"
    android:layout_column="1"
    android:foregroundGravity="center_vertical"
    android:layout_gravity="center_vertical" />

I converted my layout to a grid layout and put this image view in the next column to align it to the end of the textEdit, the reason behind this is cause we now show the icon AFTER the textEdit instead of inside the textEdit which where the error validation icon will appear. Doing this will fix the conflict, I handled the imageView to do the same thing as passwordToggle. So here is the entire code for all of that which will also show how to set errors properly on the TextInputLayout if that is what you are using. If not then set errors as you would normally (can be found in standard android documentation):

RegisterActivity.java

public class RegisterActivity extends AppCompatActivity {

    //Setup global variables for all of the user interface items.
    @InjectView(R.id.wrapper_registerPassword)
    TextInputLayout _registerPasswordWrapper; /*this is only needed for when you use TextInputLayout that gives us the ability to have animated hints by default. If you are ONLY using editText then you will not need the code for this wrapper.*/
    @InjectView(R.id.editText_registerPasswordInput)
    EditText _registerPasswordInput; /*This is to access text that was typed in the editText*/
    @InjectView(R.id.imageView_registerPasswordVisibility)
    ImageView _registerPasswordVisibility; /*This is used for our image that we will be adding listeners for to do speacial features when the image is pressed. */

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_register);
        ButterKnife.inject(this);

        /*Set a listener for the password view image to display the text inside the password text
        field for when the image is pressed.*/
        _registerPasswordVisibility.setOnTouchListener(mPasswordVisibleTouchListener);
    }

    /*Listener for the toggle password icon.*/
    private View.OnTouchListener mPasswordVisibleTouchListener = new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            final boolean isOutsideView = event.getX() < 0 ||
                    event.getX() > v.getWidth() ||
                    event.getY() < 0 ||
                    event.getY() > v.getHeight();

            // change input type will reset cursor position, so we want to save it
            final int cursor = _registerPasswordInput.getSelectionStart();

            if (isOutsideView || MotionEvent.ACTION_UP == event.getAction())
            /*This will make the field display dots as a password text field should look like.*/
                _registerPasswordInput.setInputType( InputType.TYPE_CLASS_TEXT |
                        InputType.TYPE_TEXT_VARIATION_PASSWORD);
            else
            /*This will make the text in the password text field visibile while we are pressing down on our image.*/
                _registerPasswordInput.setInputType( InputType.TYPE_CLASS_TEXT |
                        InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

            _registerPasswordInput.setSelection(cursor);
            return true;
        }
    };

    public boolean validate() {
        boolean valid = true;

        //Obtain user's entered in credentials to validate them.
        String password = _registerPasswordInput.getText().toString();

        //Password validation.
        if (password.isEmpty() || password.length() < 8 || password.length() > 30) {
            _registerPasswordWrapper.setError("Please provide a stronger password.\n" +
                    "•Password must be the following:\n" +
                    "•At least 8 characters");
            _registerPasswordWrapper.setErrorEnabled(true);
            valid = false;
        }else {
            _registerPasswordWrapper.setError(null);
        }

        return valid;
    }
}

activity_register.xml

    <?xml version="1.0" encoding="utf-8"?>
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:android.support.design="http://schemas.android.com/tools"
        android:fitsSystemWindows="true"
        android:background="@color/black">

        <!-- Start of Grid Layout -->
        <GridLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingTop="56dp"
            android:paddingLeft="24dp"
            android:paddingRight="24dp"
            android:orientation="vertical">

            <!-- Password Text Field -->
            <android.support.design.widget.TextInputLayout
            android:id="@+id/wrapper_registerPassword"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:layout_marginBottom="8dp"
            android:textColor="#ffffff"
            app:passwordToggleEnabled="false"
            android:textColorHint="#ffffff"
            android:layout_column="0"
            android:layout_row="4"
            android:layout_gravity="fill_horizontal">
            <android.support.design.widget.TextInputEditText
                android:id="@+id/editText_registerPasswordInput"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:maxLength="30"
                android:inputType="textPassword"
                android:hint="Password" />
        </android.support.design.widget.TextInputLayout>

        <!-- Password Toggle Icon for Password field -->
        <ImageView
            android:id="@+id/imageView_registerPasswordVisibility"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:clickable="true"
            android:src="@drawable/eye"
            android:layout_row="4"
            android:layout_column="1"
            android:foregroundGravity="center_vertical"
            android:layout_gravity="center_vertical" />

    </GridLayout>
</ScrollView>

I hope this helps out some people, if anyone has anymore questions please let me know and ill help out to the best of my abilities!

EditText.setError doesnt show Error text and only shows icon

Use TextInputLayout for material EditText like :

<android.support.design.widget.TextInputLayout
            android:id="@+id/input_application_name"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="30dp"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:minHeight="50dp"
            android:theme="@style/MyTextInputLayout"
            app:hintTextAppearance="@style/TextAppearance.App.TextInputLayout">

            <EditText
                android:id="@+id/application_name"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint_application_name"
                android:imeOptions="actionNext"
                android:inputType="text" />

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

and in your Activity

TextInputLayout til = (TextInputLayout) findViewById(R.id.input_application_name);
EditText applicationNameEdt = (EditText) findViewById(R.id.application_name);
til.setErrorEnabled(true);
til.setError("You need to enter a name");