Kivy - How resize button on "x" in BoxLayout?

Question

I try to resize a button at the half of the width of the BoxLayout, but i don't know why that don't work on the 'x' axis.
Here my .kv file:

MainWidget:

<MainWidget>:
    BoxLayout:
        canvas.before:
            Color:
                rgba: (1,0,0,1)
            Rectangle:
                pos: self.pos
                size: self.size
        Button:
            text: "+"
            color: 0,0,0
            size_hint: .5, .5   << HERE
            pos_hint: {'center_x': .5,'center_y': .5}
            canvas.before:
                Color:
                    rgba: (1,0,1,1)
                Rectangle:
                    size: self.size
                    pos: self.pos

and what i got:

How can I resolve tis issue?

Answer 1

To have your button half the width/height of the BoxLayout you can set the size_hint to None, None, then set the width and height with the parent settings divided by 2. See example below:

Button:
    text: "+"
    color: 0,0,0
    size_hint: None, None
    width: self.parent.width/2
    height: self.parent.height/2
    pos_hint: {'center_x': 0.5, 'center_y': 0.5}
    canvas.before:
        Color:
            rgba: (1,0,1,1)
        Rectangle:
            size: self.size
            pos: self.pos

I also changed the BoxLayout to a FloatLayout so that the pos_hint can work properly.

Hope this helps!