CODEWITHSUNDEEP
pythonkivy
Victor Sued
Victor Sued

Reputation: 33

I cant align FloatLayout in center in Kivy

Iam tried align floatlayout in center, help-me? Uploaded image for understanding... My idea is recreate layout Windows 8 retro in Kivy, after add icons windows 8 retro in button.

enter image description here

My kv file:

<SMAgro>:
    AnchorLayout:
        anchor_x: 'center'
        anchor_y: 'center'
        FloatLayout:
            canvas:
                Color:
                    rgb: [1,1,1,1]
                Rectangle:
                    pos: self.pos
                    size: self.size
            Button:
                background_color: [.4,1,.1,1]
                pos_hint: {'x': 0.26, 'y': 0.328571}
                size_hint: 0.45, 0.3
                text: "Equipamentos"
#                StackLayout:
#                    pos: self.parent.pos
#                    size: self.parent.size
#                    orientation: 'lr-tb'
#                    Image:
#                        source: 'kivy.png'
#                        size_hint_x: None
#                        width: 74
#                    Label:
#                        size_hint_x: None
#                        width: 100
#                        text: "Equipamentos"

            Button:
                background_color: [.4,1,.1,1]
                pos_hint: {'x': 0.26, 'y': 0.15}
                size_hint: 0.225, 0.18
                text: 'Configuracoes'
            Button:
                background_color: [.4,1,.1,1]
                pos_hint: {'x': 0.486, 'y': 0.15}
                size_hint: 0.225, 0.18
                text: 'Sobre'

Upvotes: 0

Views: 2841

Answers (1)

Łukasz Olender
Łukasz Olender

Reputation: 68

You can set FloatLayout size and add pos_hint: {'center_y': 0.5, 'center_x': 0.5}, so for example: your widest button has size_hint_x = 0.45 and buttons have size_hint_y = 0.18 + 0.3.

Size of container: size_hint: 0.45, 0.48

Now, if button has size_hint: 1, 1, it's 100% width and height of parent container(FloatLayout) and it's equal to 45% width and 48% height of window.

This code shows centered FloatLayout

FloatLayout:
    pos_hint: {'center_y': 0.5, 'center_x': 0.5}
    size_hint: 0.45, 0.48
    canvas:
        Color:
            rgb: [1,1,1,1]
        Rectangle:
            pos: self.pos
            size: self.size
    Button:
        background_color: [.4,1,.1,1]
        pos_hint: {'x': 0, 'y': 0.375}
        size_hint: 1, 0.625
        text: "Equipamentos"
    Button:
        background_color: [.4,1,.1,1]
        pos_hint: {'x': 0, 'y': 0}
        size_hint: .5, 0.375
        text: 'Configuracoes'
    Button:
        background_color: [.4,1,.1,1]
        pos_hint: {'x': .5, 'y': 0}
        size_hint: .5, 0.375
        text: 'Sobre'

centered FloatLayout

Upvotes: 2

Related Questions