Kivy - centering BoxLayout

Question

I'm learning Kivy and I'm trying to center the main vertical BoxLayout with the content (boxlayouts, text, inputs, image, ...). The root window is 1200px wide and the BoxLayout is 1000px.

I tried to use AnchorLayout instead of the BoxLayout but the content goes out of the window or everything goes in the corner, and I can't make it centered.

Also, the content could be higher than the root window. How can I make that it doesn't follow the root height?

Can someone help me on this?

Here is the Py file:

Import kivy
from kivy.app import App
from kivy.core.window import Window
Window.size = (1440, 720)
from kivy.uix.widget import Widget
from kivy.uix.gridlayout import GridLayout
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput
from kivy.uix.image import Image
from kivy.core.window import Window

class Exec(Widget):
     def __init__(self, **kwargs):        
         super(Exec, self).__init__(**kwargs)  

class TC(App): 
    def build(self):
        Window.clearcolor = (25/255,26/255,25/255,0)
        return Exec()
    
if __name__ == '__main__':
    TC().run()

And KV file...

<Exec>
BoxLayout:
    orientation: 'vertical'
    BoxLayout:
        size: 1000, 700
        position_hint: {'center_x':0.5, 'center_y':0.5}
        orientation: 'vertical'
        position_hint: None, None
        position_x: 150
        GridLayout:
            cols: 2
            size_hint_y: None
            height: 75
            Image:
                source: 'traffic-light.png'
                size: self.texture_size
                size_hint_x: None
                size_hint_y: None
                width: 120
                height: 50

            Label:
                multiline: True
                font_size: 24
                markup: True
                text: "[b]Intelligent Traffic Control System[/b] \n[size=18][color=b4afaf]Developed for testing purposes only[/color][/size]"
                text_size: self.size
                halign: 'left'

        GridLayout:
            cols: 3
            size_hint_y: None
            height: 150
            Label:
                text: "Deviation"
                font_size: 18
                text_size: self.size
                halign: 'left'
            Label:
                text: "Deviation muliplier"
                font_size: 18
                text_size: self.size
                halign: 'left'
            Label:
                text: "Envelope Inflate [+]/ Deflate [-]"
                font_size: 18
                text_size: self.size
                halign: 'left'
            TextInput:
                multiline:False
                font_size: 32
                foreground_color: (1,1,1,1)
                background_color: (25/255,26/255,25/255,0)
            TextInput:
                multiline:False
                font_size: 32
                foreground_color: (1,1,1,1)
                background_color: (25/255,26/255,25/255,0)
            TextInput:
                multiline:False
                font_size: 32
                foreground_color: (1,1,1,1)
                background_color: (25/255,26/255,25/255,0)

        GridLayout:
            cols: 3
            Label:
                text: "Week days"
                font_size: 18
            Label:
                text: "Saturday"
                font_size: 18
            Label:
                text: "Sunday"
                font_size: 18

        GridLayout:
            cols: 3
            size_hint_y: None
            height: 75
            Label:
                text: "Generate random envelope"
                font_size: 18
            TextInput:
                multiline:False
                font_size: 24
            Button:
                text: "Create & Save"

Here are the cropped images with content on how it should be but not entered and one where everything goes in the corner.

Thnx!

Try using `position_hint: {'center_x':0.5, 'center_y':0.5}` in the `BoxLayout`. — John Anderson, Jan 11 '21 at 00:14
I tried the line you suggested, but again everything goes in the lower-left corner. — Wooxy, Jan 11 '21 at 17:41
Sorry, but it's cornered again... I've added the images above. it looks like everything is put in the side space which should be empty. — Wooxy, Jan 11 '21 at 17:53
I've updated the question with complete py and KV codes. Thanks for the effort! — Wooxy, Jan 11 '21 at 18:12
I've added the comment but I can't see it....here it goes once more time.... the question is updated with complete PY and KV files. — Wooxy, Jan 11 '21 at 18:37

score 0 · Accepted Answer · answered Jan 11 '21 at 21:59

0

The problem is that your Exec class extends Widget, which is not intended to be used as a container. Try changing your Exec definition to:

class Exec(FloatLayout):
    pass

answered Jan 11 '21 at 21:59

John Anderson

35,991
4
13
36

Kivy - centering BoxLayout

1 Answers1