I would proceed this way.
- The user enters the value and clicks the button
- As the button is tapped hide the TextView and replace it with an ImageView or keep the TextView and put the ImageView on the top of the TextView (Overlap of the ImageView on the TextView can be achieved with a FrameLayout
- Draw in the ImageView the lines and the numbers in the OnDraw() method
- As the user taps on the ImageView, hide the ImageView and display the TextView again.
Finally if the position of the 2's is fixed you don't need to measure the text.
If the posision is not fixed you can put the numbers in an array. Here is some code in mixed order (not tested)
var resStr1 = Integer.toString(resultNumber);
var position = 0;
...
// METHOD 1, multiple 2's in a number
var j = 0;
for (int i = 0; i < resStr1.length(); i++){
char c = s.charAt(i);
if (c == '2') {
position[j] = i;
j++;
}
}
// METHOD 2. ONLY ONE 2 in a number
position = resStr1.indexOf('2');
// CONTINUE
...
Paint p = new Paint();
...
float left = customMarginLeft + p.measureText(resStr1.substring(0, position));
float top = customMarginTop;
...
canvas.drawRect( bla bla bla...
drawText() // ??
Get a look also to getTextBounds() if you wanna to get the text height too.
About the onDraw method, don't take care of how much time it will be called by the system, if performance is critical just mantain the scope of the variables containing the results and the precalculations global, put in the main class the properties and methods that controls the behaviour of the drawing method. The system will redraw every time the lines again and again as soon as another element overlaps your control or something happens in the system so the fact that the onDraw is called again and again is normal, otherwise your lines will not be redrawn again and could disappear from the screen if something happens.
Of course the code above can be also put in a custom control (combined control).
To clear the lines you should call the invalidate() or postInvalidate() method. This methods will clear the whole area and force the onDraw() to be called again. Then put globally a flag like
shouldRedrawLines = false;
and in the onDraw() do something like this:
if (shouldRedrawLines) { // please note that the onDraw is called again and again and this condition allows you to check if in another part of the program you decided to clear the lines
DrawLines(); // contains the code for redrawing lines
}
DrawNumbersFromResult(); // contains the code for redrawing Numbers
Simple not ?
