Search code examples
pythonlayoutkivywidget

How to move Kivy widgets that live on the same row further apart?


I am trying to figure out a way to keep the three widgets I have in my main.kv file header setup and just move the two outside ones further to the edges of the screen. This is like a top banner that is displayed on every screen and houses the time, an 'home button' and a 'settings button'. I have an absolute dog's breakfast of a main.kv layout and I don't really know how to change it so that its fully functional and keeps the widgets visible. I will include the framework for the section I am talking about.

main.kv

GridLayout:
    cols: 1
    FloatLayout:
        GridLayout:
            canvas:
                Color:
                    rgb: utils.get_color_from_hex("#000523")
                Rectangle:
                    size: self.size
                    pos: self.pos
            rows: 1
            pos_hint: {"top": 1, "left": 1}
            size_hint: 1, .07
        GridLayout:
            rows: 1
            canvas:
                Color:
                    rgb: utils.get_color_from_hex("#000523")
                Rectangle:
                    size: self.size
                    pos: self.pos
            pos_hint: {"top": .93, "center_x": .5}
            size_hint: 1, .03
            ImageButton:
                id: home_button
                source: "icons/home.png"
                opacity: 1 if self.state == 'normal' else .5
                on_release:
                    app.change_screen("home_screen")
                    app.clear_results()
            Label:
                id: utc_time
                markup: True
                font_size: '20sp'
                text: ""
            ImageButton:
                id: settings_button
                source: "icons/cog.png"
                opacity: 1 if self.state == 'normal' else .5
                on_release:
                    app.change_screen("settings_screen")

I have found that bringing my three widgets back one tab (not under GridLayout but as a child of FloatLayout) allows me to reposition them out more to where I'd like. This doesn't work though because I am referencing them in my main.py and adding or removing these widgets with reference to current screen. The problem I keep getting is that it keeps wanting to add widgets on top of widgets. I will include that function as well.

main.py

def home_setting_widgets(self, screen_name):  # this is going to display the home and setting widgets once the app has already been opened
    home_button = self.root.ids["home_button"]
    utc_time = self.root.ids["utc_time"]
    settings_button = self.root.ids["settings_button"]
    grid_layout = self.root.children[0].children[2]
    if screen_name == "login_screen" or screen_name == "signup_screen" or screen_name == "welcome_screen":
        grid_layout.remove_widget(home_button)  # remove widgets if on the 3 screens listed
        grid_layout.remove_widget(utc_time)
        grid_layout.remove_widget(settings_button)
        self.home_and_setting = False
    else:
        if self.home_and_setting == False:
            grid_layout.add_widget(home_button)  # add widgets
            grid_layout.add_widget(utc_time)
            grid_layout.add_widget(settings_button)
            self.home_and_setting = True

I think the problem if I move them out of the one GridLayout is that they won't be referenced as a group but as individual widgets. I currently have them bunched and referenced in the grid_layout = self.root.children[0].children[2] line.

I have tried removing GridLayouts and their contents from main.kv, I have tried 'tabbing' the widgets to different spots, I have tried referencing the widgets in many different ways.

All I want to do is move the 'home button' and 'settings button' further apart slightly and it has me this stuck. If there is a way to move them without breaking everything, please tell me. Your help is much appreciated, thank you.

enter image description here


Solution

  • Try adding some spacing to the GridLayout that has the "Home", "Time", and "Settings"

    GridLayout:
        rows: 1
        spacing: 1000
        canvas:
    

    I can't get the image from kivy docs page to upload, but the GridLayout kivy docs has the "spacing" info you are for.