Android highlight an imagebutton when clicked

Question

I am using an ImageButton. But I don get the highlight when clicked. I googled and many suggested to use selector where another image is displayed. Is there any way around this. by using only one image and highlighting it or giving it a glow effect. so that the user knows that button has been clicked.

Answer 1

This is actually not very difficult to do. You don't even need to create 2 seperate .png files or anything like that. For instance, if you want to have a button which has a gradient, and then change it when the button is pressed:

Step 1: Create default button gradient (drawable/default_button.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
    <corners android:radius="3dp" />
    <gradient android:endColor="#8ba0bb" android:startColor="#43708f" android:angle="90" />
    <stroke android:width="1dp" android:color="#33364252" />
</shape>

Step 2: Create default button pressed gradient (drawable/default_button_pressed.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
    <corners android:radius="3dp" />
    <gradient android:endColor="#43708f" android:startColor="#8ba0bb" android:angle="90" />
    <stroke android:width="1dp" android:color="#33364252" />
</shape>

Step 3: Create selector (drawable/default_button_selector.xml):

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" android:drawable="@drawable/default_button_pressed" /> 
    <item android:drawable="@drawable/default_button" /> 
</selector>

Step 4 (optional): Create style for the button (values/style.xml):

<resources>
    <style name="DefaultButton">
        <item name="android:layout_width">wrap_content</item>   
        <item name="android:layout_height">wrap_content</item>
        <item name="android:background">@drawable/default_button_selector</item>
    </style>
</resources>

Step 5: use the button (layout/main.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" android:layout_height="fill_parent">

    <button style="@style/DefaultButton" />

</RelativeLayout>

As you can see, it's not particularly difficult to do.

Answer 2

Without having to create multiple images (pressed, normal etc) and even don't have to create selector. Use setOnTouchListener rather than setOnClickListener. The below code will give you the grey overlay on the clicked item.

 ((ImageButton)findViewById(R.id.myImageBtn)).setOnTouchListener(new OnTouchListener() {

      @Override
        public boolean onTouch(View v, MotionEvent event) {
          switch (event.getAction()) {
          case MotionEvent.ACTION_DOWN: {
              ImageButton view = (ImageButton ) v;
              view.getBackground().setColorFilter(0x77000000, PorterDuff.Mode.SRC_ATOP);
              v.invalidate();
              break;
          }
          case MotionEvent.ACTION_UP:

              // Your action here on button click

          case MotionEvent.ACTION_CANCEL: {
              ImageButton view = (ImageButton) v;
              view.getBackground().clearColorFilter();
              view.invalidate();
              break;
          }
          }
          return true;
        }
    });

Answer 3

You can simply use android:foreground for your View to achieve clickable effect:

android:foreground="?android:attr/selectableItemBackground"

For use with dark theme add also theme to your layout (to make clickable effect clear):

android:theme="@android:style/ThemeOverlay.Material.Dark"