I want create buttons similar to this attached screenshot below

I have been developing android apps and they have a button view which we can add in the layout and set text etc. But I don't see anything like this in the Garmin app development. I've searched and the sort of solution I found is to add a button with specific size (i.e. 80 width by 30 height) in the layout and then in the onUpdate() method draw the rectangle and text over the button. If this approach is to be followed, then I cases button is added in layout with x,y in percentage or "center" I need to know the height, width of the screen to calculate the appropriate positions to draw the rects and text. Different screens will have different W,H so that has to be managed as well. Overall this looks like a messy solution, can anyone have any better solution to it? Ideally the button should be designed in the layout.