Positioning widgets in .kv file

[Sam Berry]

Hey,

I'm fairly new to python, and very new to Kivy. I want to be able to do all the layout aspects of the App within the .kv file to avoid using the python file. However I can't find any good tutorials on this, this is what I have so far, by manipulating example codes:

#:kivy 1.5.1

<Home>:

    canvas:

        Color:

            rgb: 0,0,.2

        Rectangle:

            size: self.size

    FloatLayout:

        Label:

            font_size: 28

            text:

                ('[b]Sports[/b] [color=00FF00]Cam[/color]')

            markup: True

    BoxLayout:

        size_hint: .5, None

        height: 150

        pos_hint: {'center_x': .5}

        orientation: 'vertical'

        Button:

            text: 'Camera Stream 1'

            on_release: root.manager.current = 'Camera 1'

        Button:

            text: 'Camera Stream 2'

            on_release: root.manager.current = 'Camera 2'

        Button:

            text: 'Record'

            on_release: root.manager.current = 'Record Page'

        Button:

            text: 'Settings'

            on_release: root.manager.current = 'Settings Page'

The sections i don't understand are the pos_hint and size_hint commands, for example iv been trying to get the Label: to be positioned at the top of the screen in the center above the buttons in the boxlayout. Iv looked at the info on the Kivy page but can't figure out how to do it. I know its probably very simple. If anyone could explain how to do this? or even know of a link which may help me understand how those commands can be used to arrange the GUI layout would be very useful!!!

Thanks, Sam

[krister viirsaar]

1.
size_hint: (0.5, 0.5)
this means, your current widget is going to be 50% the size of the parent widget.

pos_hint: {'x': 0.5, 'y': 0.5}
this works with the same logic, but I don't now more as I discovered this only today.

Hinting is esppecially good, if you want your widgets to scale accordingly to the screensize.

2.
To align widgets to the top-center use AnchorLayout
http://kivy.org/docs/api-kivy.uix.layout.html

3.
I also suggest you run ALL of the examples in your kivy folder. Then you know what is possible and also you'll know where to look for example code.

[Sam Berry]

Hey krister,

Thanks for the quick reply and the useful info! 

Iv just tried using the anchor layout, like so: 

    AnchorLayout:

        Label:

            anchor_x: 'center'

            anchor_y: 'top'

            font_size: 28

            text:

                ('[b]Sports[/b] [color=00FF00]Cam[/color]')

            markup: True

The App loads and opens in the window, but the Label is still positioned in the center of the screen (Behind the button boxes) can you see where I am going wrong?

Thanks, Sam

[krister viirsaar]

like this:

AnchorLayout:
    anchor_x: 'center'

happy to be of assistance