Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Round button in android.. avoid presses "outside" the button?

Tags:

android

I have created/tried to create, a round button for android by using the ImageButton "widget". But since that type of button is treated as a square and my png-image also is treated as a square with a transparent background, then how do I avoid the user from beeing able to press outside the round button?.. cause as for now.. they can press in the "corners" of the button and that will still trigger the click-event.. Is there any speciall mapping-layer that can be done in photoshop or any way to change the radius of the image button so it fits to the "roundness" of my image.. or any ideas?

Thanks in advance!.. and sorry for poor english..

like image 949
Inx Avatar asked Jan 29 '12 00:01

Inx


2 Answers

Try Pythagorean theorem and onTouch, simple and easy way to do it.

public boolean inCircle(MotionEvent e, int radius, int x, int y) {
    int dx = e.x - x;
    int dy = e.y - y;
    double d = Math.sqrt((dx * dx) + (dy * dy));
    if(d < radius)
        return true;
    return false;
}

the x, y is the posision of the circle, the radius is the radius, and the e is the TouchEvent you have.

@Override
public boolean onTouch(View arg0, MotionEvent arg1) {
    if(arg1.getAction() == MotionEvent.ACTION_DOWN){
           if(inCircle(arg1, radius, xCircle, yCircle){
                  //do whatever you wanna do here
                  }
            }
    return false;
}
like image 145
SlowDeep Avatar answered Nov 10 '22 21:11

SlowDeep


I was using an ImageView as my circle button, and I needed to make some changes to @Daniel's code to make it work the way I wanted. Here's my code:

private boolean mStillDown = false;

public boolean inCircle(MotionEvent e, float radius, float x, float y) {
    float dx = e.getX() - x;
    float dy = e.getY() - y;
    double d = Math.sqrt((dx * dx) + (dy * dy));
    if(d < radius)
        return true;
    return false;
}

@Override
public boolean onTouchEvent(MotionEvent event) {

    int action = event.getAction();
    boolean inCircle = inCircle(event, getWidth()/2.0f, getWidth()/2.0f, getHeight()/2.0f);

    if(inCircle){
        if(action == MotionEvent.ACTION_DOWN || action == MotionEvent.ACTION_POINTER_DOWN){
            this.setPressed(true);
            mStillDown = true;
        }else if(action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_POINTER_UP){
            if(this.isPressed()){
                this.performClick();
                this.setPressed(false);
                mStillDown = false;
            }
        }else if(action == MotionEvent.ACTION_MOVE && mStillDown){
            this.setPressed(true);
        }
    }else{
        if(action == MotionEvent.ACTION_MOVE){
            this.setPressed(false);
        }else if(action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_POINTER_UP || action == MotionEvent.ACTION_OUTSIDE){
            mStillDown = false;
        }
    }

    return true;
}

Hopefully this is useful to someone.

like image 2
JstnPwll Avatar answered Nov 10 '22 23:11

JstnPwll