Search code examples
androidbuttoncustom-controlscolorfiltercolormatrixfilter

ColorMatrixColorFilter is not applied on custom button background

This question is in a sense a follow up to this post and based on the solution showed on this post. But anyway I'll try to ask it in a complete way.

I have custom button with a background selector composed of a normal state Drawable and a press state Drawable. The Drawables colors are changed in the method onSizeChanged() using a PorterDuffColorFilter 

getBackground().mutate().setColorFilter(backGroundColor, Mode.MULTIPLY);

This part works OK. But I wanted to improve the color selection by changing the Hue as pointed by @kcoppock in his post.

  • I create a ColorMatrixColorFIlter using the recommended code, I see the matrix in Eclipse using the debugger and it seems fine.
  • When I try to use the ColorMatrixColorFIlter instead of the PorterDuffColorFilter the button drawables stay uncolored as if the filter is not applied or has no effect.

And a second question, related: How do I go about changing each Drawable in the selector to a different color?

EDIT
Some more info, following the code with the debugger I see this matrix, for a Hue shift of 240 degrees (or -120 degrees) (floats clipped to 3 decimal places)

[ 0.004, 1.692, -0.696, 0.000, 0.000 ]
[ 0.196, 0.451,  0.353, 0.000, 0.000 ]
[ 1.001, 0.453, -0.454, 0.000, 0.000 ]
[ 0.000, 0.000,  0.000, 1.000, 0.000 ]

To my understanding this matrix is not near the identity matrix, you can even see that each row sum is exactly 1, so colors should shift. I should have seen some color change in my buttons.
Moreover, just to see that this matrix is being taken I hardcoded it to delete the R component

[ 0 0 0 0 0 ]
[ 0 1 0 0 0 ]
[ 0 0 1 0 0 ]
[ 0 0 0 1 0 ]

and then I see the buttons in CYAN color, so it means the filter is working, but I cannot get the hue shifts.

Solution

  • After debugging the code and ensuring the matrices are generated OK, and the filter is applied I started to suspect that the problem does not rely in the code, but in the base image I use for the buttons.
    The base image is a Photoshop generated 24bit PNG with transparencies and all colors are shades of gray.
    I opened it with Microsoft Office Picture Manager and went to Edit Pictures... and to the color tool.
    To my surprise changing the Hue there also did not change the color. I had to move the Amount slider to get some color, only then the hue had any effect.

    So for all practical purposes this question is solved.

    Note: I should have known better, since I researched also how to convert a color from RGB to HSL o get the desired Hue. And the conversion algorithm clearly differentiates Achromatic colors from Chromatic colors. Achromatic colors are those where R=G=B and for them the hue value is undefined and has no meaning since the saturation is 0. So probably applying a Hue shift to an Achromatic value will not change it at all.