Change color at Paint and Canvas on Android

Question

Sorry if the question is silly, but I'm new to Android. I read a lot on developer.android.сom, but solutions to my problem is not found, unfortunately. Most of the code I found on staсkoverflow, finished the part itself. This View inserted in the Activity in FrameLayout, over the text, and allows you to leave notes in the e-book.

import java.util.ArrayList;

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

public class PaintSurface extends View implements OnTouchListener {

    private Canvas canvas;
    private Path path;
    private Paint paint;
    private ArrayList<Path> paths = new ArrayList<Path>();

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

        this.setOnTouchListener(this);

        paint = new Paint();
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeJoin(Paint.Join.MITER);
        paint.setStrokeCap(Paint.Cap.SQUARE);
        paint.setColor(Color.RED);
        paint.setStrokeWidth(16);
        paint.setAlpha(100);
        canvas = new Canvas();
        path = new Path();
        paths.add(path);

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
    }

    @Override
    protected void onDraw(Canvas canvas) {

        for (Path p : paths) {
            canvas.drawPath(p, paint);
        }

    }

    private float mX, mY;
    private static final float TOUCH_TOLERANCE = 4;

    private void touch_start(float x, float y) {
        path.reset();
        path.moveTo(x, y);
        mX = x;
        mY = y;
    }

    private void touch_move(float x, float y) {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            path.quadTo(mX, mY, (x + mX) / 2, (y + mY) / 2);
            mX = x;
            mY = y;
        }

    }

    private void touch_up() {
        path.lineTo(mX, mY);
        canvas.drawPath(path, paint);

        path = new Path();
        paths.add(path);

    }

    @Override
    public boolean onTouch(View arg0, MotionEvent event) {
        float x = event.getX();
        float y = event.getY();

        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            touch_start(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_MOVE:
            touch_move(x, y);
            invalidate();
            break;
        case MotionEvent.ACTION_UP:
            touch_up();
            invalidate();
            break;
        }
        return true;

    }

    public void setColor(int color) {
        paint.setColor(color);

    }
}

Describe the problem. I draw the line of the default color, red. Then, use the setColor() changes to green to draw a green line next to the red line. But the first red line also turns green. Such changes occur if you change the style or the stroke width. How is it possible to paint a different color?

A feeling that in a few months this problem would seem to me ridiculous and stupid, and I myself will feel myself silly and I would be ashamed, but now I do not know how to solve this problem...

Answer 1

The Paint color only takes effect when you draw.

From your code you draw all the Paths at once.

  for (Path p : paths) {
        canvas.drawPath(p, paint);
  }

This takes the same paint object and uses it to draw the paths, using what ever color was set last.

What you need to do is set the color between drawing.

   paint.setColor(color.RED); // Will apply to first path.

   for (Path p : paths) {           
        canvas.drawPath(p, paint);
        paint.setColor(color.GREEN); // Will be applied on next Path.
    }

A better solution would be

   for (Path p : paths) {    
        //Determine Paint color Here.
        paint.setColor(myColor); // where myColor is your variable to use for this layer.
                                 // This could be from an array/List of colors matching to Paths.
        canvas.drawPath(p, paint);          
    }

Answer 2

One thing that you can try is to create one Paint object for each path in array List.. This way you can specify different Paint properties for each path in ArrayList...