Skip to content Skip to sidebar Skip to footer

How To Change Color Of Pen On Button Click In Android

I have made a simple android program for singletouch paint, in it I have aut 4 types of pens of different sizes and I want is based on that image I want to change strokesize of pen

Solution 1:

Seems there's no ability to draw only part of Path using one Paint and draw another part with another one. So, I see the only solution - use multiple Paths and correspond path to the Paint. Also, I would suggest to encapsulate all drawing related information inside view and let Activity operate with high-level stuff.

So the following changes should be applied:

  1. Use some container for Paths and keep Path - Paint relation inside it;
  2. Provide some method from custom View to let Activity change current Pen;
  3. Keep drawing details part inside custom view, because these details might not be needed for Activity;

Like the following:

publicclassMyActivityextendsActivityimplementsView.OnClickListener{

    private static final String TAG = "MyActivity";

    ImageView pen, color;
    SingleTouchDrawingView mDrawView;
    // Drawing view container
    ImageView mRemove;
    ImageView mEraser;
    LinearLayout pens;
    HorizontalScrollView myplate;
    private Paint mPaint;
    private Paint mBitmapPaint;
    private View aqua;
    private ViewGroup mRootView;

    private Path mPath;
    public Canvas mCanvas;
    View pen1;
    View pen2;
    View pen3;
    View pen4;

    @Overrideprotected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        mRootView = (ViewGroup) findViewById(R.id.root);
        mDrawView = (SingleTouchDrawingView) findViewById(R.id.myview);
        pen = (ImageView) findViewById(R.id.pen);
        pens = (LinearLayout) findViewById(R.id.linear);
        pens.setVisibility(View.GONE);
        pen1 = findViewById(R.id.pen1);
        pen2 = findViewById(R.id.pen2);
        pen3 = findViewById(R.id.pen3);
        pen4 = findViewById(R.id.pen4);
        color = (ImageView) findViewById(R.id.color);
        myplate = (HorizontalScrollView) findViewById(R.id.myplate);

        // colors.........!!!!final View red = findViewById(R.id.red);
        final View green = findViewById(R.id.green);
        final View blue = findViewById(R.id.blue);
        final View orange = findViewById(R.id.orange);
        final View yellow = findViewById(R.id.yellow);
        final View cyan = findViewById(R.id.cyan);
        final View black = findViewById(R.id.black);
        final View cofee = findViewById(R.id.coffee);
        final View fuchiya = findViewById(R.id.fuchiya);
        final View gray = findViewById(R.id.gray);
        final View indigo = findViewById(R.id.indigo);
        final View khaki = findViewById(R.id.khaki);
        final View lavendar = findViewById(R.id.lavendar);
        final View magenta = findViewById(R.id.magenta);
        final View mango = findViewById(R.id.mango);
        final View maroon = findViewById(R.id.maroon);
        final View pista = findViewById(R.id.pista);
        final View pink = findViewById(R.id.pink);
        final View purple = findViewById(R.id.purple);

        red.setOnClickListener(this);
        green.setOnClickListener(this);
        blue.setOnClickListener(this);
        orange.setOnClickListener(this);
        yellow.setOnClickListener(this);
        cyan.setOnClickListener(this);
        black.setOnClickListener(this);
        cofee.setOnClickListener(this);
        fuchiya.setOnClickListener(this);
        gray.setOnClickListener(this);
        indigo.setOnClickListener(this);
        khaki.setOnClickListener(this);
        lavendar.setOnClickListener(this);
        magenta.setOnClickListener(this);
        mango.setOnClickListener(this);
        maroon.setOnClickListener(this);
        pista.setOnClickListener(this);
        pink.setOnClickListener(this);
        purple.setOnClickListener(this);

        mEraser = (ImageView) findViewById(R.id.eraser);
        mRemove = (ImageView) findViewById(R.id.remove);

        pen.setOnClickListener(new View.OnClickListener() {
            @Overridepublic void onClick(View v) {
                if (pens.getVisibility() == View.VISIBLE) {
                    pens.setVisibility(View.GONE);
                } else {
                    pens.setVisibility(View.VISIBLE);
                    myplate.setVisibility(View.GONE);
                }
            }
        });

        pens.setVisibility(View.GONE);

        pen1.setOnClickListener(new View.OnClickListener() {
            @Overridepublic void onClick(View v) {
                mDrawView.setPen(SingleTouchDrawingView.DrawingPens.PEN_1);
                pens.setVisibility(View.GONE);
            }
        });

        pen2.setOnClickListener(new View.OnClickListener() {
            @Overridepublic void onClick(View v) {
                mDrawView.setPen(SingleTouchDrawingView.DrawingPens.PEN_2);
                pens.setVisibility(View.GONE);
            }
        });

        pen3.setOnClickListener(new View.OnClickListener() {
            @Overridepublic void onClick(View v) {
                pens.setVisibility(View.GONE);
                mDrawView.setPen(SingleTouchDrawingView.DrawingPens.PEN_3);
            }
        });

        pen4.setOnClickListener(new View.OnClickListener() {
            @Overridepublic void onClick(View v) {
                pens.setVisibility(View.GONE);
                mDrawView.setPen(SingleTouchDrawingView.DrawingPens.PEN_4);
            }
        });

        mRemove.setOnClickListener(new View.OnClickListener() {
            @Overridepublic void onClick(View v) {
                mRootView.removeView(mDrawView);
                mDrawView = new SingleTouchDrawingView(MyActivity.this);
                mDrawView.setBackgroundResource(R.drawable.up_image);
                mRootView.addView(mDrawView, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
                mRootView.bringChildToFront(findViewById(R.id.tools_container));
                mRootView.bringChildToFront(findViewById(R.id.linear));
                mRootView.bringChildToFront(findViewById(R.id.myplate));
                pens.setVisibility(View.GONE);
                myplate.setVisibility(View.GONE);
            }
        });

        mEraser.setOnClickListener(new View.OnClickListener() {
            @Overridepublic void onClick(View v) {
                mBitmapPaint.setColor(Color.TRANSPARENT);
                mPath.reset();
                mDrawView.invalidate();
                pens.setVisibility(View.GONE);
                myplate.setVisibility(View.GONE);
            }
        });

        color.setOnClickListener(new View.OnClickListener() {
            @Overridepublic void onClick(View v) {
                if (myplate.getVisibility() == View.VISIBLE) {
                    myplate.setVisibility(View.GONE);
                } else {
                    myplate.setVisibility(View.VISIBLE);
                    pens.setVisibility(View.GONE);
                }
            }
        });
    }

    // /colorpicker................!@Overridepublic void onClick(View v) {
        switch (v.getId()) {
            case R.id.black:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.BLACK);
                break;
            case R.id.blue:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.BLUE);
                break;
            case R.id.coffee:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.COFEE);
                break;
            case R.id.cyan:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.CYAN);
                break;
            case R.id.fuchiya:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.FUCHIYA);
                break;
            case R.id.gray:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.GRAY);
                break;
            case R.id.green:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.GREEN);
                break;
            case R.id.indigo:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.INDIGO);
                break;
            case R.id.khaki:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.KHAKI);
                break;
            case R.id.lavendar:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.LAVENDAR);
                break;
            case R.id.magenta:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.MAGENTA);
                break;
            case R.id.mango:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.MANGO);
                break;
            case R.id.maroon:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.MAROON);
                break;
            case R.id.orange:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.ORANGE);
                break;
            case R.id.pink:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.PINK);
                break;
            case R.id.pista:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.PISTA);
                break;
            case R.id.purple:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.PURPLE);
                break;
            case R.id.red:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.RED);
                break;
            case R.id.yellow:
                myplate.setVisibility(View.GONE);
                mDrawView.setColor(SingleTouchDrawingView.DrawingColors.YELLOW);
                break;
        }
    }
}

And view itself:

publicclassSingleTouchDrawingViewextendsView {

    publicint height;
    public Bitmap mBitmap;
    public Canvas mCanvas;
    public Path mPath;
    public Paint mBitmapPaint;
    Context context;

    publicenumDrawingPens {
        PEN_1(6), PEN_2(4), PEN_3(2), PEN_4(1);

        publicint mWidth;

        privateDrawingPens(finalint width) {
            mWidth = width;
        }

        intgetPenWidth() {
            return mWidth;
        }
    }

    publicenumDrawingColors{
        BLACK(Color.parseColor("#000000")),   BLUE(Color.parseColor("#0000FF")),     COFEE(Color.parseColor("#D2691E")),   CYAN(Color.parseColor("#00FFFF")),
        FUCHIYA(Color.parseColor("#FF00FF")), GRAY(Color.parseColor("#808080")),     GREEN(Color.parseColor("#00FF00")),   INDIGO(Color.parseColor("#4B0082")),
        KHAKI(Color.parseColor("#F0E68C")),   LAVENDAR(Color.parseColor("#E6E6FA")), MAGENTA(Color.parseColor("#FF00FF")), MANGO(Color.parseColor("#FF8C00")),
        MAROON(Color.parseColor("#800000")),  ORANGE(Color.parseColor("#FFA500")),   PINK(Color.parseColor("#FFC0CB")),    PISTA(Color.parseColor("#9ACD32")),
        PURPLE(Color.parseColor("#800080")),  RED(Color.parseColor("#FF0000")),      TAN(Color.parseColor("#0000A0")),     YELLOW(Color.parseColor("#FFD801"));

        privateint mColorValue;

        privateDrawingColors(finalint color) {
            mColorValue = color;
        }

        intgetColorValue() {
            return mColorValue;
        }
    }

    publicSingleTouchDrawingView(final Context context) {
        super(context);

        init(context);
    }

    publicSingleTouchDrawingView(final Context context, final AttributeSet attrs) {
        super(context, attrs);

        init(context);
        mBitmap = Bitmap.createBitmap(400, 400, Bitmap.Config.ARGB_8888);
        mCanvas = newCanvas(mBitmap);
        mPath = newPath();
        mBitmapPaint = newPaint(Paint.DITHER_FLAG);
    }

    publicSingleTouchDrawingView(final Context context,
                                  final AttributeSet attrs,
                                  finalint defStyle) {
        super(context, attrs, defStyle);

        init(context);
    }

    private ConcurrentLinkedQueue<Map.Entry<Path, Map.Entry<DrawingPens, DrawingColors>>> mPaths = newConcurrentLinkedQueue<Map.Entry<Path, Map.Entry<DrawingPens, DrawingColors>>>();
    /** Stores created {@link Paint} objects */private HashMap<Map.Entry<DrawingPens, DrawingColors>, Paint> mPaints = newHashMap<Map.Entry<DrawingPens, DrawingColors>, Paint>();
    /** Current paint parameters - PEN_1 width and BLACK color */private AbstractMap.SimpleImmutableEntry<DrawingPens, DrawingColors> mCurrentPaintParameters = newAbstractMap.SimpleImmutableEntry<DrawingPens, DrawingColors>(DrawingPens.PEN_1, DrawingColors.BLACK);

    privatePathmCurrentPath=null;


    privatevoidinit(final Context context) {
        // Initialize default paint
        getPaintWithParameters(mCurrentPaintParameters);
        mCurrentPath = newPath();
        mPaths.add(newAbstractMap.SimpleImmutableEntry<Path, Map.Entry<DrawingPens, DrawingColors>>(mCurrentPath, mCurrentPaintParameters));
    }

    /**
     * Helper to create Paint from parameters
     *
     * @param paintParameters
     * @return
     */private Paint getPaintWithParameters(final Map.Entry<DrawingPens, DrawingColors> paintParameters) {
        Paintpaint= mPaints.get(paintParameters);

        if (null == paint) {
            paint = newPaint();
            paint.setAntiAlias(true);
            paint.setDither(true);
            paint.setStrokeWidth(paintParameters.getKey().getPenWidth());
            paint.setColor(paintParameters.getValue().getColorValue());
            paint.setStyle(Paint.Style.STROKE);
            paint.setStrokeJoin(Paint.Join.ROUND);
            paint.setStrokeCap(Paint.Cap.ROUND);

            mPaints.put(paintParameters, paint);
        }

        return paint;
    }

    @OverridepublicvoidonDraw(Canvas canvas) {
        super.onDraw(canvas);

        for (Map.Entry<Path, Map.Entry<DrawingPens, DrawingColors>> entry : mPaths) {
            canvas.drawPath(entry.getKey(), getPaintWithParameters((entry.getValue())));
        }
    }

    @OverridepublicbooleanonTouchEvent(MotionEvent me) {
        floateventX= me.getX();
        floateventY= me.getY();

        switch (me.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mCurrentPath.moveTo(eventX, eventY);
                returntrue;
            case MotionEvent.ACTION_MOVE:
                mCurrentPath.lineTo(eventX, eventY);
                break;
            case MotionEvent.ACTION_UP:
                break;
        }

        invalidate();

        returntrue;
    }

    publicvoidsetPen(final DrawingPens pen) {
        mCurrentPath = newPath();

        mCurrentPaintParameters = newAbstractMap.SimpleImmutableEntry<DrawingPens, DrawingColors>(pen, mCurrentPaintParameters.getValue());

        mPaths.add(newAbstractMap.SimpleImmutableEntry<Path, Map.Entry<DrawingPens, DrawingColors>>(mCurrentPath, mCurrentPaintParameters));
    }

    publicvoideraser() {
        // Get default paint parameters
        mCurrentPaintParameters = newAbstractMap.SimpleImmutableEntry<DrawingPens, DrawingColors>(DrawingPens.PEN_1, DrawingColors.BLACK);
    }

    publicvoidsetColor(final DrawingColors color ) {
        mCurrentPath = newPath();

        mCurrentPaintParameters = newAbstractMap.SimpleImmutableEntry<DrawingPens, DrawingColors>(mCurrentPaintParameters.getKey(), color);

        mPaths.add(newAbstractMap.SimpleImmutableEntry<Path, Map.Entry<DrawingPens, DrawingColors>>(mCurrentPath, mCurrentPaintParameters));
    }
}

UPDATE (for having custom colours/widths):

Issue with Your code was in code inconsistency and incorrect understanding of how Java Collections works. You don't need mPaths1 additional collection, but should use the same collection for all drawing and maintain additional structure (in our case it's Map.Entry<DrawingPens, DrawingColors>) which could identify exact Paint and to be used with collection of paths. For more details of collections I would suggest to start at Oracle Trials.

Post a Comment for "How To Change Color Of Pen On Button Click In Android"