Draw custom arc views and detect user click for ea

Question

I am creating custom arc views, which is like rainbow views. I can draw arc views but I am unable to create separate click events for each view. How to set separate click events for each arc view?. Thanks in advance.

Here is the code:

ArcView.java

public class ArcView extends View implements View.OnTouchListener{

    Paint paint;

    int radius, x, y;
    int color;

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

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

    public ArcView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    public ArcView(Context context, int radius, int x, int y, int color) {
        super(context);

        this.radius = radius;
        this.x = x;
        this.y = y;
        this.color = color;
        init();
    }

    private void init(){
        paint = new Paint();
        paint.setColor(color);
        paint.setStrokeWidth(10);
        paint.setStyle(Paint.Style.STROKE);
        setOnTouchListener(this);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(x, y, radius, paint);
    }

    @Override
    public boolean onTouch(View view, MotionEvent event) {
        return false;
    } 
}

MainActivity.java

public class MainActivity extends AppCompatActivity {
    RelativeLayout arcButton;

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

        arcButton = (RelativeLayout) findViewById(R.id.arcButton);
        arcButton1 = (RelativeLayout) findViewById(R.id.arcButton1);
        arcButton2 = (RelativeLayout) findViewById(R.id.arcButton2);

        DisplayMetrics dm = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(dm);
        int width=dm.widthPixels;
        int height=dm.heightPixels;

        int arcRadius1 = (int)(width/1.5);
        int arcRadius2 = arcRadius1+(int)(width/3.5);
        int arcRadius3 = arcRadius2+(int)(width/3.5);

        int xCoor = width / 2;
        int yCoor = height;

        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(width, height);

        arcButton.setLayoutParams(params);
        View arcView1=new ArcView(this, arcRadius3, xCoor, yCoor, Color.RED);
        View arcView2=new ArcView(this, arcRadius2, xCoor, yCoor, Color.BLACK);
        View arcView3=new ArcView(this, arcRadius1, xCoor, yCoor, Color.BLUE);
        arcButton.addView(arcView1);
        arcButton1.addView(arcView2);
        arcButton2.addView(arcView3);

    }
}

Output:

How can I create seperate click event for each arc button?

Answer 1

A bit of a workaround, but it works. Put this inside ArcView:

@Override
public boolean performClick() {
    return super.performClick();
}

@Override
public boolean onTouch(View view, MotionEvent event) {
    view.performClick();
    if (isPointInCircle((int) event.getX(), (int) event.getY())) {
        // do what you want to do and get rid of the next two lines
        String color = (((ArcView) view).color == Color.RED) ? "RED" : (((ArcView) view).color == Color.BLACK) ? "BLACK" : "BLUE";
        Toast.makeText(context, color, Toast.LENGTH_SHORT).show();
        return true;
    }
    return false;
}

private boolean isPointInCircle(int clickX, int clickY) {
    return (clickX - x) * (clickX - x) + (clickY - y) * (clickY - y) <= radius * radius;
}

Note that for the Toast to work, you need to make context global, but most likely you will want to get rid of the Toast anyway.