Search code examples
pythonkivykivy-languagekivymd

KivyMD objects are not centered with pos_hint


So in the picture you see that the label and button are at the very end of the screen but i would like that they are both in the middle of their half. Since they are added on a BoxLayout the center of the label has to be on 25% and the center of the icon on 75% on the screens width.

PROBLEM: The label and icon are at edge of window but size_pos should center them

Is the Problem the interaction between kivy Layouts and kivymd objects? I guess the Problem has to be inside DisconnectPage but just in case I shared the whole GUI part. I hope someone can help me.

Picture of my problem

CENTERED = {"center_x": 0.5, "center_y": 0.5}

class Main(BoxLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.client = self.setup_client()
        self.client.start_in_thread()
        self.disconnect_card = DisconnectPage(self)
        self.lb = MDLabel(text="No message", halign="center")
        self.btn = MDFillRoundFlatButton(text="send",on_release = self.send)
        self.add_widget(self.lb)
        self.add_widget(self.btn)
        Clock.schedule_once(self.check_disconnect)

    def check_disconnect(self,_):
        if self.client.thread.is_alive():
            return Clock.schedule_once(self.check_disconnect,1)
        self.open_disconnect_screen() 
    
    def setup_client(self):
        loop = asyncio.get_event_loop()
        ip = "127.0.0.1"
        port = 1337
        client = ClientObject(ip,port,loop,self)
        return client

    def send(self,_):
        self.client.schedule_message("Hello My Friends")

    def open_disconnect_screen(self):
        self.clear_widgets()
        self.add_widget(self.disconnect_card)

    def reload(self,_):
        print("reloading")

############### SHOWN IN IMAGE ####################
class DisconnectPage(BoxLayout):
    def __init__(self, main, **kwargs):
        super().__init__(**kwargs)
        self.main = main
        self.info = MDLabel(text="You disconnected", pos_hint = CENTERED)
        self.reconnect_btn = MDIconButton(icon="sync", on_release = self.main.reload, pos_hint = CENTERED)
        self.add_widget(self.info)
        self.add_widget(self.reconnect_btn)
############ SHOWN IN IMAGE #######################

class MyApp(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Dark"
        screen = Screen()
        main = Main()
        screen.add_widget(main)
        return screen

app = MyApp()
app.run()

Solution

  • The BoxLayout assigns its horizontal space among its children according to its own rules. So the MDIcon has a default size, and the BoxLayout allocates that space for the MDIconButton. Then all the remaining space is allocated for the MDLabel. The default text positioning (halign) within a Label is left, so you can center the text within the Label by using halign='center'. If you want more control over the positioning and sizing, consider using a FloatLayout.