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;
                                 }
                             }

Intyre

Do you have any code that you have tried out? That would help people in answering your question. – Piezochemistry

I don't have time to figure out and write up an answer but do a google search for "android non rectangular buttons". The stackoverflow questions there will point you in the right direction. Since all of your buttons are different colors, one thought that comes to mind is getting the color below an onTouch event. – Mukund

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;
     }
});

Dropout

what you suggest is that I should draw 6 shapes on the image above? Most ppl suggest locating bitmap color, but for each image I also have a press_state_image when pressed, so cant do that :(( – Intyre

@kellyrose i have updated my answer to try to answer the bitmap color problem. – Dropout

so I dont have to create shape anymore? the color is gradient, not totally red or blue, so I use Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.YOUR_IMAGE_ID) this in the main activity to get the rescore but the app keep crashing – Intyre

got the crashing fix, still I dont think I can change the image when clicked if using this method, normally we create .xml file in drawable and use selector to select image for pressed and unpressed state, if I do as you suggest, I will have to load the combination for 6 pieces (as the picture I showed) as a single and thus can change individual button – Intyre

@kellyrose the red, blue and green values are the main colors in the from which we create all colors (there is also CMYK but thats for printing only). To be able to determine which button is pressed, stick to overriding the onTouch (and yes u dont need all the above only the override) and using the combination of RGB u can tell which button is pressed For example, if i import your image into an image editor, i can tell that the blue button is from RGB (10,10,240) to RGB (25,40,100) (im just throwing random values here, but i hope you got my point. en.wikipedia.org/wiki/RGB_color_model – Dropout

tks I got your point, still I want to create 6 buttons not one button and then check color to determine action, I did this little demo, and check transparency in on touch method. It works fine when each button is stand alone, however when I put button overlapping each other like this (dropbox.com/s/fc98nnnfbrtdh82/…) If I click the red area near the blue area line (the intersection) then nothing happen (it supposed to show toast " cliked red") . Do you now how to solve this? Thanks a lot, I still new to this – Intyre

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.

Frankly

thanks, I created 2 test buttons that overlapping each orther, how ever when clicking the overlapping area (for example If I click the red area which is near the blue area, nothing happen since it's still in the retangular area of the blue shape. Do you know how can I fix it? – Intyre