Different behaviour: Widget vs Button in a FloatLayout

[Geoffroy Lindas]

Hello,

I'm trying to get my head arround how Kivy is handling the layout of the widget. Especially when I use the kv language.

Here is an example:

FloatLayout:

Button:

text: "x"

size_hint: .5, .5

pos: 20, 20

Button:

text: "y"

size_hint: .5, .5

pos: 40, 40

Widget:

size_hint: .5, .5

pos: 60, 60

canvas:

Color:

rgb: 1, 0, 0

Rectangle:

size: self.size

Widget:

size_hint: .5, .5

pos: 80, 80

canvas:

Color:

rgb: 0, 1, 0

Rectangle:

size: self.size

As you can imagine I'm expecting to get the same kind of result regarding both the Button object and the Widget object. But here's the render of such test:

The pos attribute is only working for the button object.

Can you explain the logic behind that and maybe a solution to mix and match widget inside a layout?

Regards;

[ZenCODE]

The FloatLayout lays out widgets using the pos_hint as size_hint. Try using these properties instead of setting the pos and size to specific values.

https://kivy.org/doc/stable/api-kivy.uix.floatlayout.html

The thinking behind this is that it allows the layout to adapt more easily to different screen sizes and aspect ratios, whereas setting the pos and size manually is very inflexible, and looks different on different screens.

[Elliot Garbus]

You need to specify the position of the rectangle, as shown below.  The canvas is not a drawing area, but a list of drawing instructions.

Widget:
    size_hint: .5, .5
    pos: 80, 80

    text: 'trouble'

    canvas:
        Color:
            rgb: 0, 1, 0
        Rectangle:
            size: self.size

            pos: self.pos

[Geoffroy Lindas]

Thank to both of you for your input. I think I understand it a bit better. Also StackLayout is probably a solution to my layout ideas as well.

Best regards!