How can i change background color of specific area in an image and change color when user click on the same area

Question

My question is I am trying to show a car park booking system in my app. I want to show all the free spaces in green and when user book space the same area should turn to red. Below is the image:

I have tried so many ways but did not get any success. Below is my code:

public class CarParkingActivity extends AppCompatActivity {

private ImageMap mImageMap;
private RelativeLayout stage;
private RelativeLayout.LayoutParams lparams;
private SparseArray<ImageMap.Bubble> spaces;
private String title;
Tracker mytracker;

private List<String> blocks; //list of 'occupied' spaces

@Override
protected void onCreate(Bundle savedInstanceCarParking) {
    super.onCreate(savedInstanceCarParking);
    setContentView(R.layout.activity_car_parking);

    blocks = new ArrayList<>();
    blocks.add("p1");
    blocks.add("p3");
    blocks.add("p6");
    blocks.add("p13");
    blocks.add("p9");
    blocks.add("p200");


    // find the image map in the view
    mImageMap = (ImageMap) findViewById(R.id.map);
    stage = (RelativeLayout) findViewById(R.id.stage);
    mImageMap.setImageResource(R.drawable.carpark2);

    title = getIntent().getStringExtra("option");
    getSupportActionBar().setTitle(title);
    getSupportActionBar().setDisplayHomeAsUpEnabled(true);

    // add a click handler to react when areas are tapped
    mImageMap.addOnImageMapClickedHandler(new ImageMap.OnImageMapClickedHandler() {
        @Override
        public void onImageMapClicked(int id, ImageMap imageMap) {

            mImageMap.showBubble(id);

            if (blocks.contains(imageMap.getArea(id).getName())) {

                MySingleton.getInstance().showToast(getApplicationContext(), "Sorry, this car space is occupied");

                spaces = mImageMap.getParkings();
                drawParkSpace(spaces.get(id)._x, spaces.get(id)._y, false);



            } else {
                //open booking view
                Intent it = new Intent(getApplicationContext(), BookingCarParkingActivity.class);
                it.putExtra("parkId", imageMap.getArea(id).getName().toUpperCase());
                startActivity(it);
            }


        }

        @Override
        public void onBubbleClicked(int id) {
            Log.i("app", "onBubbleClicked: id: " + id);
        }
    });


}

/**
 * Draw red or green rect on the view.
 *
 * @param x
 * @param y
 * @param isOk: true equals green
 */
private void drawParkSpace(float x, float y, Boolean isOk) {
    Drawable imageView = null;
    imageView = ContextCompat.getDrawable(CarParkingActivity.this, isOk ? R.drawable.carok : R.drawable.carnook);

    lparams = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
    ImageView imageView1 = new ImageView(CarParkingActivity.this);
    imageView1.setImageDrawable(imageView);
    imageView1.setLayoutParams(lparams);
    imageView1.setX(x);
    imageView1.setY(y);
    stage.addView(imageView1);
}

@Override
protected void onResume() {
    super.onResume();
    mImageMap.loadMap("menu"); //load menu mapped image
    //List<ImageMap.PolyArea> list = mImageMap.getPolys();
    //ImageMap.PolyArea poly = list.get(0);

}


@Override
public boolean onOptionsItemSelected(MenuItem item) {

    switch (item.getItemId()) {

        case android.R.id.home:
            this.finish();
            return true;

    }


    return false;



    }
}

Right now each car is clickable but I need to change the color like shown in the image and when the user book space the same area should need to turn red. Please help me to sort out this task. I am new in android but trying hard to solve this issue. Please accept my apologies if my question is not strong enough. Also many thanks in advance. this is the second activity when i booked the space

ImageMapClass

Answer 1

For your need, you have to keep two list and two paint object to track booked and not booked space.

-list of available space.

-list of booked space.

-booked space paint

-yet to book space paint

 Paint bubblePaint;
 Paint bookedBubblePaint;

  //list of bubbles available
  SparseArray<Bubble> mBubbleMap = new SparseArray<Bubble>();

  //list of bubbles already booked
  SparseArray<Bubble> bookedBubble = new SparseArray<Bubble>();

protected void drawBubbles(Canvas canvas) {
        for (int i = 0; i < mBubbleMap.size(); i++) {
            int key = mBubbleMap.keyAt(i);
            Bubble b = mBubbleMap.get(key);
            if (b != null) {
                b.onDraw(canvas, false);//send info of booked status

            }
        }

        for (int i = 0; i < bookedBubble.size(); i++) {
            int key = bookedBubble.keyAt(i);
            Bubble b = bookedBubble.get(key);
            if (b != null) {
                b.onDraw(canvas, true);//send info of booked status

            }
        }
    }

then in your Bubble class onDraw method draw paint based on the booked status

 void onDraw(Canvas canvas, boolean isBooked) {
            if (_a != null) {
                // Draw a shadow of the bubble
                float l = _left + mScrollLeft + 4;
                float t = _top + mScrollTop + 4;
                canvas.drawRoundRect(new RectF(l, t, l + _w, t + _h), 20.0f, 20.0f, bubbleShadowPaint);
                Path path = new Path();
                float ox = _x + mScrollLeft + 1;
                float oy = _y + mScrollTop + 1;
                int yoffset = -35;
                if (_top > _y) {
                    yoffset = 35;
                }
                // draw shadow of pointer to origin
                path.moveTo(ox, oy);
                path.lineTo(ox - 5, oy + yoffset);
                path.lineTo(ox + 5 + 4, oy + yoffset);
                path.lineTo(ox, oy);
                path.close();
                canvas.drawPath(path, bubbleShadowPaint);

                // draw the bubble
                l = _left + mScrollLeft;
                t = _top + mScrollTop;
            if (isBooked) {
                canvas.drawRoundRect(new RectF(l, t, l + _w, t + _h), 20.0f, 20.0f, bookedBubblePaint);
            } else {
                canvas.drawRoundRect(new RectF(l, t, l + _w, t + _h), 20.0f, 20.0f, bubblePaint);
            }

                path = new Path();
                ox = _x + mScrollLeft;
                oy = _y + mScrollTop;
                yoffset = -35;
                if (_top > _y) {
                    yoffset = 35;
                }
                // draw pointer to origin
                path.moveTo(ox, oy);
                path.lineTo(ox - 5, oy + yoffset);
                path.lineTo(ox + 5, oy + yoffset);
                path.lineTo(ox, oy);
                path.close();
            if (isBooked) {
                canvas.drawPath(path, bookedBubblePaint);
            } else {
                canvas.drawPath(path, bubblePaint);
            }


                // draw the message
                canvas.drawText(_text, l + (_w / 2), t + _baseline - 10, textPaint);
            }
        }

change initDrawingTools as follows

private void initDrawingTools() {
        textPaint = new Paint();
        textPaint.setColor(0xFF000000);
        textPaint.setTextSize(30);
        textPaint.setTypeface(Typeface.SERIF);
        textPaint.setTextAlign(Paint.Align.CENTER);
        textPaint.setAntiAlias(true);

        textOutlinePaint = new Paint();
        textOutlinePaint.setColor(0xFF000000);
        textOutlinePaint.setTextSize(18);
        textOutlinePaint.setTypeface(Typeface.SERIF);
        textOutlinePaint.setTextAlign(Paint.Align.CENTER);
        textOutlinePaint.setStyle(Paint.Style.STROKE);
        textOutlinePaint.setStrokeWidth(2);

        bubblePaint = new Paint();
        bubblePaint.setColor(Color.GREEN);
        bubbleShadowPaint = new Paint();
        bubbleShadowPaint.setColor(0xFF000000);
        bookedBubblePaint= new Paint();
        bookedBubblePaint.setColor(Color.RED);
    }

    public void addBubble(String text, int areaId) {
        if (mBubbleMap.get(areaId) == null) {
            Bubble b = new Bubble(text, areaId);
            mBubbleMap.put(areaId, b);
        }
    }

    public void addBookedBubble(String text, int areaId) {
        if (bookedBubble.get(areaId) == null) {
            Bubble b = new Bubble(text, areaId);
            bookedBubble.put(areaId, b);
        }
    }

Hope this will help you to proceed further.