How to I exactly the position of a kivy text label on a canvas?

Question

I have designed the following in figma. I have created a 500px x 500px window and a widget. I want to place the "in motion" text 160px from the left and 207px from the top.
figma design

For images, that works well, but for text, it does not work at all. This is the code

class ScreenOne(Widget):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.gif = Image(source='gifs/ring.gif', pos=(23, 191), size=(126, 119), anim_delay=0.1)
        self.gif0 = Image(source='gifs/test500.gif', pos=(0, 0), size=(500, 500), anim_delay=0.1)
        self.text1 = Label(text="1", pos=(77, 228), font_name="Inter-Bold", font_size=36)
        self.text2 = Label(text="in motion", pos=(160, 207), pos_hint=(0,0), size_hint=(0,0), font_name="Inter-Bold", font_size=64)
        self.add_widget(self.gif0)
        self.add_widget(self.gif)
        self.add_widget(self.text1)
        self.add_widget(self.text2)

The ring gif (gif) is perfectly located, but the text2 is completely off. See below:

Anyone any idea how to place the text labels exactly how I want them to be placed in Figma?

Problem text in the wrong area

tried to use the labels pos_hint=(0,0), size_hint=(0,0) etc.

Asked By: Constantin Scholz

||

Source

Answer 1

The problem is that the size of the text2 Label is the default size, giving it a width of 100. So the actual text will not fit in that size and gets centered about the actual Label size. So the result is that the Label is correctly positioned, but the text extends beyond that default size.

The fix is to adjust the Label size to correctly reflect what you would expect.

Try adding to your code:

class MyLabel(Label):
    pass

Builder.load_string('''
<MyLabel>:
    size_hint: None, None
    size: self.texture_size
''')

Then use MyLabel in place of Label elsewhere in your code.

Answered By: John Anderson

Answer 2

Excellent -> This worked @John. Thank you very much. I implemented it in the following way using the dimensions in Figma and added the size attribute in the following way:

self.text2 = Label(text="in motion", pos=(160, 207), pos_hint=(0,0), size_hint=(0,0), size(296, 65), font_name="Inter-Bold", font_size=64)

Answered By: Constantin Scholz

How to I exactly the position of a kivy text label on a canvas?

Question:

Answers: