Has the new Password Visibility Toggle broken existing drawableRight for EditTexts?

Issue

EDIT I just tried an EditText without a TextInputLayout and it works as expected. So the problem must be with new changes in the TextInputLayout.

I have been using a custom EditText class as child of a TextInputLayout for around a month. When the user typed, an x would appear in the drawableRight field. I have successfully displayed images for drawableLeft, drawableTop, and drawableBottom, but setting drawableRight provides me with a blank. Note: Clicking the blank space where the X SHOULD be works as expected, the text is cleared.

This first picture is how it originally looked:

Ever since upgrading to support-v4:24.2.0 the functionality has been broken. It now places the "x" where a drawable set with drawableBottom should appear. This second picture shows the new behavior:

XML Code

        <android.support.design.widget.TextInputLayout
            android:id="@+id/til_delivery_info_state"
            android:hint="@string/state_hint"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/large_margin"
            android:layout_marginRight="@dimen/large_margin">
            <com.example.ui.edittexts.ClearableEditText
                android:id="@+id/et_state"
                android:inputType="textCapWords|text|textNoSuggestions"
                android:nextFocusDown="@+id/et_di_zip_code"
                android:text="@={deliveryViewModel.state}"
                android:gravity="center_vertical|left"
                android:singleLine="true"
                android:textSize="@dimen/text_size"/>
</android.support.design.widget.TextInputLayout>

Java

    final Drawable drawable = ContextCompat.getDrawable(context, R.drawable.ic_clear_text_gray_x);
    final Drawable wrappedDrawable = DrawableCompat.wrap(drawable);
    mClearTextIcon.setBounds(0, 0, mClearTextIcon.getIntrinsicWidth(), mClearTextIcon.getIntrinsicHeight());
    mClearTextIcon.setVisible(true, false);
    final Drawable[] compoundDrawables = getCompoundDrawables();
    setCompoundDrawablesWithIntrinsicBounds(
            compoundDrawables[0],
            compoundDrawables[1],
            visible ? mClearTextIcon : null,
            compoundDrawables[3]);

Solution

UPDATE 14 SEP 2016

A new version of support library 24.2.1 is out and this issue is marked as fixed. According to changelog

Fixed issues:

TextInputLayout overrides right compound drawable. (AOSP issue 220728)

Original answer

Warning 1 This answer will break this new password visibility toggle feature.

Warning 2 This answer may cause an unexpected behaviour after updating support lib (assuming that they will fix this issue).

Looks like TextInputLayout screws things up here, specifically these lines from updatePasswordToggleView method.

final Drawable[] compounds = TextViewCompat.getCompoundDrawablesRelative(mEditText);
TextViewCompat.setCompoundDrawablesRelative(mEditText, compounds[0], compounds[1], mPasswordToggleDummyDrawable, compounds[2]);

As you can see it sets mPasswordToggleDummyDrawable as a right drawable and then sets compounds[2] (which is your custom drawable that you want to be one the right) as a bottom drawable.

updatePasswordToggleView method is called in onMeasure method. Possible workaround is to create a custom TextInputEditText and override it's onMeasure method. Let's call it PassFixTextInputEditText

public class PassFixTextInputEditText extends TextInputEditText {

    public PassFixTextInputEditText(final Context context) {
        super(context);
    }

    public PassFixTextInputEditText(final Context context, final AttributeSet attrs) {
        super(context, attrs);
    }

    public PassFixTextInputEditText(final Context context, final AttributeSet attrs, final int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        Drawable[] drawables = getCompoundDrawables();
        setCompoundDrawables(drawables[0], drawables[1], drawables[3], null);
    }
}

and use it like this

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:errorEnabled="true">

    <com.kamilzych.temp.PassFixTextInputEditText
        android:id="@+id/textInputEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="number"
        android:maxLength="23"/>
</android.support.design.widget.TextInputLayout>

(don't forget to change the package name)

As you can see, after TextInputLayout sets your custom drawable as bottom drawable we set it as a right one.

Answered By - kamil zych