Android: clicking issue of overlapping imageViews with transparent background

Question

I have two clickable imageViews that partially overlap each other, let's say a big one is at the bottom as base and the small one is on the top right corner of it. Sample view: this. The black circle is where I have problem getting big image's listener.

The problem is, the transparent area is invisible but still there, lead to onTouch action is not so "accurate". E.g. Clicking on the overlapping area, where small image is transparent and big isn't, the small image will be detected, but what I want is to get the big image detected.

Using onTouchListener to catch the colour to make transparent areas not clickable won't help neither.

How can I solve this please?

ImageView big, small;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_seventh);

    big = (ImageView) findViewById(R.id.imageViewBig);
    small = (ImageView) findViewById(R.id.imageViewSmall);

    big.setOnTouchListener(this);
    small.setOnTouchListener(this);
}

@Override
public boolean onTouch(View v, MotionEvent event) {

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

        switch (v.getId()) {
            case R.id.imageViewBig:
                Toast.makeText(this, "Big", Toast.LENGTH_SHORT).show();
                break;
            case R.id.imageViewSmall:
                Toast.makeText(this, "Small", Toast.LENGTH_SHORT).show();
                break;
            default:
                Toast.makeText(this, "none", Toast.LENGTH_SHORT).show();
        }
    }
    return true;
}

xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.gamification.gamificationpagestudy.ProgressBar.SeventhActivity">

<ImageView
    android:id="@+id/imageViewBig"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:clickable="true"
    android:src="@drawable/germany" />

<ImageView
    android:id="@+id/imageViewSmall"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignEnd="@+id/imageViewBig"
    android:layout_alignRight="@+id/imageViewBig"
    android:layout_alignTop="@+id/imageViewBig"
    android:clickable="true"
    android:src="@drawable/brazil" />

</RelativeLayout>

Answer 1

Thanks to Dreo for his suggestion :D

Continue with onTouchListner to get transparent area, get as well the touched View's mid point to check whether bottom left or right area is touched, then do your action, in my case bottom left corner is my GridView's item at position 0, and bottom right corner is item at position 1:

if (color == Color.TRANSPARENT) {

    int touchX = (int) event.getX();
    int touchY = (int) event.getY();
    int middle_width = v.getWidth()/2;
    int middle_height = v.getHeight()/2;

    if (touchX < middle_width && touchY > middle_height) // bottom left
       Toast.makeText(GamificationMainActivity.this, gvAdapter.getItem(0), Toast.LENGTH_SHORT).show();

    else if (touchX > middle_width && touchY > middle_height) // bottom right
       Toast.makeText(GamificationMainActivity.this, gvAdapter.getItem(1), Toast.LENGTH_SHORT).show();

      return true;

   } else { //... }