How to change the color of an image drawn with Canvas?

Question

I have a list of seat images drawn with canvas, and I want when I click on an image it will change color. Now it all changes color every time I click. Does anyone know how to solve this problem?

setUp is a function used to set up the things needed to draw an image with Canvas

private void setUp() {
    bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icons8_bus_36_border);
    tempBitmap = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888);
    tempCanvas = new Canvas(tempBitmap);
    tempCanvas.drawBitmap(bitmap, 0, 0, mPaint);
    if (bitmap == null) {
        Log.d(TAG, "setUp: null");
    } else {
        Log.d(TAG, "setUp: not null");
    }
}

sequentially is the function I use to draw images with Canvas

 private void sequentially() {
    setUp();
    imageList = new HashMap<>();
    chooseColor = Color.parseColor("#1A86C8");
    seat.setGravity(Gravity.CENTER);
    LinearLayout row = new LinearLayout(getActivity());
    row.setOrientation(LinearLayout.HORIZONTAL);
    LinearLayout.LayoutParams firstImg = new LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.WRAP_CONTENT,
            LinearLayout.LayoutParams.WRAP_CONTENT
    );
    firstImg.setMargins(10, 0, 0, 0);

    LinearLayout.LayoutParams forRow = new LinearLayout.LayoutParams(
            LinearLayout.LayoutParams.MATCH_PARENT,
            LinearLayout.LayoutParams.WRAP_CONTENT
    );
    forRow.setMargins(0, 0, 0, 15);
    for (int j = 0; j < 2; j++) {
        row = new LinearLayout(getActivity());
        row.setLayoutParams(forRow);
        seat.addView(row);
        for (int i = 0; i < 3; i++) {
            countForImage++;
            imageView = new ImageView(getActivity());
            imageList.put(countForImage, imageView);
            Log.d(TAG, "sequentially: number" + countForImage);
            imageView.setLayoutParams(firstImg);
            tempCanvas.drawBitmap(bitmap, 0, 0, mPaint);
            imageView.setImageDrawable(new BitmapDrawable(getResources(), tempBitmap));
            row.addView(imageView);
            if (i == 1 && j == 0) {
                imageView.setVisibility(View.INVISIBLE);
            }
        }
    }
}

loopSet is the function I use to set the color change event

 public void loopSeat(Map<Integer, ImageView> map) {
    Log.d(TAG, "loopSeat: running");
    Iterator iterator = map.entrySet().iterator();
    while (iterator.hasNext()) {
        final Map.Entry pair = (Map.Entry) iterator.next();
        final ImageView imageView = (ImageView) pair.getValue();
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d(TAG, "onClick at number= :" + pair.getKey());
                setColor(imageView);
            }
        });
        Log.d(TAG, "loopSeat: key= " + pair.getKey());
    }
}

setColor will be the function responsible for changing the color of the image

 public void setColor(ImageView imageView) {
   color,need to fix 
    Log.d(TAG, "setColor running");
    mPaint = new Paint(chooseColor);
    ColorFilter filter = new LightingColorFilter(chooseColor, 1);
    mPaint.setColorFilter(filter);
    Bitmap bm=((BitmapDrawable)imageView.getDrawable()).getBitmap();
    tempCanvas.drawBitmap(bm, 0, 0, mPaint);
    imageView.setImageDrawable(new BitmapDrawable(getResources(), bm));
}

Ah no, I mean everything works but instead of just changing the image i click , it change all the image.. — nguyen sam, Feb 18 '19 at 04:54
My boss want me do that, and my task like booking seat, i can not use a regular layout to do that. — nguyen sam, Feb 18 '19 at 07:09
It a dynamic layout bro, it change by the number of seat show up in the screen, and my boss obsess with Canvas, tell me that i have to use it. Maybe in the future my boss want to add a human image that seat on the chair into that image, only Canvas can do that. — nguyen sam, Feb 18 '19 at 07:56

score 0 · Accepted Answer · answered Feb 18 '19 at 05:32

Because the Bitmap instance of the ImageView are the same. You need to copy to a new Bitmap for each ImageView: https://developer.android.com/reference/android/graphics/Bitmap.html#copy(android.graphics.Bitmap.Config,%20boolean)

Though I'd recommend to use the tint property of ImageView: How to set tint for an image view programmatically in android?

nguyen sam · Answer 2 · 2021-09-26T04:10:58.077

0

I changed the code in setColor function according to the suggestion of @Benoit. And it works perfect

public void setColor(ImageView imageView) {
    Log.d(TAG, "setColor: running");
    mPaint = new Paint(chooseColor);
    ColorFilter filter = new LightingColorFilter(chooseColor, 1);
    mPaint.setColorFilter(filter);
    //end of set color

   //start to creat a new bitmap
    Bitmap bm = bitmap.copy(Bitmap.Config.ARGB_8888, false);
    choosBitmap = Bitmap.createBitmap(bm.getWidth(), bm.getHeight(), Bitmap.Config.ARGB_8888);
    tempCanvas.drawBitmap(choosBitmap, 0, 0, mPaint);
    imageView.setImageDrawable(new BitmapDrawable(getResources(), choosBitmap));
}

edited Sep 26 '21 at 04:10

answered Feb 18 '19 at 08:00

nguyen sam

43
8

why use Bitmap.createBitmap ? – Abhay Koradiya Feb 18 '19 at 08:48
1

Use `Bitmap.createScaledBitmap` instead. – Abhay Koradiya Feb 18 '19 at 08:49
Ty for the advice, using the tint element is wat better, i dont know what Bitmap.creatBitmap mean, i just do the same with the guide post. – nguyen sam Jul 25 '19 at 04:33

How to change the color of an image drawn with Canvas?

2 Answers2