Android Question Need help to draw a grid on canvas

Here is a working version but there has to be a far better way?

You need to give more detailed explanations on what exactly you want to achieve.
What do the two horizontal red lines represent, or with which part of the key they must be aligned ?
Where, or on what part of the key should the vertical blue lines be aligned ?
And the same for the horizontal ones.

When you load the image of the key, you fill the Panel but you do not respect the width / height ratio.
I would do the zoom with a Seekbar and move the image with a Touch event like in the attached project.

Thank you for your assistance Klaus,
Yes your right I need to load the image without distorting it, but then the ratios need to be changed to make the key
A: fill the grid correctly and
B: align the cuts with the blue lines.
So it should be like the attached image. Perhaps I can find a better image.
I hope this is a better explanation.

In this case:
The red vertical line is aligned with the shoulders of the key
The red horizontal lines align with the top and bottom of the key blade
The blue vertical lines should align with the centre of each cut in the key
The blue horizontal line align with the base of each cut.
This gives the user a chance to visually decode the key.

This key has 10 cuts with 5 possible depths from 1 to 5
The key code is 1112343453 i think

I wonder can I zoom in on the image without enlarging the panel?

Yes, but it will be more complicated and less useful in your case for moving the image.
For zooming in, you would need to calculate an appropriate rectangle, position it on the original bitmap and copy this partial rectangle from the bitmap onto the entire Panel with a Canvas.
For zooming out you might even need a smaller Panel.
For moving, you would need to reposition the rectangle on the original bitmap and copy this new part onto the entire Panel.
I see only disadvantages with this method.

With the test i made with the correct width / height ratio and your explanation i notice that the grid is not OK. It seems that you adapted it to the previous wrong ratio.
The grid is too short.

klaus said:

Yes, but it will be more complicated and less useful in your case for moving the image.
For zooming in, you would need to calculate an appropriate rectangle, position it on the original bitmap and copy this partial rectangle from the bitmap onto the entire Panel with a Canvas.
For zooming out you might even need a smaller Panel.
For moving, you would need to reposition the rectangle on the original bitmap and copy this new part onto the entire Panel.
I see only disadvantages with this method.

With the test i made with the correct width / height ratio and your explanation i notice that the grid is not OK. It seems that you adapted it to the previous wrong ratio.
The grid is too short.

Click to expand...

Okay I will stay with the panel resize, you have convinced me

I don't understand how the grid is incorrect. Can you help here please.
I have taken the original dimensions of the key provided by the manufacturer.
Distance from shoulder to each cut on the sample key is
250 which = 2.5mm
460 which = 4.6mm
670 which = 6.7mm
and so on.
I have treated this as some sort of DPI and tried to find a way to scale it to the panel.

This is what i get when i run the program and select Key 2.
The image has the original width / height ratio.



For me, the grid does not fit the length and the width of the key.
The grid is shorter than the key, but at the same time its width is wider.
What is the the width of the key at the shoulder ?
From the code it seems to be 8mm.
Looking further in the code, the grid is OK, but then your picture is wrong, it has been stretched horizontally.