extending android button by using onDraw

Question

I want to change my button shape BUT I WANT TO USE onDaw method and EXTENDING button class. So what I've just done for the beginning is :

     <view class = "com.example.button.MainActivity$MyButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
     />

and

    public static class MyButton extends Button {


     public MyButton(Context context) {
      super(context);

     }

     public MyButton(Context context, AttributeSet attrs) {
      super(context, attrs);

     }

     public MyButton(Context context, AttributeSet attrs, int defStyle) {
      super(context, attrs, defStyle);

     }

     @Override
     protected void onDraw(Canvas canvas) {

            Paint paint = new Paint();
            paint.setColor(Color.BLUE);
            paint.setStrokeWidth(10);
            paint.setStyle(Style.FILL);
            int width = getWidth();
            int height = getHeight();
            canvas.drawCircle(width/2, height/2, height/3, paint);

      } 
}

but I get a blue circle on a button view rectangular.

I want to see just the blue circle as a button shape and I get ride of the rectangular. Any help ??

I might be miles off on this but try setting background in xml to transparent. — hypd09, Jul 04 '14 at 12:04
Actually this is the main idea of my project, If I change the background of the button to transparent clicking around the circle may call button click method. — mmlooloo, Jul 04 '14 at 12:12
Your getWidth and getHeight methods are wrong. use canvas.getWidth and canvas.getHeight — the-ginger-geek, Jul 04 '14 at 12:25
You should set the background to transparent, but I think you should also override onMeasure() to make the button not be larger than the actual circle inside it. Depends on your usecase though. — EpicPandaForce, Jul 04 '14 at 14:25
overriding onMeasure() is not useful because the corners of rectangular still appear on the screen. — mmlooloo, Jul 04 '14 at 14:53

score 1 · Accepted Answer · edited May 23 '17 at 12:29

1

Set background to transparent in xml (just like hypd09 said) and override onTouchListener so the clicks only work if you click your blue circle.

setOnTouchListener to control if the click position was within blue circle. You can get the touch position like this.

You can even allow for setting the onClickListener in a following way (add this to your MyButton class):

@Override
public void setOnClickListener(final OnClickListener onClickListener) {
    MyButton.this.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event){
            if (isWithinCircle(event))
            {
                onClickListener.onClick(v);
            }
        }
    });
}

edited May 23 '17 at 12:29

Community

1
1

answered Jul 04 '14 at 12:48

Bartek Lipinski

30,698
10
94
132

Good but if my shape is a bit complex, what should I do to find the answer, for example something like pentagon. finding good rule for checking that any dot is enclosed by it or not is hard. – mmlooloo Jul 04 '14 at 14:46
I think that unless you are able to define your shape more precisely (for example by stating what kind of functions build your shape's sides and comparing them with touch event's coordintes), then android itself is only able to give you the rectangle which contains your shape. – Bartek Lipinski Jul 04 '14 at 15:07
My shape is built by paths. I walk on the borders of my shape. – mmlooloo Jul 04 '14 at 15:18

extending android button by using onDraw

1 Answers1

Linked