Allow user to draw on Canvas

Question

I am trying set up a kids app where the can draw on a canvas.

I have a layout which has an ImageView and looks something like this: enter image description here

The Green background with the letter is the imageview, where the canvas should overlay and allow user to draw on. Also I want to allow the user to change the color stroke by pressing on the color globe.

How can I go on with it?

score 1 · Answer 1 · edited May 23 '17 at 12:30

This answer here might help you with allowing the user the canvas: https://stackoverflow.com/a/7401699/2698582.

To allow the user to draw in different colors, you can use a color picker such as this one: https://code.google.com/p/android-color-picker/, or you can google for a different one.

If you define a new point class and change a bit of this example code, you'll be able to add this color change:

private class ColoredPoint {
    public int x, y, color = Color.BLACK;
}

public class DrawView extends View implements OnTouchListener {
    List<ColoredPoint> points = new ArrayList<ColoredPoint>();
    Paint paint = new Paint();
    int currentColor = Color.BLACK;

    public DrawView(Context context) {
        super(context);
        setFocusable(true);
        setFocusableInTouchMode(true);
        this.setOnTouchListener(this);
        paint.setColor(currentColor);
    }

    @Override
    public void onDraw(Canvas canvas) {
        for (ColoredPoint point : points) {
            paint.setColor(point.color);
            canvas.drawCircle(point.x, point.y, 2, paint);  
        }
    }

    public boolean onTouch(View view, MotionEvent event) {
        ColoredPoint point = new ColoredPoint();
        point.color = currentColor;
        point.x = event.getX();
        point.y = event.getY();
        points.add(point);
        invalidate();
        return true;
    }
}

Finally, depending on your selected color picker, this code will vary. Basically, you'll add a touch listener to your color globe to show the color popup. Supposing that the popup has an "OK" button, you'll add a button listener to that button. When it is pressed, change the variable "currentColor" to the selected color.

As mentioned in that example post, you can also implement this using Lines. You might consider using a GestureDetector instead. This tutorial should help explain exactly how the GestureDetector works: http://developer.android.com/training/gestures/detector.html.

What if I wanted to draw free line instead of in circle? – Zahid H Aug 20 '13 at 19:07 — Zahid H, Aug 20 '13 at 19:07

score 1 · Answer 2 · answered Aug 20 '13 at 17:22

1

Take linearlayout and transfer imageview into linearlayout background color. Add your custom view into this linearlayout, and override ondraw method to that view class.

something like this:

<LinearLayout
    background:@drawable/foo">

    <com.packagename.customview
    android:width="match_parent"
    android:height="value">
    >
    </com.packagename.customview>
</LinearLayout>

create customview class and implement drawing part into it.

For the color picker, just use this link: https://code.google.com/p/android-color-picker/

answered Aug 20 '13 at 17:22

Mihir Shah

1,799
3
29
49

So the LinearLayout should be replaced with the image view? – Zahid H Aug 20 '13 at 17:30
1

yes. no need to use imageview as you have to add your custom class into layout. so use linearlayout or relativelayout. – Mihir Shah Aug 20 '13 at 17:32

Allow user to draw on Canvas

2 Answers2