Apply and Clear ColorFilter on view in Android

Question

I have 2 buttons with different parents.

I am trying to apply button effect onTouch of the button.

Here is my code:

public class ButtonHighlighterOnTouchListener implements OnTouchListener {

    final Button button;

    public ButtonHighlighterOnTouchListener(final Button imageButton) {
      super();
      this.button = imageButton;
    }

    public boolean onTouch(final View view, final MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            button.getBackground().setColorFilter(Color.parseColor("#B7B2B0"), PorterDuff.Mode.MULTIPLY);
            button.invalidate();
            break;
        case MotionEvent.ACTION_CANCEL:
            button.getBackground().clearColorFilter();
            button.invalidate();
            break;
        case MotionEvent.ACTION_UP:
            button.getBackground().clearColorFilter();
            button.invalidate();
            break;
        }
        return false;
        }
}

It applies the effect to the button, but the problem is since I have 2 buttons, even when I click on one button, the effect is being applied to the other button as well.

Please help me to fix this.

Answer 1

viewin onTouchmethod is, in your case, the Buttonis being clicked. So instead of

button.getBackground().setColorFilter(Color.parseColor("#B7B2B0"), PorterDuff.Mode.MULTIPLY);

use

view.getBackground().setColorFilter(Color.parseColor("#B7B2B0"), PorterDuff.Mode.MULTIPLY);

And the same in other cases of switch.

Edit

Instead, use styles:

//background_button.xml in drawable folder
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" >
    //Here you can set style you want when Button is pressed
        <shape>
            <solid
                android:color="#22228C" />
            <stroke
                android:width="1dp"
                android:color="#9999DE" />
            <corners
                android:radius="7dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
    <item>
    //Here you can set style you want when button is not pressed
        <shape>
            <gradient
                android:startColor="#5858C8"
                android:endColor="#22228C"
                android:angle="90" />
            <stroke
                android:width="1dp"
                android:color="#9999DE" />
            <corners
                android:radius="7dp" />
            <padding
                android:left="10dp"
                android:top="10dp"
                android:right="10dp"
                android:bottom="10dp" />
        </shape>
    </item>
</selector>

//In your xml
<Button
     android:background="@drawable/background_button" ... />

Edit 2

Buttonhas a constructor where you can tell which style you want to apply.

public Button (Context context, AttributeSet attrs, int defStyle);

So you can set defStyle = android.R.style.Button and in your styles.xmladd

<style name="Button">
    <item name="android:background">@drawable/background_button</item>
</style>

With that, I think you could initialize your Buttonwith the style (where you will have your highlighted effect in background_button.xml) and add background image as you have right now.

Answer 2

Try : replacing button with view and return true instead of false;

public boolean onTouch(final View view, final MotionEvent event) {
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            view .getBackground().setColorFilter(Color.parseColor("#B7B2B0"), PorterDuff.Mode.MULTIPLY);
            view .invalidate();
            break;
        case MotionEvent.ACTION_CANCEL:
            view .getBackground().clearColorFilter();
            view .invalidate();
            break;
        case MotionEvent.ACTION_UP:
            view .getBackground().clearColorFilter();
            view .invalidate();
            break;
        }
        return true;
        }

Answer 3

I have done this way:

There are two ways to apply color filter on view.

private ImageView imageView;

imageView = (ImageView) findViewById(R.id.imageView);

Apply color filter

Way 1:

imageView.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_ATOP);

OR

Way 2:

imageView.setColorFilter(Color.WHITE, PorterDuff.Mode.SRC_IN);

Clear color filter

imageView.clearColorFilter();

Both are work fine for me.

Hope this would help you.