CODEWITHSUNDEEP
androidcanvas
viper
viper

Reputation: 39

How can I create a button on canvas in android and link that button to an image to show/hide?

I would like to have a button in canvas on android which can make an image pop up and once clicked again the image dissapears.

public class Charts extends Activity {
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new Draw(this));
    }
}

private class Draw extends View {
    public Draw(Context context) {
        super(context);
    }

    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }
}

The code above is what I have as the start of my code after this I have used some small basic tools like paint and as shown above I have extended the view...im not sure how I can place buttons

Upvotes: 3

Views: 21988

Answers (5)

Yogamurthy
Yogamurthy

Reputation: 998

I too had a similar requirement and solved it in old fashioned way

  1. draw a button using canvas and note down the button's x and y co-ordinates on all four corners.
  2. when user touches the screen get the x and y co-ordinates.
  3. Now check the user touched location is falling under the button location co-ordinates. if yes then perform the buttons function in the code otherwise dont do anything

Upvotes: 0

Luke Taylor
Luke Taylor

Reputation: 9599

This is how I do (works for me):

  • Draw a bitmap of a button your canvas.
  • Using Android touch api, detect if the touch coordinates are in the bitmaps dst rec.
  • If the above turns out to be true, then draw the bitmap you wish to "pop up" on the canvas.

I hope this gives you a better idea of how to do this.

Update:

private class Draw extends View implements OnTouchListener {
    Rect button = new Rect(); // Define the dimensions of the button here
    boolean buttonClicked;

    public Draw(Context context) {
        super(context);
    }

    public void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (buttonClicked == true) {
            canvas.drawBitmap(source, null, button, null); 
                    // Source will be a that of a clicked button bitmap
        } else {
            canvas.drawBitmap(source, null, button, null); 
                    // Source will be a that of a non clicked button bitmap
        }

    }

    @Override
    public boolean onTouch(View view, MotionEvent event) {
        if (button.contains(event.getX(), event.getY())) {
            buttonClicked = true;
        } else {
            buttonClicked = false;
        }

        return true;
    }

}

PS: Don't freak out when the code doesn't work, I haven't tested it. Not sure how you are rendering your View, I suggest you move over the SurfaceView and create a rendering thread, here's a tutorial: http://www.edu4java.com/androidgame.html

Upvotes: 0

vipsy
vipsy

Reputation: 427

Canvas is not a View, SurfaceView is a view. You can put Button (or any other View) inside a ViewGroup. All layouts like LinearLayout, RelativeLayout, etc are ViewGroup which contains one or more View childs.

I believe you want to put a Button in a SurfaceView. You can't put a button in SurfaceView, but what you can do is, design your UI so that it has a SurfaceView in a layout and nearby to it there is a Button that you want to click.

Edit: What @Andy Res suggests in 2) is probably what you are looking for. Put a SurfaceView in a RelativeLayout and have a button in same layout. Or you can use a FrameLayout and have a SurfaceView and a Button in it.

Upvotes: 1

WIllJBD
WIllJBD

Reputation: 6154

The way I do this, is I use a .png graphic, and then i draw it to the canvas using 

    canvas.drawbitmap(image, rect1, rect2, paint);

where image is the .png rect1 is the target location of the button on the screen rect2 is the portion of the button I want to use and the paint object

then in the 

    @Overide 
    onTouchEvent(MotionEvent event) {}

I put in code to detect if the a Motion Event Up was detected inside of the rect1 boundaries (which contains the target location of where it is on the screen

then i would call something i created like

    Button1Clicked();

which is where i will handle the click.

Upvotes: 0

Andy Res
Andy Res

Reputation: 16043

I don't know if this is possible, but I see 2 options:

  1. You either draw a button on your canvas, this basically is a Bitmap image, and on click check to see if the pointer coordinates are inside of Bitmap area coordinates.

  2. Or, put your Canvas into a RelativeLayout and add a Button control also into it. Since you are in a RelativeLayout, the Button will appear over the Canvas.

Upvotes: 2

Related Questions