devide square into four clickable triangles

Question

I want to create 4 triangle buttons in a square view I have tried creating view using layer-list but it's not working. Left and right button are overriding the click event of top and bottom button

  <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45"
        android:pivotX="-20%"
        android:pivotY="5%" >
           <shape
              android:shape="rectangle" >
              <gradient
                android:angle="45"
                  android:startColor="#B841CC"
                  android:endColor="#55149f"/>
          </shape>
      </rotate>
    </item>
</layer-list>

here is my layout design

    <RelativeLayout
        android:layout_width="@dimen/lwidth"
        android:layout_height="@dimen/lwidth">

        <Button
            android:id="@+id/btngallery"
            android:layout_width="match_parent"
            android:layout_height="@dimen/lheight"
            android:background="@drawable/pink_down"
            android:textAllCaps="false"
            android:text="Gallery"
            android:textColor="@android:color/white"
            android:paddingBottom="@dimen/lmrgnbottom"
            android:textSize="@dimen/lsize"/>
        <Button
            android:id="@+id/btnfromphone"
            android:layout_width="@dimen/lheight"
            android:layout_height="match_parent"
            android:background="@drawable/pink_right"
            android:textAllCaps="false"
            android:text="Select From Phone"
            android:textColor="@android:color/white"/>
        <Button
            android:layout_width="@dimen/lheight"
            android:layout_height="match_parent"
            android:background="@drawable/pink_left"
            android:layout_alignParentRight="true"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="@dimen/lheight"
            android:background="@drawable/pink_up"
            android:layout_alignParentBottom="true"/>

        <ImageView
            android:layout_width="70dp"
            android:layout_height="70dp"
            android:background="@drawable/home_icon"
            android:layout_centerInParent="true"/>


    </RelativeLayout>

Michael Spitsin · Accepted Answer · 2016-07-20T11:31:55.653

You can do this by introducing your custom view class MyView extends View.
Then you can place here 4 drawables, one for each triangle, or just draw them inside onDraw(Canvas canvas) method.
Then you need to override onTouchEvent method, where your can receive useful MotionEvent object. With help of it you can know coordinates of touch and action (DOWN, UP, MOVE e.t.c). More info here
In this method you will determine each triangle was clicked. You need to determine action DOWN firstly, then action UP in same coordinate with some delay. Or you can connect GestureDetector to your custom view and react on callback onSignleTapUp. More info here

Here is a sample code (It's just an example). It uses hard code width and height, so your task is adapting it to multi screens and for using in xml, but I provided main point though this sample:

public class MyView extends View {

    public enum Triangle {
        RIGHT, LEFT, TOP, BOTTOM
    }

    private final Paint rightPaint = new Paint();
    private final Paint leftPaint = new Paint();
    private final Paint topPaint = new Paint();
    private final Paint bottomPaint = new Paint();

    private final Path rightPath = new Path();
    private final Path leftPath = new Path();
    private final Path topPath = new Path();
    private final Path bottomPath = new Path();

    private OnTriangleTouchedListener triangleTouchedListener;

    public MyView(Context context) {
        super(context);
        init();
    }

    public MyView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MyView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    public void setOnTriangleTouchedListener(OnTriangleTouchedListener triangleTouchedListener) {
        this.triangleTouchedListener = triangleTouchedListener;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawPath(rightPath, rightPaint);
        canvas.drawPath(leftPath, leftPaint);
        canvas.drawPath(topPath, topPaint);
        canvas.drawPath(bottomPath, bottomPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            if (event.getX() > 100 && event.getX() <= (200 - event.getY()) ||
                event.getX() <= 100 && event.getX() >= event.getY()) {
                callTriangleTouch(Triangle.TOP);
            } else if (event.getY() > 100 && event.getY() <= (200 - event.getX()) ||
                event.getY() <= 100  && event.getY() >= event.getX()) {
                callTriangleTouch(Triangle.LEFT);
            } else if (event.getY() <= 100 && event.getY() >= (200 - event.getX()) ||
                event.getY() > 100 && event.getY() <= event.getX()) {
                callTriangleTouch(Triangle.RIGHT);
            } else if (event.getX() <= 100 && event.getX() >= (200 - event.getY()) ||
                event.getX() > 100 && event.getX() < event.getY()) {
                callTriangleTouch(Triangle.BOTTOM);
            }
        } 

        return true;
    }

    private void callTriangleTouch(Triangle triangle) {
        if (triangleTouchedListener != null) {
            triangleTouchedListener.onTriangleTouched(triangle);
        }
    }

    private void init() {
        rightPaint.setColor(0xffff0000);
        leftPaint.setColor(0xff00ff00);
        topPaint.setColor(0xff0000ff);
        bottomPaint.setColor(0xffffff00);

        rightPaint.setAntiAlias(true);
        leftPaint.setAntiAlias(true);
        topPaint.setAntiAlias(true);
        bottomPaint.setAntiAlias(true);

        rightPath.moveTo(200, 0);
        rightPath.lineTo(200, 200);
        rightPath.lineTo(100, 100);
        rightPath.lineTo(200, 0);

        leftPath.moveTo(0, 0);
        leftPath.lineTo(100, 100);
        leftPath.lineTo(0, 200);
        leftPath.lineTo(0, 0);

        topPath.moveTo(0, 0);
        topPath.lineTo(200, 0);
        topPath.lineTo(100, 100);
        topPath.lineTo(0, 0);

        bottomPath.moveTo(200, 200);
        bottomPath.lineTo(0, 200);
        bottomPath.lineTo(100, 100);
        bottomPath.lineTo(200, 200);
    }

    public interface OnTriangleTouchedListener {
        void onTriangleTouched(Triangle triangle);
    }
}

i am new to android so i have no much idea so can u give and example — Sagar, Jul 18 '16 at 09:14
Then you need to write articles about, how to create custom view, how to draw and how to response on touch events. Just simply google each item. — Michael Spitsin, Jul 18 '16 at 09:21
@Sagar added sample code for you. I hope you will appreciate it. It's just an example, so you need to make it more pretty, remove dublications and e.t.c. But general principle, I hope, you got — Michael Spitsin, Jul 20 '16 at 11:33

score 0 · Answer 2 · answered Jul 20 '16 at 13:05

ImageView image=(ImageView) findViewById(R.id.imageView1);
image.setOnTouchListener(this);
Bitmap bitmap = ((BitmapDrawable)image.getDrawable()).getBitmap();    

@Override
public boolean onTouch(View v, MotionEvent event) {
// TODO Auto-generated method stub
int pixel = bitmap.getPixel((int)event.getX(), (int)event.getY());
int alphaValue=Color.alpha(pixel);
return true;
}

This way you can get the alpha value of the pixel touched. Now you can easily check whether the pixel touched is transparent or not.then set a click on your button what you need

refer that link http://stackoverflow.com/questions/11283653/real-custom-shape-of-button — Kishan patel, Jul 20 '16 at 13:06

devide square into four clickable triangles

2 Answers2

Linked