Android (Xamarin) selectableItemBackground - SetBackgroundResource not working with SetImageResource

Question

I'm using a custom grid adapter that creates image buttons and displays them on an activity, using the method SetImageResource() to set the src image of the buttons.

However, when clicked, these buttons do not have the desired button click/ripple effect. After looking around, I found a couple of solutions for that, utilising a TypedValue with SetBackgroundResource(), or utilising a TypedArray with SetBackgroundDrawable(). Without the image resource, either of these methods work, but upon adding the image resource, the selectableItemBackground effect disappears.

The code is as following:

ImageButton button;

if (convertView == null)
{
    LayoutInflater inflater = (LayoutInflater)context.GetSystemService(Context.LayoutInflaterService);

    //  Grid buttons
    convertView = inflater.Inflate(Resource.Layout.sublayout_Menu_Button, null);

    button = convertView.FindViewById<ImageButton>(Resource.Id.mainMenu_ImgBtn);

    button.SetMinimumHeight(Main_Menu.GRID_HEIGHT / numRows);

    TypedValue tv = new TypedValue();
    context.Theme.ResolveAttribute(Resource.Attribute.selectableItemBackground, tv, true);
    button.SetBackgroundResource(tv.ResourceId);

    //  This code is another method that works similarly to the above                
    //int[] attrs = new int[] { Android.Resource.Attribute.SelectableItemBackground };
    //TypedArray ta = context.ObtainStyledAttributes(attrs);
    //Drawable drawableFromTheme = ta.GetDrawable(0);
    //ta.Recycle();
    //button.SetBackgroundDrawable(drawableFromTheme);

    button.SetImageResource(buttonImages[position]);

    switch (position)
    {
        case 0:
            button.Click += delegate
            {
                Intent intent = new Intent(context, typeof(Select_Hospital));
                context.StartActivity(intent);
            };
            break;

        case 1:
            button.Click += delegate
            {
                Intent intent = new Intent(context, typeof(My_Appointments));
                context.StartActivity(intent);
            };
            break;

        case 2:
            button.Click += delegate
            {
                Intent intent = new Intent(context, typeof(Treatment_Information));
                context.StartActivity(intent);
            };
            break;

        case 3:
            button.Click += delegate
            {
                Intent intent = new Intent(context, typeof(Search));
                context.StartActivity(intent);
            };
            break;
    }
}

How can I resolve this problem? Any help would be very much appreciated!

--EDIT--

MyImageButton code:

class MyImageButton : ImageButton, IOnTouchListener
{
    private Context context;

    public MyImageButton(Context context, IAttributeSet attrs) : base(context, attrs)
    {
        this.context = context;
        this.SetOnTouchListener(this);
    }

    public bool OnTouch(View v, MotionEvent e)
    {
        if (e.Action == MotionEventActions.Down)
        {
            ImageView iv = (ImageView)v;
            iv.SetColorFilter(new Android.Graphics.Color(context.GetColor(Resource.Color._5_grey)));
        }
        else if (e.Action == MotionEventActions.Up)
        {
            ImageView iv = (ImageView)v;
            iv.ClearColorFilter();
        }
        return true;
    }
};

AXML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <Dental_IT.Droid.Adapters.MyImageButton
        android:id="@+id/mainMenu_ImgBtn"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:background="@null" />
</LinearLayout>

Answer 1

when clicked, these buttons do not have the desired button click/ripple effect.

When click the ImageButton, it did has a button click/ripple effect, but it was covered by images.

You could custom a ImageButton to handle with the touch event, when receive a click event, you could add a ColorFilter on the image to implement your click/ripple effect.

Here is my code :

public class MyImageButton : ImageButton
{
    public float[] BT_SELECTED_DARK = new float[] { 1, 0, 0, 0, -50, 0, 1,
            0, 0, -50, 0, 0, 1, 0, -50, 0, 0, 0, 1, 0 };

    public MyImageButton(Context context, IAttributeSet attrs):base(context,attrs)
    {
    }

    public override bool OnTouchEvent(MotionEvent e)
    {
        if (e.Action == MotionEventActions.Down)
        {
            this.SetColorFilter(new ColorMatrixColorFilter(BT_SELECTED_DARK));
        }
        else if (e.Action == MotionEventActions.Up)
        {
            this.ClearColorFilter();
        }
        return base.OnTouchEvent(e);
    }
}

When you adding the image resource :

button.SetImageResource(Resource.Drawable.download);
button.Click += (sender, e) =>
{
    Toast.MakeText(this,"Hi, I am York!",ToastLength.Short).Show();
};

Effect :