Android 2D Graphics Example

Posted on Jul 6, 2009 (4 years ago). Seen 35,487 times. 2 comments. Permalink Feed
Photo Max Walker
Director of Marketing
NewCircle, Inc.
Member since Sep 29, 2010
Location: San Francisco
Stream Posts: 295
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.