Board index » Android Tutorials with Source Code » Novice Tutorials

Skip to content

Basic drag and drop

Basic Tutorials concerning: GUI, Views, Activites, XML, Layouts, Intents, ...
Topic locked

Basic drag and drop

Postby 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
  1. canvas.drawBitmap(ball.getBitmap(), ball.getX(), ball.getY(), null);
Parsed in 0.010 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
  1.  
  2. // events when touching the screen
  3.  
  4.     public boolean onTouchEvent(MotionEvent event) {
  5.  
  6.         int eventaction = event.getAction();
  7.  
  8.        
  9.  
  10.         int X = (int)event.getX();
  11.  
  12.         int Y = (int)event.getY();
  13.  
  14.  
  15.  
  16.         switch (eventaction ) {
  17.  
  18.  
  19.  
  20.         case MotionEvent.ACTION_DOWN: // touch down so check if the finger is on a ball
  21.  
  22.                 for (ColorBall ball : colorballs) {
  23.  
  24.                         // check all the bounds of the ball
  25.  
  26.                 if (X > ball.getX() && X < ball.getX()+50 && Y > ball.getY() && Y < ball.getY()+50){
  27.  
  28.                         balID = ball.getID();
  29.  
  30.                         break;
  31.  
  32.                 }
  33.  
  34.               }
  35.  
  36.              
  37.  
  38.              break;
  39.  
  40.  
  41.  
  42.  
  43.  
  44.         case MotionEvent.ACTION_MOVE:   // touch drag with the ball
  45.  
  46.                 // move the balls the same as the finger
  47.  
  48.             colorballs[balID-1].setX(X-25);
  49.  
  50.             colorballs[balID-1].setY(Y-25);
  51.  
  52.            
  53.  
  54.              break;
  55.  
  56.  
  57.  
  58.         case MotionEvent.ACTION_UP:
  59.  
  60.                 // touch drop - just do things here after dropping
  61.  
  62.  
  63.  
  64.              break;
  65.  
  66.         }
  67.  
  68.         // redraw the canvas
  69.  
  70.         invalidate();
  71.  
  72.         return true;
  73.  
  74.        
  75.  
  76.     }
  77.  
  78.  
Parsed in 0.012 seconds, using GeSHi 1.0.8.4
Attachments
DragDrop.rar
Drag and Drop example
(58.14 KiB) Downloaded 10179 times
Last edited by Marchu on Thu Oct 09, 2008 6:27 pm, edited 6 times in total.
Marchu
Junior Developer
Junior Developer
 
Posts: 22
Joined: Sat Sep 27, 2008 4:11 pm
Location: Netherlands
Top
Top

Postby 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
Image
Image | Android Development Community / Tutorials
User avatar
plusminus
Site Admin
Site Admin
 
Posts: 2688
Joined: Wed Nov 14, 2007 8:37 pm
Location: Schriesheim, Germany
Top

Postby 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
  1. // check if inside the bounds of the ball (circle)
  2.                         // get the center for the ball (square is 50 pixels)
  3.                         int centerX = ball.getX() + 25;
  4.                         int centerY = ball.getY() + 25;
  5.                        
  6.                         // calculate the radius from the touch to the center of the ball
  7.                         double radCircle  = Math.sqrt( (double) (((centerX-X)*(centerX-X)) + (centerY-Y)*(centerY-Y)));
  8.                        
  9.                         // if the radius is smaller then 23 (radius of a ball is 22), then it must be on the ball
  10.                         if (radCircle < 23){
  11.                                 balID = ball.getID();
  12.                     break;
  13.                         }
  14.  
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
Marchu
Junior Developer
Junior Developer
 
Posts: 22
Joined: Sat Sep 27, 2008 4:11 pm
Location: Netherlands
Top

Postby 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?
yxc3998
Freshman
Freshman
 
Posts: 4
Joined: Tue Sep 23, 2008 4:04 am
Top

Postby 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!!
User avatar
MrSnowflake
Moderator
Moderator
 
Posts: 1439
Joined: Sat Feb 16, 2008 3:11 pm
Location: Flanders, Belgium
Top

Postby 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
Marchu
Junior Developer
Junior Developer
 
Posts: 22
Joined: Sat Sep 27, 2008 4:11 pm
Location: Netherlands
Top
Top

Jigsaw Puzzle

Postby 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.
Maxood

"Life is an endless journey to achieve perfection"
Maxood
Developer
Developer
 
Posts: 34
Joined: Sun Aug 02, 2009 1:37 pm
Location: Karachi, Pakistan
Top

help

Postby 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
vellankik
Freshman
Freshman
 
Posts: 4
Joined: Thu Sep 10, 2009 11:48 am
Top

Postby 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.
Maxood

"Life is an endless journey to achieve perfection"
Maxood
Developer
Developer
 
Posts: 34
Joined: Sun Aug 02, 2009 1:37 pm
Location: Karachi, Pakistan
Top

Postby 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.
vellankik
Freshman
Freshman
 
Posts: 4
Joined: Thu Sep 10, 2009 11:48 am
Top

Thanks

Postby Yuri » Fri Jan 08, 2010 2:26 am

THANK YOU VERY MUCH FROM BELARUS!!!! Your sample helps me!!!!
Yuri
Once Poster
Once Poster
 
Posts: 1
Joined: Fri Jan 08, 2010 2:23 am
Top

Postby 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:
NilsT
Freshman
Freshman
 
Posts: 4
Joined: Tue Aug 25, 2009 9:52 am
Top

Postby 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.
wrothgar
Freshman
Freshman
 
Posts: 7
Joined: Tue Nov 17, 2009 10:12 pm
Top

Postby 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
  1. public boolean onTouch(View view, MotionEvent event) {
  2.  
  3.                                
  4.  
  5.                                
  6.  
  7.                         int eventaction = event.getAction();
  8.  
  9.  
  10.  
  11.                         int X = (int)event.getX();
  12.  
  13.                         int Y = (int)event.getY();
  14.  
  15.  
  16.  
  17.                         switch (eventaction ) {
  18.  
  19.                                 case MotionEvent.ACTION_DOWN:  
  20.  
  21.  
  22.  
  23.                                    break;
  24.  
  25.                                 case MotionEvent.ACTION_MOVE:
  26.  
  27.                                        
  28.  
  29.                                       //imageview position change
  30.  
  31.  
  32.  
  33.                                    break;
  34.  
  35.                        }
  36.  
  37. }
  38.  
  39.  
Parsed in 0.012 seconds, using GeSHi 1.0.8.4
hotchin
Freshman
Freshman
 
Posts: 2
Joined: Thu Mar 18, 2010 8:36 pm
Location: mongolia
Top

Re: Basic drag and drop

Postby 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?
Smills
Freshman
Freshman
 
Posts: 2
Joined: Mon Jul 19, 2010 2:53 pm
Top
Top
Next
Topic locked

Return to Novice Tutorials

Who is online

Users browsing this forum: Yahoo [Bot] and 7 guests

Board index The team • Delete all board cookies • All times are UTC + 1 hour