Basic drag and drop

Marchu · by **Marchu** » Thu Oct 09, 2008 2:10 pm

After searching for a way to drag and drop bitmaps on a screen, i wrote a little example for a basic way of doing this.
I use a ColorBall class from a earlier example, and let the balls now being dragged.
The ColorBall.class holds the images and also the coordinates on the screen.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

canvas.drawBitmap(ball.getBitmap(), ball.getX(), ball.getY(), null);
Parsed in 0.011 seconds,  using GeSHi 1.0.8.4

The DrawView.class is doing all the work, and looks also for the touch events.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

 
// events when touching the screen
 
    public boolean onTouchEvent(MotionEvent event) {
 
        int eventaction = event.getAction(); 
 
        int X = (int)event.getX(); 
 
        int Y = (int)event.getY(); 
 
        switch (eventaction ) { 
 
        case MotionEvent.ACTION_DOWN: // touch down so check if the finger is on a ball
 
                for (ColorBall ball : colorballs) {
 
                        // check all the bounds of the ball
 
                if (X > ball.getX() && X < ball.getX()+50 && Y > ball.getY() && Y < ball.getY()+50){
 
                        balID = ball.getID();
 
                        break;
 
                }
 
              }
 
             break; 
 
        case MotionEvent.ACTION_MOVE:   // touch drag with the ball
 
                // move the balls the same as the finger
 
            colorballs[balID-1].setX(X-25);
 
            colorballs[balID-1].setY(Y-25);
 
             break; 
 
        case MotionEvent.ACTION_UP: 
 
                // touch drop - just do things here after dropping
 
             break; 
 
        } 
 
        // redraw the canvas
 
        invalidate(); 
 
        return true; 
 
    }
 
Parsed in 0.012 seconds,  using GeSHi 1.0.8.4

plusminus · by **plusminus** » Thu Oct 09, 2008 2:44 pm

Thx for sharing.

To make it perfect you could consider that the balls are round not rectangles.

Regards,
plusminus

Marchu · by **Marchu** » Thu Oct 09, 2008 5:11 pm

plusminus wrote:Thx for sharing.

To make it perfect you could consider that the balls are round not rectangles.

Regards,
plusminus

Yep that will be better. I have added a little formula to check if the touch is inside the circle of the ball.

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

// check if inside the bounds of the ball (circle)
                        // get the center for the ball (square is 50 pixels)
                        int centerX = ball.getX() + 25;
                        int centerY = ball.getY() + 25;
                        
                        // calculate the radius from the touch to the center of the ball
                        double radCircle  = Math.sqrt( (double) (((centerX-X)*(centerX-X)) + (centerY-Y)*(centerY-Y)));
                        
                        // if the radius is smaller then 23 (radius of a ball is 22), then it must be on the ball
                        if (radCircle < 23){
                                balID = ball.getID();
                    break;
                        } 
 
Parsed in 0.011 seconds,  using GeSHi 1.0.8.4

In theory this must work, because the radius is measured from the touch to the center of the ball.
If the radius is less then the radius of the ball, the touch must be on the ball.
I have painted (photoshopped) the balls on a square of 50px, with a space of 3 px at each side.

If i see this wrong i will hear that gladly

I have also added that the Ball ID will be 0 if no ball is clicked. Then nothing happens.

p.s.
Can also be used for colision detection..

Cheers

yxc3998 · by **yxc3998** » Wed Oct 15, 2008 4:29 am

Thanks for sharing. One quick question: Is there any way to determine which image is on the top when 2 or more images are overlapped?

MrSnowflake · by **MrSnowflake** » Wed Oct 15, 2008 1:13 pm

As you are using sqrt, which could be slow on actual hardware (as a lot of devices don't have devision in hardware) You could first try the rectangle collision detection and if you collide with such a rectangle try the round collision detection.

yxc3998 wrote:Thanks for sharing. One quick question: Is there any way to determine which image is on the top when 2 or more images are overlapped?

You can look at the drawing priority. Which ever got drawn first will be at the bottom!!

Marchu · by **Marchu** » Wed Oct 15, 2008 11:19 pm

Thank you for the suggestion, MrSnowflake.

I think that wil indead lighten (up) the calculation. (only necesary if the touch is in the rectangle)
I have comment out the earlier rectangle detection, but kept it in the class. So within the code it will be just copy and paste to get it working.

p.s.
I have also another idea about the detection when bitmaps are 'touched' or colide, but must figure that out.
Has something to do with Bitmap.getPixels() , what looks to do a detection on the pixels at the touch.

At the moment i'am in the middle of another android learning curve

, but as soon as i finished that i will look into that.

Cheers

Maxood · by **Maxood** » Sat Sep 12, 2009 6:20 pm

I want to make a Jigsaw puzzle game on android using the above tutorial. Wonder if i can get further guidance on that? I like to know how can i determine the exact position as to where i am placing my graphic?

Please explain in detail and provide sample code.

Thanks,
Maxood.

vellankik · by **vellankik** » Tue Sep 15, 2009 2:55 pm

I am unable to use the simulator.How can i use the simulator to move the balles.Please help me

Maxood · by **Maxood** » Tue Sep 15, 2009 6:12 pm

ok. Are you using Eclipse? Have you downloaded ADT plugin from the android's website(www.android.com). Also there are step by step instructions available for installation of Android SDK 1.5 and configyuring the emulator(or simulator) on www.android.com.
Check it out http://developer.android.com/sdk/1.5_r3/index.html. And if you come up with any problem , just post here.

vellankik · by **vellankik** » Tue Sep 15, 2009 7:24 pm

Actually i am new to android.I am using eclipse.I have installed android SDK. I have already executed other codes.they are perfect.I am also able to display readings of accelerometer on the emulator. But i am unable to move the image using simulator according to the mouse movement. Please help me.

Yuri · by **Yuri** » Fri Jan 08, 2010 2:26 am

THANK YOU VERY MUCH FROM BELARUS!!!! Your sample helps me!!!!

NilsT · by **NilsT** » Mon Jan 18, 2010 11:56 am

Maybe a good thing to do would be to change color of the ball to indicate the 'touch' status. :idea:

wrothgar · by **wrothgar** » Thu Jan 28, 2010 7:13 pm

This tutorial is great, thank you very much for posting it. I am brand new to Andriod development and learning by example is very helpful. Couple things I wanted to add and I am having trouble with:

How can I get the screen height? I wanted to set the balls just off the bottom of the screen on startup but I am not sure how to get the height of the screen. (i.e. point1.y = getHeight()-20; or something like that).

Also, what if I wanted to associate one ball as a way to change to a new screen, how can I call another View/Activity...I am not even sure if I am asking it right.

Thanks if you can lead me in the right direction with either.

hotchin · by **hotchin** » Fri Mar 19, 2010 8:25 pm

hi plusminus and other

how to drag imageview. Also how to change imageview position programmatically.

example:

Syntax: [ Download ] [ Hide ]

Using java Syntax Highlighting

public boolean onTouch(View view, MotionEvent event) {
 
                        int eventaction = event.getAction(); 
 
                        int X = (int)event.getX(); 
 
                        int Y = (int)event.getY(); 
 
                        switch (eventaction ) {
 
                                case MotionEvent.ACTION_DOWN:  
 
                                   break;
 
                                case MotionEvent.ACTION_MOVE: 
 
                                      //imageview position change
 
                                   break;
 
                       }
 
}
 
Parsed in 0.011 seconds,  using GeSHi 1.0.8.4

Smills · by **Smills** » Mon Jul 19, 2010 3:02 pm

Hey, I am mucking about with this example (first android example I have looked at aside from the basic tutorials) and am trying to make the first ball move when you are not touching the screen. I am attempting this by simply adding the following code to the draw method:

Code: Select all: colorballs[0].setX(X+2); colorballs[0].setY(Y+2);

The ball will only move when i am touching the screen for some reason (doesn't matter where I am touching). It seems the draw method is only called when there is interaction. Any idea what method i can put code in to have it called every cycle?

Basic drag and drop

Basic drag and drop

Jigsaw Puzzle

help

Thanks

Re: Basic drag and drop

Who is online