Victor Sued Victor Sued - 2 months ago 16
Python Question

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'

Answer

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