Basic and simple 2D drawing / animation

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

Basic and simple 2D drawing / animation

Postby Marchu » Thu Oct 09, 2008 1:44 am

I just started with Android, and have always start a new language with some graphical experiments.
After looking thruw a lot of information, i didn't found a simple way of drawing a (resource) bitmap, and let the bitmap move over the screen. Man, for a simple moving picture, i looked in the api demo's at more then 100 lines of complex code.. :?
The first thought was, that this was more complexer then doing this in other platforms.
But its not. :)

So i have put together a little example on how to do this, with a few lines of code.

I use 1 class for the ball objects, and for moving the balls over the screen.
ColorBall.java
This class holds the Bitmap, and the position on the screen.
Also he takes care that the ball is not going of the screen. (who knows where he will end up..)
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. public void moveBall(int goX, int goY) {
  3.  
  4.                 // check the borders, and set the direction if a border has reached
  5.  
  6.                 if (coordX > 270){
  7.  
  8.                         goRight = false;
  9.  
  10.                 }
  11.  
  12.                 if (coordX < 0){
  13.  
  14.                         goRight = true;
  15.  
  16.                 }
  17.  
  18.                 if (coordY > 400){
  19.  
  20.                         goDown = false;
  21.  
  22.                 }
  23.  
  24.                 if (coordY < 0){
  25.  
  26.                         goDown = true;
  27.  
  28.                 }
  29.  
  30.                 // move the x and y
  31.  
  32.                 if (goRight){
  33.  
  34.                         coordX += goX;
  35.  
  36.                 }else
  37.  
  38.                 {
  39.  
  40.                         coordX -= goX;
  41.  
  42.                 }
  43.  
  44.                 if (goDown){
  45.  
  46.                         coordY += goY;
  47.  
  48.                 }else
  49.  
  50.                 {
  51.  
  52.                         coordY -= goY;
  53.  
  54.                 }
  55.  
  56.                
  57.  
  58.         }
  59.  
  60.  
Parsed in 0.032 seconds, using GeSHi 1.0.8.4


Also there is a View to draw the balls on. (can't do without)
DrawView.java
Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1.  
  2. package eas.org;
  3.  
  4.  
  5.  
  6. import android.content.Context;
  7.  
  8. import android.graphics.Canvas;
  9.  
  10. import android.view.View;
  11.  
  12.  
  13.  
  14. public class DrawView extends View {
  15.  
  16.    private ColorBall colorball1, colorball2, colorball3, colorball4, colorball5;
  17.  
  18.    
  19.  
  20.     public DrawView(Context context) {
  21.  
  22.         super(context);
  23.  
  24.         setFocusable(true); //not yet necessary, but you never know what the future brings
  25.  
  26.        
  27.  
  28.         // declare each ball with the ColorBall class
  29.  
  30.         colorball1 = new ColorBall(context,R.drawable.bol_groen);
  31.  
  32.         colorball2 = new ColorBall(context,R.drawable.bol_rood);
  33.  
  34.         colorball3 = new ColorBall(context,R.drawable.bol_blauw);
  35.  
  36.         colorball4 = new ColorBall(context,R.drawable.bol_geel);
  37.  
  38.         colorball5 = new ColorBall(context,R.drawable.bol_paars);
  39.  
  40.        
  41.  
  42.     }
  43.  
  44.    
  45.  
  46.     @Override protected void onDraw(Canvas canvas) {
  47.  
  48.         //canvas.drawColor(0xFFCCCCCC);     //if you want another background color      
  49.  
  50.        
  51.  
  52.         // move the balls at every canvas draw
  53.  
  54.         colorball1.moveBall(5,3);
  55.  
  56.         colorball2.moveBall(3,4);
  57.  
  58.         colorball3.moveBall(2,2);
  59.  
  60.         colorball4.moveBall(4,5);
  61.  
  62.         colorball5.moveBall(5,1);
  63.  
  64.  
  65.  
  66.         //draw the balls on the canvas
  67.  
  68.         canvas.drawBitmap(colorball1.getBitmap(), colorball1.getX(), colorball1.getY(), null);
  69.  
  70.         canvas.drawBitmap(colorball2.getBitmap(), colorball2.getX(), colorball2.getY(), null);
  71.  
  72.         canvas.drawBitmap(colorball3.getBitmap(), colorball3.getX(), colorball3.getY(), null);
  73.  
  74.         canvas.drawBitmap(colorball4.getBitmap(), colorball4.getX(), colorball4.getY(), null);
  75.  
  76.         canvas.drawBitmap(colorball5.getBitmap(), colorball5.getX(), colorball5.getY(), null);
  77.  
  78.        
  79.  
  80.         // refresh the canvas
  81.  
  82.         invalidate();
  83.  
  84.     }
  85.  
  86.        
  87.  
  88. }
  89.  
  90.  
Parsed in 0.037 seconds, using GeSHi 1.0.8.4


Plus some balls to experiment further with this.

This example is written simple and straight forward, but i hope this helps others who just started.

Cheers
Attachments
Balls.rar
Balls demo v1.0
(57.32 KiB) Downloaded 4842 times
Marchu
Junior Developer
Junior Developer
 
Posts: 22
Joined: Sat Sep 27, 2008 4:11 pm
Location: Netherlands

Top

question for you

Postby isaackearl » Tue Nov 25, 2008 8:18 pm

I've been messing with your tutorial trying to get the bitmap and 2d drawing down.. but I'm having some issues. I made a similiar program.. except I was trying to make some different images bounce around, and this is where I'm having the issues. I am using png files, that are all about the same size as the ones you used for the balls (4k) and they don't work.. I get an error that says "no resources found that match the given name at ( 'src' with value drawable etc etc..."

now if I replace my images with your ball images and change your ball imgs to have the same name as my images were then it works just fine!? and the balls bounce arund and do some other things. but its blowing my mind why my images aren't working! if there are certain rules for the drawable folder or something idon't know them... any help would be appreciated.

thanks
isaackearl
Junior Developer
Junior Developer
 
Posts: 20
Joined: Tue Nov 25, 2008 8:09 pm

got that working

Postby isaackearl » Wed Nov 26, 2008 8:53 am

hey marchu I really like your little tutorial... it has really helped me figure some stuff out. I have a question for you or anybody else who may want to answer... lets say that you wanted this program to be exactly as is except for instead of the balls bouncing as soon as the program starts, how could I make them wait until some other cue is given like for example a screen touch.

As of now I have it set up so that the balls bounce for 2 seconds and then they stop. i did this by just doing an if statement that basically says:

if the ball has been bouncing for less then two seconds let it keep moving
else colorball.moveball(0,0)
and it stops

now how could I making it start again with a screen touch or something...

thanks, in advance
isaackearl
Junior Developer
Junior Developer
 
Posts: 20
Joined: Tue Nov 25, 2008 8:09 pm

Postby sitara » Fri Nov 28, 2008 3:13 am

hi,

i am using the tutorial above DrawView.java to run it in android.



public class DrawView extends View {
private [b]ColorBall [/b]colorball1, colorball2, colorball3, colorball4, colorball5;


the word ColorBall has th red curlyy underlined i the program. it says tat th ColorBall cannot be resolved to a type.

because the ColorBall is highlighted with the red curly lines, the rest of the colorballs have been highlighted the same was as well.

do you know how i can resolve the error? anyone?


sitara
sitara
Junior Developer
Junior Developer
 
Posts: 13
Joined: Thu Nov 27, 2008 8:27 am

Postby nithin.warier » Wed Mar 11, 2009 3:00 pm

Hi Marchu,

superb program, the way you did, you use complete android resource, didnt use any thread, in onDraw, you redrawing the balls, really nice way of coding..

Thanks
Nithin
nithin.warier
Experienced Developer
Experienced Developer
 
Posts: 87
Joined: Thu Feb 28, 2008 12:05 pm
Location: Malappuram Kerala India

Postby Marchu » Sun Mar 22, 2009 7:36 pm

nithin.warier wrote:Hi Marchu,

superb program, the way you did, you use complete android resource, didnt use any thread, in onDraw, you redrawing the balls, really nice way of coding..

Thanks
Nithin


Well you have stated how good you are, so why not giving a code remake, instead of complaining about this.
See the date of the post, and my comment that i was just started with android at the the time of writing. (6 months ago)
Also my comment 'This example is written simple and straight forward, but i hope this helps others who just started', shows that its not a killer app, but only to get the idea about simple drawing.
Beside that, its really not contributing anything, the way you give this comment. (negative, sarcastic and from above)
Or are you doing this with all the old posts, to give yourself a 'go(o)d' feeling?

Marchu
Last edited by Marchu on Mon Mar 23, 2009 2:04 am, edited 1 time in total.
Marchu
Junior Developer
Junior Developer
 
Posts: 22
Joined: Sat Sep 27, 2008 4:11 pm
Location: Netherlands

Top

Postby nithin.warier » Mon Mar 23, 2009 1:56 am

nithin.warier wrote:Hi Marchu,

superb program, the way you did, you use complete android resource, didnt use any thread, in onDraw, you redrawing the balls, really nice way of coding..

Thanks
Nithin
nithin.warier
Experienced Developer
Experienced Developer
 
Posts: 87
Joined: Thu Feb 28, 2008 12:05 pm
Location: Malappuram Kerala India

Postby nithin.warier » Mon Mar 23, 2009 1:58 am

I said, i like the way you coded, its not sarcasm, its appreciation buddy...
nithin.warier
Experienced Developer
Experienced Developer
 
Posts: 87
Joined: Thu Feb 28, 2008 12:05 pm
Location: Malappuram Kerala India

Postby Marchu » Mon Mar 23, 2009 2:07 am

nithin.warier wrote:I said, i like the way you coded, its not sarcasm, its appreciation buddy...


Well then i must give you my excuse.
I totaly misunderstood your comment, and thougth it was like i mentioned.

Sorry about that. (no harm done i hope..)
Marchu
Junior Developer
Junior Developer
 
Posts: 22
Joined: Sat Sep 27, 2008 4:11 pm
Location: Netherlands

Postby Derek5432 » Wed Apr 08, 2009 5:21 am

I like this approach as well, Marchu. But I have a question: How might you use this approach to handle a sequence of animations? E.g., on touching the screen, a red ball moves across the screen from left to right. On a second touch, a yellow ball moves from the bottom to the top of the screen? Would this be possible with the current approach, or would Android's Animation package be required?
Derek5432
Junior Developer
Junior Developer
 
Posts: 15
Joined: Thu Mar 12, 2009 1:42 am

Postby msharank » Wed Apr 15, 2009 10:40 am

Ive just started with Java and Android and its very nice example Marchu. Thanks.

btw i just wondering how to add background on this example? Ive tryed with image and layout background but when i start app there is just black screen. I guess it has something to do with redrawing screen everytime you move balls ?
msharank
Once Poster
Once Poster
 
Posts: 1
Joined: Wed Apr 15, 2009 10:36 am

Postby crockysam » Wed Oct 28, 2009 6:55 pm

How can I put this DrawView into XML so that I can position it on the screen using the XML layout?
Do I need a ViewStub or something like that?

Thx for the example btw, great thing you made ;)
crockysam
Freshman
Freshman
 
Posts: 3
Joined: Mon Oct 26, 2009 2:47 pm

Postby crockysam » Wed Oct 28, 2009 9:00 pm

Ok, I solved this by creating a LinearLayout inside my XML and then add the DrawView to the LinearLayout:

Syntax: [ Download ] [ Hide ]
Using java Syntax Highlighting
  1. LinearLayout ll= (LinearLayout) findViewById(R.id.ll);
  2.  
  3. int width = ll.getLayoutParams().width;
  4.  
  5. int height = ll.getLayoutParams().height;
  6.  
  7.        
  8.  
  9. DrawView drawView = new DrawView(this, width, height);
  10.  
  11. ll.addView(drawView, new LinearLayout.LayoutParams(width, height));
Parsed in 0.035 seconds, using GeSHi 1.0.8.4


Also updated the drawView constructor to accept the width an the height and use it as a maximum X and Y for the balls to move...
crockysam
Freshman
Freshman
 
Posts: 3
Joined: Mon Oct 26, 2009 2:47 pm

Postby Profete162 » Fri Feb 12, 2010 6:49 pm

Nice Tutorial, I love it.

Just a question, what is the best method to use if i want to make the ball move with accelerometer? I will use the moveball to a position that i calculated, but when should i call the moveball and how?

Thank a lot for any help.
Profete162
Experienced Developer
Experienced Developer
 
Posts: 67
Joined: Fri Nov 27, 2009 6:07 pm

Postby bouncyman » Mon Feb 15, 2010 7:46 am

Hi Marchu
Thanks for the awesome tutorial. I have a couple quick questions for you (or anyone else).
1. Is there an easy or recommended way to do a drag rotation of a bitmap? (By drag rotation I mean the user uses their finger to drag the direction the bitmap is to rotate in)
2. I've looked around quite a bit, but I can't find what the easiest way to delete a bitmap after you are done using it.
Please help!
Thanks!
bouncyman
Freshman
Freshman
 
Posts: 3
Joined: Mon Feb 15, 2010 7:34 am

Top
Next

Return to Novice Tutorials

Who is online

Users browsing this forum: No registered users and 4 guests