Implement Click on a Chart

Question

I have a layout shown in the image. I want to Implement Click on all the rings separately i.e. 1, 2, 3, 4.
How to do this?
Please Help!!

will need further information base on the view. Is this a custom view? what is it build like? Each Ring is a component? — Daniel Bo, Dec 19 '16 at 09:59
Well, add click listener to each progress bar. And please don't call ppl 'bro', that's disturbing. — Daniel Bo, Dec 19 '16 at 10:00
Adding Click Listener on each progressBar will not solve my problem as the clickable area would be a rectangle but I want it to be specific on that ring only. — Sahil Munjal, Dec 19 '16 at 10:02
Well, the only other way i can come up with, is calculating the area that is supposed to react to the click, while overriding the "onTouch" callback of the view. This will either handle the click, or delegate the click to other views. — Daniel Bo, Dec 19 '16 at 10:08
Can you plz elaborate that by providing some demo code or something like that.. — Sahil Munjal, Dec 19 '16 at 10:21

score 0 · Answer 1 · answered Dec 19 '16 at 10:36

It should look something like this.

public class CustomProgressBar extends ProgressBar {


    private boolean shouldHandleClick(float x, float y) {
        /*
         return true if click is within the ring

         For this to work you will have to calculate where exactly the ring is, 
         then its just a matter of determining whether the click is inside the area or not.
         Might take some doing.
         */


    }

    // thanks to http://stackoverflow.com/questions/17831395/how-can-i-detect-a-click-in-an-ontouch-listener
    @Override
    public boolean onTouch(View v, MotionEvent event) {

        // this will check if its a click and calculate if it's within your area of interest.
        if (isAClick(startX, endX, startY, endY) && !shouldHandleClick(event.getX(),event.getY()))
            return false;

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            startX = event.getX();
            startY = event.getY();
            break;
        case MotionEvent.ACTION_UP: 
            float endX = event.getX();
            float endY = event.getY();
            if (isAClick(startX, endX, startY, endY)) { 
                launchFullPhotoActivity(imageUrls);// WE HAVE A CLICK!!
            }
            break;
        default:
            return super.onTouch(v,event);
        }

        return true;
    }

    private boolean isAClick(float startX, float endX, float startY, float endY) {
        float differenceX = Math.abs(startX - endX);
        float differenceY = Math.abs(startY - endY);
        if (differenceX > CLICK_ACTION_THRESHHOLD/* =5 */ || differenceY > CLICK_ACTION_THRESHHOLD) {
            return false;
        }
        return true;
    } 
}

Implement Click on a Chart

1 Answers1