FloatLayout for Dynamic Placement

This kivy tutorial will cover how to dynamically place elements using a float layout. A float layout is especially useful when designing apps to run on a variety of screen sizes.

FloatLayout

Just like we used a GridLayout in the previous tutorials we will use a FloatLayout to store and place our widgets. The first thing we need to do to use a FloatLayout is import it.

from kivy.uix.floatlayout import FloatLayout

A FloatLayout allows us to place elements using something called a relative position. This means that rather than defining specific coordinates we will place everything using percentages or based on the current window width and height. This way when we change the window dimensions everything we have placed will adjust size and position accordingly making our application scale to the size of the window.

The Python Script

We will be placing and defining the positions for widgets from our .kv file therefore we can remove everything from our python file except the main components that run the application. The only major change we will make is to return a new FloatLayout from inside the build() method in our MyApp class.

import kivy
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout


class MyApp(App):
    def build(self):
        return FloatLayout()


if __name__ == "__main__":
    MyApp().run()

Adding Elements to a Float Layout

In the last tutorial we had a class that stored all of our widgets. In this tutorial we will simply add things directly to a FloatLayout rather than creating a new class that inherits from this. To access the layout we will simply use the tag <FloatLayout>. Anything indented underneath this tag will appear and change our FloatLayout.

To add two buttons to our layout we do the following.

<FloatLayout>:
    Button:
        text: "Tech With"

    Button:
        text:"Tim"

If we want to define properties that each of our buttons will have without repeating them we can do the following:

<Button>:
    font_size: 40
    color: 0.1,0.5,0.6,1


<FloatLayout>:
    Button:
        text: "Tech With"

    Button:
        text:"Tim"

Now each of our buttons will have a font-size of 40 and text color! We can apply this logic to any widgets.

Dynamic Placement

If you've run the code we've written so far you may have realized that our application is far from perfect. We still need to add the placement for our buttons! The two properties we will use to create a dynamic placement are:

- pos_hint

- size_hint

Note 1: You can only use values between 0-1 for both size_hint and pos_hint. Where 0 = 0% and 1 = 100%.

Note 2: The coordinate system in kivy works from the bottom left! This will be important when placing our objects.

To create a dynamic size for our buttons we will set the size_hint for each of our buttons to be 0.5, 0.5 . This will make each of our buttons take up 50% width and 50% height of the container they are in.

When creating a dynamic position we can define up to 6 keys in a dictionary like so:

pos_hint = {"x":1, "y":1, "left":1, "right":1, "top":1, "bottom":1}

See the video for a more detailed explanation of how to use each key. Again the values for each of these keys can only be between 0 and 1.

The following code produces a window that has two buttons. One in the top left and one in the top right.

<Button>:
    font_size: 40
    color: 0.1,0.5,0.6,1
    size_hint: 0.5,0.5

<FloatLayout>:
    Button:
        text: "Tech With"
        pos_hint: {"x":0.5, "top":1}

    Button:
        text:"Tim"

Notice that when resizing the window this layout is preserved. For some more examples of how to use this please refer to the end of the video.

Changing Properties Based on State The last thing to show in this tutorial is how to change an objects properties based on its state. For example changing the text on a button while it is clicked.

To do this we can check the current state of the button and adjust its text accordingly.

<Button>:
    font_size: 40
    color: 0.1,0.5,0.6,1
    size_hint: 0.5,0.5

<FloatLayout>:
    Button:
        text: "Tech With"
        pos_hint: {"x":0.5, "top":1}

    Button:
        id: btn
        text:"Tim" if btn.state == "normal" else "down"

Now when we are clicking the button its text will be changed to "down".

Full Code

The .kv file is the same as the one directly above.

import kivy
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout


class MyApp(App):
    def build(self):
        return FloatLayout()


if __name__ == "__main__":
    MyApp().run()