How to make custom shape buttons that overlap each other in Android

Question

I have 6 separate images with a transparent background. How can I put all those images together as buttons, like:

From what I read I guess I have to use Frame Layout in order to have overlapping buttons.

I need each color is a separate button when clicked.

Update: I made a demo and check for transparent in onclick method however when I click the red area near the intersection between red and blue, it not register that the red button is click due to overlapping view. Please help!

https://www.dropbox.com/s/fc98nnnfbrtdh82/Photo%20Apr%2016%2C%202%2002%2013.jpg?dl=0

public boolean onTouch(View v, MotionEvent event) {

                                     int eventPadTouch = event.getAction();
                                     int iX = (int)event.getX();
                                     int iY = (int)event.getY();          
                                     switch (eventPadTouch) {

                                         case MotionEvent.ACTION_DOWN:

                                             if (iX>=0 & iY>=0 & iX<TheBitmap.getWidth() & iY<TheBitmap.getHeight()&TheBitmap.getPixel(iX,iY)!=0) {
                                                 if (TheBitmap.getPixel(iX,iY)!=0) {
                                                     Toast.makeText(getApplicationContext(),"clicked blue",Toast.LENGTH_LONG).show();

                                                 }
                                             }
                                             return true;
                                     }

                                     return false;
                                 }
                             }

Answer 1

You need to use a relative layout to place a background image using ImageView like this:

activity_layout.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/bg"/> 
</RelativeLayout>

afterwards you need to createa seperate xml file inside drawable that defines each shape as closely as possible read more about it here: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

a sample shape xml file would be like this

drawable/myshape1.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

<stroke
  android:width="2dp"
  android:color="#FFFFFF" />

<corners android:radius="5dp" />

<gradient
  android:angle="270"
  android:centerColor="#6E7FFF"
  android:endColor="#142FFC"
  android:startColor="#BAC2FF" /> 
</shape>

Finally after creating all your shapes you can add them to your activity_layout.xml file like this:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/bg"/>


        <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:layout_margin="20dp"
        android:background="@drawable/myshape1"
        android:orientation="vertical"
        android:padding="5dp" >


</RelativeLayout>

make sure that the shapes created are as transparent as possible and attach the onClick handlers to them to do the assigned tasks.

EDIT:

Based on your comment, there is another way to do this by overriding the OnTouch listener, capture the pixel from the bitmap and determine its color.

imageView.setOnTouchListener(new View.OnTouchListener() {
   @Override
   public boolean onTouch(View v, MotionEvent event) {
         if (event.getAction() == MotionEvent.ACTION_DOWN){
                ImageView imageView = (ImageView) v;
                Bitmap bitmap =((BitmapDrawable)imageView.getDrawable()).getBitmap();
                int pixel = bitmap.getPixel(event.getX(),event.getY());
                int redValue = Color.red(pixel);
                int blueValue = Color.blue(pixel);
                int greenValue = Color.green(pixel);
//Now that you know the color values you can decide on what you want to do based on the color combination.
         }
         return true;
     }
});

Answer 2

You can always use RelativeLayout as a wrapper and then add the future buttons as children, and you can position them to overlap.

For example:

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
    *
    *
    *
</RelativeLayout>

You can then position ImageViews (or Buttons) using alignments/margins/coordinates.

Hope it helps.