How to use pos_hint with FloatLayout in kivy?

Question

I am trying to align labels and button in my test UI this is my kv file

<test>:   

    Label:        
        text: "foo"
        color: 0,1,0,1
        #pos:120,20
        pos_hint:{"right":0.1,"top":1}
    Label:
        text:"boo"
        color: 0,0,1,1
        #pos:80,20
        pos_hint:{"right":0.1,"top":0.5}

    Label:
        text:"bar"
        color: 1,0,0,1
        #pos:20,120
        pos_hint:{"right":0.1,"top":0.1}
    Button:
        text:"goo"
        size_hint:0.1,0.1

I am able to succesfully create labels foo,boo and bar using pos but when I used pos_hint it returns blank output?

score 9 · Accepted Answer · edited Jul 14 '17 at 12:53

You are getting "blank" output because the text of the labels is off screen (and the labels themselves are transparent).

Since your layout <test> has no size_hint so it takes on the default of (1,1) which makes it the size of the Window (which is 800 x 600).
Your labels also don't have a size_hint so they default to the size of their parent - the layout, so they end up having size [800, 600]. The text in the labels is centered by default, and their background is transparent. (maybe you should try this with buttons first so you have a visual representation of the sizes)
Thus, the text a label with pos = (0,0) will appear in the center of the screen

Then we have the pos_hint taking different arguments (the below description might not be accurate for things outside of a FloatLayout):

pos_hint:{"right":v1,"top":v2} sets the pos to (self.parent.right*v1 - self.width, self.parent.top*v2 - self.height) - you are setting the top and right of the widget you are placing. Thus your labels get such negative coordinates that their texts never appear on screen (because bottom left is 0,0)

then we have pos_hint:{"x":v1,"y":v2} (which you may find more useful for your case), and pos_hint:{"center_x":v1,"center_y":v2}. You should be able to figure out how they work bearing in mind that the size affects how things looks, since pos only sets the bottom left coordinate.. you can play around with this .kv file:

#:kivy 1.0.9

<test>:   
    #size: (500, 500)
    #size_hint:(None, None)
    canvas:
        Color: 
            rgb: 1,0,0
        Rectangle:
            size: (5,5)
            pos: (0,0)

    Widget:
        id:wig
        pos: (250,250)
        canvas:
            Color: 
                rgb: 1,1,1
            Rectangle:
                size: (5,5)
                pos: self.pos

    Label:
        id: boo
        text:"boo"
        color: 0,0,1,1
        #size_hint:(1,1)
        pos_hint:{"center_x":1,"center_y":1}

    Label:
        id: foo
        text: "foo"
        color: 0,1,0,1
        #size_hint: (.6,.6)
        pos_hint:{"x":1,"y":1}

    Label:
        id: bar
        text:"bar"
        color: 1,0,0,1
        #size:(500,500)
        #size_hint:(None, None)
        pos_hint:{"right":1,"top":1}
        #pos:100, 10


    Button:
        text:"goo"
        size_hint:0.1,0.1
        pos:(1,1)
        #some debug info, i know the code is ugly
        on_press: print self.parent.size,'\n', self.parent.right, self.parent.top, self.parent.x, self.parent.y, self.parent.center_x, self.parent.center_y, "\n","bar_right_top:", bar.pos,"foo_x_y:", foo.pos,"boo_center:", boo.pos, "\nwhite square:", wig.pos, "\n", bar.size, foo.size, boo.size

Is it possible to use `pos_hint:{'right': 1 - self.width, 'top': 0.5 - (self.height / 2)`? I have no problem to use calculations like `'top': 0.4 + 0.1}` but with self.height or width the button always disappears. — Alex_P, Mar 04 '19 at 12:59
@Alex_P The button is off-screen. All of the `pos_hint`s expect values between 0 and 1, and your calculations leave that area as soon as you have a widget size larger than 1x1. — Kateba, Jul 10 '19 at 14:40
The suggestion to `try this with buttons first so you have a visual representation of the sizes` really helped me out today. +1 — Drake P, Jun 18 '21 at 23:37

How to use pos_hint with FloatLayout in kivy?

1 Answers1