how to make kivy app keep all size ratios and UI look when resized

Question

I basically want that even if the kivy app window changes the size ratios and relationships will stay the same so I know both conputer and phone users have the same UI

I am a begginer so I dont really know how to fully use kivy...

the kv code is `<input_field>: text_field:text_field space:space

RelativeLayout:
    # Image at the bottom (adjust based on your image size)
    Image:
        id: space
        source: "text place.png"  
        pos_hint: {"bottom": 0}  # Position
        size_hint_y: 1
        size_hint_x: 1
        pos_hint: {"center_x": 0.5, "center_y": 0.68} #Position in the center

    # TransparentTextInput positioned on top of the image
    TransparentTextInput:
        id: text_field
        text: "Username"
        on_focus: text_field.text = "" if text_field.text == text_field.text else text_field.text
        on_text: text_field.text = "" if text_field.text == "" else text_field.text  
        multiline: False  
        pos_hint: {"center_x": 0.6, "center_y": 0.22}  # Position in the center of the image
        font_size: 50
        foreground_color: [1, 1, 1, 0.7]

` when I add the whole setup as a widget, the image change the size of the window the image shifts its size and the text dosent, which causes the text to no longer be in the midle of the image and the text is way to big for the image

Answer 1

When using hints to size widgets, the widgets scale with the Window size. The text size does not. You can either programatically change the font_size, or use a fixed widget size when dealing with items with text.

Additionally, kivy.metrics, https://kivy.org/doc/stable/api-kivy.metrics.html#module-kivy.metrics, is useful so that sized object are the same size across platforms and screen resolutions.