Android 2D Graphics Example

Posted on Jul 6, 2009 (5 years ago). Seen 48,074 times. 5 comments. Permalink Feed
Photo Max Walker
NewCircle, Inc.
Member since Sep 29, 2010
Location: San Francisco
Stream Posts: 316
Tagged as: Android Tutorial UX

This example shows how to use onDraw() method and create a simple drawing program. The only significant files are Draw activity and the DrawView.

Draw.java

This activity creates the DrawView and sets it as activity's main content. It also sets the borderless window.

package com.example;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;
import android.view.WindowManager;

public class Draw extends Activity {
    DrawView drawView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        // Set full screen view
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        drawView = new DrawView(this);
        setContentView(drawView);
        drawView.requestFocus();
    }
}

DrawView.java

DrawView is a view. It listens to mouse click events and draws a point at the point that it was clicked on.

package com.example;

import java.util.ArrayList;
import java.util.List;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;

public class DrawView extends View implements OnTouchListener {
    private static final String TAG = "DrawView";

    List<Point> points = new ArrayList<Point>();
    Paint paint = new Paint();

    public DrawView(Context context) {
        super(context);
        setFocusable(true);
        setFocusableInTouchMode(true);

        this.setOnTouchListener(this);

        paint.setColor(Color.WHITE);
        paint.setAntiAlias(true);
    }

    @Override
    public void onDraw(Canvas canvas) {
        for (Point point : points) {
            canvas.drawCircle(point.x, point.y, 5, paint);
            // Log.d(TAG, "Painting: "+point);
        }
    }


    public boolean onTouch(View view, MotionEvent event) {
        // if(event.getAction() != MotionEvent.ACTION_DOWN)
        // return super.onTouchEvent(event);
        Point point = new Point();
        point.x = event.getX();
        point.y = event.getY();
        points.add(point);
        invalidate();
        Log.d(TAG, "point: " + point);
        return true;
    }
}

class Point {
    float x, y;

    @Override
    public String toString() {
        return x + ", " + y;
    }
}

Results

You should see a black screen and be able to draw on it with your finger. Expand the features and enjoy it!

 

Comments

Posted on Aug 9, 2012
Photo Sebastian Fast
None
Member since Aug 9, 2012
Finally some small and simple example :-)
Thank you very much! It's not too complicated and easy to expand :D
Posted on Aug 20, 2012
Photo Catherine Olaguir
Student
Member since Aug 20, 2012
Hi there.. :) Thanks to this, i finally found what i need. :)
I'am new to android..(I started 4 days ago, and I'm studying all by my self)
I'm a little confuse, why is it that when i run this source code and when I'm drawing, whenever i click and move the mouse fast.. the point from the mouse are separated or should I say that there spaces between them.. I don't know if the problem is within my emulator..or it is really like that?
and by the way, how can i change the background of my canvas? i wanted to use an image as a background.. is it possible? If yes? How? please reply on this.
Posted on May 7, 2014
Photo Mark Simon
mark simon
Member since May 7, 2014
Android support 2D graphics via its own library in packages android.graphics.drawable and android.view.animation. Take note that Android does not support JDK's AWT and Swing.

Android framework API provides 2D drawing APIs for simple animation that does not require major dynamic changes. There are two ways of implementation using these API.

Drawing to a View
Drawing on a Canvas

1) Drawing a circle to View
Drawing to view is a better option when your UI does not require dynamic changes in the application. The most convenient aspect of doing so is that the Android framework will provide you with a pre-defined Canvas to which you will place your drawing calls.

This can be achieved simply by extending the View class and define an onDraw() callback method. Inside your View component's onDraw(), use the Canvas given to you for all your drawing, using various Canvas.draw...() methods (Ex: canvas.drawCircle(x / 2, y / 2, radius, paint);). onDraw() is a callback method invoked when the view is initially drawn.

http://www.agileinfoways.com/technical-expertise/mobile-applications-development/android-application-development/

2) Drawing rectangle on a canvas
To draw dynamic 2D graphics where in your application needs to regularly re draw itself, drawing on a canvas is a better option. A Canvas works for you as an interface, to the actual surface upon which your graphics will be drawn.

If you need to create a new Canvas, then you must define the bitmap upon which drawing will actually be performed. The Bitmap is always required for a Canvas.
Posted on Jul 3, 2014
Photo Jim Pruett
Wikispeedia
Member since Jul 18, 2011
Can you explain translate(), rotate() in an Android project? Thanks for posting.
Posted on Oct 29, 2014
Photo James Newton
Lexogram
Member since Oct 29, 2014
Hi Max!

Thanks for the simple tutorial.

To get a better idea about how the points are stored, I changed these lines in the onTouch method...

points.add(point);
invalidate();

... to this:

points.add(point);
if (points.size() > 20) {
points.remove(0);
}
invalidate();

Now, as you drag you see a snake of points following your finger.

Cheers,

James