Flickering when drawing bitmaps with canvas in Android

Question

I'm trying to do a menu based on bitmaps. The menu itself should be movable through screentouch move events, basically I want to drag the buttons around on the view. The button also includes collision detection, so whenever they touch they bounce from each other.

But I have some problems when it comes to drawing my bitmaps. Currently I'm using a rectangle to scale my bitmap to fit the window of my device. Want i want and can not get currently is for smoother movements of my bitmaps without flickering. Is the only option to move to open gl? Or have I missed something big in my code?

This is in my surfaceview for drawing each button, where MenuButton is the class that holds the bitmap and updates its position according to a touch and drag move.

protected void onDraw(Canvas canvas) {
    canvas.drawColor(Color.WHITE);

    for(MenuButton menuButton : menuButtonSprites) {
        menuButton.onDraw(canvas);
    }
}

I want the bitmaps to scale to each device's width and for that i use a rectangle for the bitmap to fit in.

public MenuButton(MenuView v, Bitmap bmp, int yPosition){
    this.menuView = v;
    this.menuButton = bmp;
    this.xMax = v.getWidth();
    this.yPosistion = yPosition;
    menuButtonRectangle = new Rect(xMin, this.yPosistion-yMin, xMax, this.yPosistion+yMax);
}

public void update(int y){
    if(menuButtonPressed)
    {
        this.yPosistion = y;
        menuButtonRectangle.set(xMin, yPosistion-yMin, xMax, yPosistion+yMax);
    }
}

public void onDraw(Canvas canvas){
    canvas.drawBitmap(menuButton, null, menuButtonRectangle, null);
}

I also have a thread that updates the draw

public void run() {
    long ticksPS = 1000 / FPS;
    long startTime;
    long sleepTime;
    Canvas c = null;

    while (running) {
        startTime = System.currentTimeMillis();
        try {
            c = view.getHolder().lockCanvas();
            synchronized (view.getHolder()) {
                view.onDraw(c);
            }
        } 
        finally {
            if (c != null) {
                view.getHolder().unlockCanvasAndPost(c);
            }
        }

        sleepTime = ticksPS - (System.currentTimeMillis() - startTime);
        try {
            if (sleepTime > 0)
                sleep(sleepTime);
            else
                sleep(10);
        } 
        catch (Exception e) {
        }
    }
}

I don't really know what I'm doing wrong and why i can't manage to get a smooth movements of my buttons. Is it a downside for using canvas or have I missed something really important :D?

score 0 · Answer 1 · answered Mar 21 '12 at 14:12

0

Usually This problem occurs when there is sync problem exists while painting. This may due to the higher Frame rate or also may be the lower frame rate. These kind of issue can be fixed by Double buffering or adjusting the Frame Rate.

Double buffering means, Instead of drawing the Image directly on to the main canvas, we will be creating an empty bitmap of screen size and getting the graphics object. Drawing every thing on to the bitmap then directly drawing this bitmap to the main canvas.

answered Mar 21 '12 at 14:12

Pavandroid

1,586
2
15
30

Thx, yep have tested to adjust the framerate but without any success. I'll try double buffering and get back to you! – Ghostcloud Mar 21 '12 at 14:31
It seems when you lock the canvas and draw, and later unlock canvas with unlockCanvasAndPost(c), you are already drawing the next frame. [Double buffering](http://stackoverflow.com/questions/6538423/double-buffering-in-java-on-android-with-canvas-and-surfaceview) – Ghostcloud Mar 21 '12 at 14:53
Ohh Thats fine. Thanks for the info. lemme rethink about this issue. – Pavandroid Mar 21 '12 at 14:59

Flickering when drawing bitmaps with canvas in Android

1 Answers1