How to center text over image

[bompaization]

For now I used padding to position the text over the image, which is far from ideal.
In short, the image of the circle is centered in a toga box, and the number is forced into place with padding.
Is there a proper way to center the text as well?

[mhsmith]

I'm surprised you even managed to do this: I didn't think Toga had any way to make widgets overlap. Can you post your current code?

[bompaization]

Basically just by manipulating padding you can move widgets around at will. The problem is that it does not translate well to other platforms so far from ideal.
Also, when writing this testapp, I had to add the time label at the top or the main_box wouldn't be centered.

import datetime
import toga
from toga.style import Pack
from toga.style.pack import COLUMN, ROW, TOP, LEFT, RIGHT, BOTTOM, CENTER
from toga import ImageView, Image


class testprogramma(toga.App):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)


    def startup(self):
        main_box = toga.Box(style=Pack(direction=COLUMN, alignment=CENTER))

        current_time = datetime.datetime.now()
        self.time_label = toga.Label(current_time.strftime("%d/%m/%Y %H:%M:%S"),
                                     style=Pack(font_size=15))
        box1 = toga.Box(style=Pack(direction=ROW))
        box2 = toga.Box(style=Pack(direction=ROW))

        tekst = "10"
        tekst_label = toga.Label(tekst, style=Pack(font_size=50, padding=(-110,0,0,0)))
        
        cirkel = toga.ImageView(toga.Image('resources/cirkel.png'))
        cirkel.style.update(height=150, width=150)

        box1.add(cirkel)
        box2.add(tekst_label)

        main_box.add(self.time_label)
        main_box.add(box1)
        main_box.add(box2)      

        # Create and show the main window
        self.main_window = toga.MainWindow(title=self.formal_name)
        self.main_window.content = main_box
        self.main_window.show()


def main():
    return testprogramma()

[mhsmith]

I see, you've done it with negative padding. Unfortunately I don't think Toga has any better option at the moment: the layout system is based on the assumption that widgets never overlap.

If you want something similar that fits within Toga's current model, maybe you could use some colored bracket images on the left and right of the number, like ( 6.3 ).