andbook!.pdf - Learning Android Get an anddev.org - Android-Shirt Back to index
anddev.org Header Logo
FAQ Search Top rated articles Browse Feeds anddev.org - Authors Contact Details Register Log in

Basic and simple 2D drawing / animation


 
       anddev.org - Android Development Community | Android Tutorials | Index -> Novice Tutorials
Author Message
Marchu
Junior Developer
Junior Developer


Joined: 27 Sep 2008
Posts: 21
Location: Netherlands

PostPosted: Thu Oct 09, 2008 1:44 am    Post subject: Basic and simple 2D drawing / animation Reply with quote

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.. Confused
The first thought was, that this was more complexer then doing this in other platforms.
But its not. Smile

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..)
Java:

public void moveBall(int goX, int goY) {
          // check the borders, and set the direction if a border has reached
          if (coordX > 270){
               goRight = false;
          }
          if (coordX < 0){
               goRight = true;
          }
          if (coordY > 400){
               goDown = false;
          }
          if (coordY < 0){
               goDown = true;
          }
          // move the x and y
          if (goRight){
               coordX += goX;
          }else
          {
               coordX -= goX;
          }
          if (goDown){
               coordY += goY;
          }else
          {
               coordY -= goY;
          }
          
     }


Also there is a View to draw the balls on. (can't do without)
DrawView.java
Java:

package eas.org;

import android.content.Context;
import android.graphics.Canvas;
import android.view.View;

public class DrawView extends View {
   private ColorBall colorball1, colorball2, colorball3, colorball4, colorball5;
   
    public DrawView(Context context) {
        super(context);
        setFocusable(true); //not yet necessary, but you never know what the future brings
       
        // declare each ball with the ColorBall class
        colorball1 = new ColorBall(context,R.drawable.bol_groen);
        colorball2 = new ColorBall(context,R.drawable.bol_rood);
        colorball3 = new ColorBall(context,R.drawable.bol_blauw);
        colorball4 = new ColorBall(context,R.drawable.bol_geel);
        colorball5 = new ColorBall(context,R.drawable.bol_paars);
       
    }
   
    @Override protected void onDraw(Canvas canvas) {
        //canvas.drawColor(0xFFCCCCCC);     //if you want another background color      
       
     // move the balls at every canvas draw
        colorball1.moveBall(5,3);
        colorball2.moveBall(3,4);
        colorball3.moveBall(2,2);
        colorball4.moveBall(4,5);
        colorball5.moveBall(5,1);

        //draw the balls on the canvas
        canvas.drawBitmap(colorball1.getBitmap(), colorball1.getX(), colorball1.getY(), null);
        canvas.drawBitmap(colorball2.getBitmap(), colorball2.getX(), colorball2.getY(), null);
        canvas.drawBitmap(colorball3.getBitmap(), colorball3.getX(), colorball3.getY(), null);
        canvas.drawBitmap(colorball4.getBitmap(), colorball4.getX(), colorball4.getY(), null);
        canvas.drawBitmap(colorball5.getBitmap(), colorball5.getX(), colorball5.getY(), null);
       
        // refresh the canvas
        invalidate();
    }
       
}


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



Balls.rar
 Description:
Balls demo v1.0

Download
 Filename:  Balls.rar
 Filesize:  57.32 KB
 Downloaded:  1437 Time(s)

Back to top
View user's profile Send private message
isaackearl
Junior Developer
Junior Developer


Joined: 25 Nov 2008
Posts: 20

PostPosted: Tue Nov 25, 2008 8:18 pm    Post subject: question for you Reply with quote

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
Back to top
View user's profile Send private message
isaackearl
Junior Developer
Junior Developer


Joined: 25 Nov 2008
Posts: 20

PostPosted: Wed Nov 26, 2008 8:53 am    Post subject: got that working Reply with quote

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
Back to top
View user's profile Send private message
sitara
Junior Developer
Junior Developer


Joined: 27 Nov 2008
Posts: 13

PostPosted: Fri Nov 28, 2008 3:13 am    Post subject: Reply with quote

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
Back to top
View user's profile Send private message
nithin.warier
Experienced Developer
Experienced Developer


Joined: 28 Feb 2008
Posts: 84
Location: Malappuram Kerala India

PostPosted: Wed Mar 11, 2009 3:00 pm    Post subject: Reply with quote

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
Back to top
View user's profile Send private message Visit poster's website
Marchu
Junior Developer
Junior Developer


Joined: 27 Sep 2008
Posts: 21
Location: Netherlands

PostPosted: Sun Mar 22, 2009 7:36 pm    Post subject: Reply with quote

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
Back to top
View user's profile Send private message
nithin.warier
Experienced Developer
Experienced Developer


Joined: 28 Feb 2008
Posts: 84
Location: Malappuram Kerala India

PostPosted: Mon Mar 23, 2009 1:56 am    Post subject: Reply with quote

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
Back to top
View user's profile Send private message Visit poster's website
nithin.warier
Experienced Developer
Experienced Developer


Joined: 28 Feb 2008
Posts: 84
Location: Malappuram Kerala India

PostPosted: Mon Mar 23, 2009 1:58 am    Post subject: Reply with quote

I said, i like the way you coded, its not sarcasm, its appreciation buddy...
Back to top
View user's profile Send private message Visit poster's website
Marchu
Junior Developer
Junior Developer


Joined: 27 Sep 2008
Posts: 21
Location: Netherlands

PostPosted: Mon Mar 23, 2009 2:07 am    Post subject: Reply with quote

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..)
Back to top
View user's profile Send private message
Derek5432
Junior Developer
Junior Developer


Joined: 12 Mar 2009
Posts: 15

PostPosted: Wed Apr 08, 2009 5:21 am    Post subject: Reply with quote

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?
Back to top
View user's profile Send private message
msharank
Once Poster
Once Poster


Joined: 15 Apr 2009
Posts: 1

PostPosted: Wed Apr 15, 2009 10:40 am    Post subject: Reply with quote

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 ?
Back to top
View user's profile Send private message
crockysam
Freshman
Freshman


Joined: 26 Oct 2009
Posts: 3

PostPosted: Wed Oct 28, 2009 6:55 pm    Post subject: Reply with quote

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 Wink
Back to top
View user's profile Send private message
crockysam
Freshman
Freshman


Joined: 26 Oct 2009
Posts: 3

PostPosted: Wed Oct 28, 2009 9:00 pm    Post subject: Reply with quote

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

Java:
LinearLayout ll= (LinearLayout) findViewById(R.id.ll);
int width = ll.getLayoutParams().width;
int height = ll.getLayoutParams().height;
       
DrawView drawView = new DrawView(this, width, height);
ll.addView(drawView, new LinearLayout.LayoutParams(width, height));


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...
Back to top
View user's profile Send private message
Display posts from previous:   
       anddev.org - Android Development Community | Android Tutorials | Index -> Novice Tutorials All times are GMT + 1 Hour
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
You cannot attach files in this forum
You can download files in this forum


© 2007, Android Development Community
All rights reserved.
Powered by phpBB.