Welcome back.
We created the Android view that allows us to use traditional Android views with Jetpack Compose.
Also, we said that why we use it because Camerax uses views and not Composables.
And for this we created the camera.
Now let's create the bounding boxes and labels for detected objects.
Start with canvas, set the modifier, keep it as this and then val text paint equals to paint.
It's from Android Graphics.
So import this dot.
Apply.
Set the color to color dot red and the color from Android graphics.
Text size equals to 100 f.
Text align paint alignleft and the typeface.
You can set the bold okay.
Select the typeface from Android Graphics dot bold default.
Okay.
Please check that the typeface is not from compose UI.
Just scroll down and Alt Plus enter to import Android graphics.
Then let's create the bounding box.
By the way, we used the canvas to set up paints, colors and styles.
Process each detection result and the draw bounding boxes and labels.
And here we use the text paint defining the color red.
Red text.
Large text, text alignment left and bold font.
Okay, let's draw the bounding box using the same technique.
Box paint equals to paint from Android graphics dot apply.
Set the color to red.
You can make it the green.
It's better to use green for object detection.
Stroke.
You can make it, uh, like four f thick border, 510.
Whatever you want.
I'll make it six and stroke a hollow box.
Not filled.
Okay.
Not filled box.
Now let's draw for every result in our, um, in our list here.
For the detection results, let me create for every detection result, uh, and, uh, paint a text
paint.
So we need to create a green box and a red label.
So start with for result in detection results in this list.
Now I want from you to focus with me because there is a very important topic here.
We should pay attention to it.
For every result in detection result.
Go and draw a green box and red a label.
We have to normalize coordinates.
Each coordinate value is between 0 and 1 relative to image size.
So here inside this loop we're going to loop through each detection result.
And each result typically contains a detection object label.
So if we go back to the detection result we get that label the confidence and the bounding box which
is of rectangular f which is a normalized coordinate.
Okay.
So I want from you to focus.
Now val left equals to result dot bounding box dot left times screen size and screen width val top.
Don't worry, we're gonna explain everything.
Here we are converting normalized coordinates to screen coordinates.
Getting val left equals to result bounding box dot left and this result is between 0 and 1.
Multiplying it by size dot width.
Here size dot width converts it to the actual pixel position on the screen.
The left edge of the box.
So here for example, if we have the screen size like one 1000, uh 80 1080, we get the left position.
If we have 0.5, we get 270 pixels.
So here are the bounds.
The left top right and bottom left, top right and bottom.
Okay.
So here we are trying to get the screen coordinates uh and make the borders.