How to make custom form buttons that overlap in Android

Question

I have 6 separate images with a transparent background. How to connect all these images in the form of buttons, for example:

From what I'm reading, I think I need to use Frame Layout to have overlapping buttons.

I need each color to be a separate button when pressed.

Update: I made a demo version and checked the transparency in the onclick method however when I click on the red area next to the intersection between red and blue, it does not register that the red button is pressed due to the view overlapping. 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 the background image using ImageView as follows:

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> 

after that you need to create a separate XML file inside drawable, which defines each shape as accurately as possible. Read more about this here: http://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

the sample xml form file will be like

extractor hood / 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 as follows:

 <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 created forms are as transparent as possible and attach onClick handlers to them to perform the assigned tasks.

EDIT:

Based on your comment, there is another way to do this by overriding the OnTouch listener, grabbing a pixel from the bitmap and determining 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 future buttons as children, and you can position them to overlap.

For instance:

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

Then you can position the ImageView (or Button s) using alignments / fields / coordinates.

Hope this helps.