Set button click effect in Android

Question

I'm new in Android app developing and I realized that, at the end of the day, what truly matters to the end user is the App's UI.

I always try to do my best when it comes to UI's, but I always end up having some troubles. In particular, one of the main problems I always have and I don't know how to fix, is that when I set a custom background color or image to some button, the click effect disappears. So you click the button and although it obviously works, it's pretty unpleasant to see how it does nothing graphically.

I'd like to know if there's some way to get the original effect back, or set some click effect myself programmatically.

Thanks in advance.

Answer 1

Lets say you have a button or a TextView or any other view. and you want it to change its color during touch event and also to do something after the click:

 button.setOnTouchListener(new View.OnTouchListener() 
              {
                @Override
                public boolean onTouch(View v, MotionEvent event) 
                {



                  if (event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() == MotionEvent.ACTION_MOVE)
                     {
                        v.setBackgroundColor(Color.parseColor("#000000"));
                     }

                if (event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL)
                      {
                          v.setBackgroundColor(Color.parseColor("#ffffff"));
                      }


                    return false;
                }
            });

and then add click listener:

button .setOnClickListener(new View.OnClickListener()
{
   @Override
   public void onClick(View v) 
                {                   
                     do some stuff...
                }
            });

Answer 2

Save this as a drawable and set as the background:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
    <shape android:shape="rectangle">
        <solid android:color="#212121"/>
        <corners android:radius="5dp"/>
        </shape>
    </item>

    <item>
        <shape android:shape="rectangle">
            <solid android:color="#424242"/>
            <corners android:radius="5dp"/>
        </shape>
    </item>
</selector>

This is just a simple example. You can create more complicated ones yourself.

Answer 3

Thanks to Amir Horev's answer I could figure out what I really needed. I based my solution on his answer but instead of calling the setBackgroundColor() method, I used the setColorFilter() one instead from the background of the view, to trigger both the ACTION_DOWN and ACTION_UP events. So now I can basically set a color filter to any button. This is how the code finally looked like:

button.setOnTouchListener(new View.OnTouchListener()
        {
            @Override
            public boolean onTouch(View v, MotionEvent event)
            {



                if (event.getAction() == MotionEvent.ACTION_DOWN)
                {
                   v.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 0xFFAA0000));

                }

                if (event.getAction() == MotionEvent.ACTION_UP)
                {

                    v.getBackground().setColorFilter(new LightingColorFilter(0xFFFFFFFF, 000000000));

                }


                return false;
            }
        });

I also wrote a function like public void triggerActionDownEvent(Button button); so I can call this funciton instead of writing all of the previous code for every button. Now I'll have to ensure that no more than one button is pressed at anytime.

Answer 4

I suggest you to set the color or the image programmatically. You can use:

Button button = (Button)findViewById(R.id.myButton);
button.setImageSource(R.drawable.image);