'Android Material Text Input Layout End Icon Not Visible but working

I recently found a bug with Material Design TexInputLayout and the way the make the endIcon visible.

Consider you have setup everything right and have end icon enabled like:

inputLayout.endIconMode == END_ICON_CLEAR_TEXT

The problem is that if you define a focusListener like:

inputLayout.editText?.setOnFocusChangeListener { view, hasFocus -> ...}

and navigate to a screen which has this textInputLayout in it with some already filled text in like following pic

1

You'll notice that the endIcon is not showing, but if you tap on where it's supposed to be, it will work.

Even making sure it should be displayed by making it visible inputLayout.isEndIconVisible = doesn't help. Through the debugging you can see you are hitting the public void setEndIconVisible(boolean visible) with true value but still it doesn't make the icon visible.

I found a solution which I have posted as the answer.

androidxmluser-interfacematerial-designtextinputlayoutcordovaionic-frameworkcapacitor-plugin


Solution 1:[1]

The issue is that ClearTextEndIconDelegate has a default OnFocusChangeListener which when you click on the editText it runs an animation which through it the alpha value of the private/internal endIconView(which holds the endIconDrawable) changes from 0 to 1. When you override and set your own OnFocusChangeListener you actually discard this process and setting the inputLayout.isEndIconVisible = true enables the view but you can't see it still. I didn't find any way to access to the parent view and change the alpha. Actually you can by doing something like

(((inputLayout.getChildAt(0) as FrameLayout).getChildAt(2) as LinearLayout).getChildAt(1) as FrameLayout).getChildAt(0).alpha = 1f

Take a look at image below you'll get how I ended up the above:

enter image description here

But this is not a great solution also if the hierarchy of the view changes it won't work anymore.

Ultimate Solution

What I came with is the invoking the original OnFocusChangeListener within my OnFocusChangeListener something like :

val originalListener = inputLayout.editText?.onFocusChangeListener
        inputLayout.editText?.setOnFocusChangeListener { view, hasFocus ->
            originalListener?.onFocusChange(view, hasFocus)

            // do your thing here
        }

Solution 2:[2]

For this case, it will be better to set custom mode for end icon

    textInputLayout.endIconMode = TextInputLayout.END_ICON_CUSTOM // may be set in xml 
    textInputLayout.setEndIconDrawable(R.drawable.your_icon)
    textInputLayout.setEndIconOnClickListener {
        textInputEditText.text?.clear()
    }

And then add your custom OnFocusChangeListener:

    inputLayout.editText?.setOnFocusChangeListener { view, hasFocus ->
        textInputLayout.isEndIconVisible = hasFocus

     // add your code here
    }

Solution 3:[3]

For me, none of the solution worked and the end icon was invisible because the alpha is set to 0. So I decided to manually set drawable end in the TextInputEditText.

// First, set the endIconMode to None and set the click listener to clear the text
testInputLayout.endIconMode = TextInputLayout.END_ICON_NONE
testInputLayout.setEndIconOnClickListener {
    binding.customTextInput.editText?.text?.clear()
}

// Inside the custom focusChangeListener, show/hide the drawable end
textInputLayout.editText?.setOnFocusChangeListener { _, hasFocus ->
    // This is required so that the clear text click action can be handled
    binding.customTextInput.isEndIconVisible = hasFocus

    if (hasFocus) {
        // Display Drawable end
        textInputLayout.editText?.setCompoundDrawablesWithIntrinsicBounds(null, null, ContextCompat.getDrawable(context, R.drawable.ic_clear), null)
    } else {
        // Hide Drawable end
        textInputLayout.editText?.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null)
    }
    // Do what you want
}

Solution 4:[4]

I used another plugin "photoLibrary" to solved this:

var fileTransfer = new FileTransfer();
var uri = encodeURI("http://some.server.com/download.php");
fileTransfer.download(uri, 'cdvfile://localhost/temporary/path/to/image.jpg', 
function (entry) {
var targetPath= entry.toURL();
**cordova.plugins.photoLibrary.saveImage(targetPath, "myApp", function** 
(libraryItem) {
  ...
 });
}, function(error) {
 ...
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Olena Y
Solution 3
Solution 4 Ruli

Related Questions