Displaying image in specific position OnClick Android

Question

I have a row of 7 circles and 6 columns I want to display an image depending on the circle that is clicked using Onclick

int rows, cols;
    rows = 7;
    cols = 6;
    for (int i=0; i <rows; i++) {
        for (int j=0; j< cols; j++) {
        canvas.drawCircle(90 + (100*i),  155 + (115*j), 40, white);
        }
    }

Using

.OnClickListener

how is that possible?

override onTouch get the co-ordinated x and y and call invalidate to refresh the draw — Raghunandan, Jan 08 '14 at 11:22
Are you willing to change your solution into a GridView? It makes it much easier to do what you want, including the setting up of the original table — SalGad, Jan 08 '14 at 11:25
how do i get the x and y coordinate? because its in the for loop — user3146973, Jan 08 '14 at 11:25

score 0 · Answer 1 · edited May 23 '17 at 12:03

0

Override onTouchEvent.

Use instance variables float x,y

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        x = event.getX(); 
        y = event.getY();
        invalidate(); // to refresh draw
        return true;
    }

Use x and y to draw the image.

public boolean onTouchEvent (MotionEvent event)

Added in API level 1
Implement this method to handle touch screen motion events.

If this method is used to detect click actions, it is recommended that the actions be performed by implementing and calling performClick(). This will ensure consistent system behavior, including:

obeying click sound preferences
dispatching OnClickListener calls
handling ACTION_CLICK when accessibility features are enabled
Parameters
event   The motion event.
Returns
True if the event was handled, false otherwise.

You need to know the center and the radius of the circle to detect touch withing the circle.

My be this helps you understand Creating a spray effect on touch draw in android

edited May 23 '17 at 12:03

Community

1
1

answered Jan 08 '14 at 11:28

Raghunandan

132,755
26
225
256

For loop is displaying the circles, I cannot remove them, I want to click these circles and depending on the circle that is selected the image should appear in, it is a connect 4 game – user3146973 Jan 08 '14 at 11:30
@user3146973 i don't understand. you should be more specific. – Raghunandan Jan 08 '14 at 11:31
@user3146973 how do you manage to know which circle is clicked? do oyu the radius of each circle? – Raghunandan Jan 08 '14 at 11:32
How Do I add the image? – user3146973 Jan 08 '14 at 11:34
@user3146973 canvas has a drawImage method – Raghunandan Jan 08 '14 at 11:35
Basically right now I am displaying 7 rows of circles and 6 columns of circles, the radius is 40, depending on the circle that is clicked i want the counter (image) to appear in that circle, it is a connect 4 game – user3146973 Jan 08 '14 at 11:37
@user3146973 all the circles radius is 40 and do you know the center of each circle? – Raghunandan Jan 08 '14 at 11:39
what do you mean by center? there are 6 columns of circles and 7 rows, in total 42 circles – user3146973 Jan 08 '14 at 11:42
@user3146973 you can't determine whether you click in 1st circle or second circle. If you know the center and the radius you can get all co-otdinated within the cicumference of the circle and then according to user touch you can display correspoding image without which i don't know any other method – Raghunandan Jan 08 '14 at 11:44
@user3146973 may be this helps http://stackoverflow.com/questions/11938632/creating-a-spray-effect-on-touch-draw-in-android. My question is how do you determine the click inside a circle? Whether its 1st circle or 2nd second. the click may be outside any circle. – Raghunandan Jan 08 '14 at 11:47
@user3146973 for me to solve your problem I need to know the center of the circle and the radius without which there is no point in further discussion. You can wait for a better suggestion – Raghunandan Jan 08 '14 at 11:55

score 0 · Answer 2 · answered Jan 08 '14 at 11:29

0

If you override onTouchEven you can get the x and y of the touch.

@Override 
public boolean onTouchEvent(MotionEvent event) {
    int x = (int)event.getX();
    int y = (int)event.getY();
    switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
        case MotionEvent.ACTION_MOVE:
        case MotionEvent.ACTION_UP:
}

return true }

Now if you use the drawCircle function using the x and y valorized in the onTouchEvent you will draw it exactly where you touched.

answered Jan 08 '14 at 11:29

Lucarnosky

514
4
18

The circles are suppose to stay as they are, it is a connect 4 game. Depending on the circle that is clicked i want the counter to be in that circle – user3146973 Jan 08 '14 at 11:35

Displaying image in specific position OnClick Android

2 Answers2