FloatLayout in Python Kivy App

FloatLayout in Python Kivy App

In Python Kivy, Creating FloatLayout is very easy. FloatLayout allows any element inside it to “FLOAT”! Meaning the Elements can be placed in any given location with just the use of ‘Coordinate’ System. You can also control the Elements Present inside the FloatLayout with respect to the ‘size_hint’ and ‘pos_hint’. Both these variables and its usages are explained as part of the example Application below.

Creating a Simple FloatLayout in Python Kivy

The below Example is used to create a Layout which has the Parent inside it to be a Floating Structure. The Final Output is an easy to control Image that is placed at a 600,600 position. This is a Brute Coordinate meaning, the image is placed in such a way that the top-left of the image is placed at 600, 600 X, Y Coordinate.

FloatLayout – Key Points to Know

  • Elements inside the FloatLayouts can have overlapping coordinates. The Layout does not worry that there is already a widget present in the given coordinates. It places the widget on top of the other.
  • FloatLayout elements ‘pos_hint’ and ‘size_hint’ are very handy and often used. They automatically position the widget based on the size of the screen. Automatically positioning the child Widget is done by the Kivy engine and the developer does not have to worry about the Screen sizes while working with FloatLayout

from kivy.app import App
from kivy.uix.button import *
from kivy.uix.gridlayout import GridLayout
from kivy.uix.image import AsyncImage
from kivy.core.window import Window
from kivy.uix.label import Label
from kivy.uix.floatlayout import FloatLayout


class MyLayout(GridLayout):

    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.cols = 1

        self.add_widget(AsyncImage(source="https://homepages.cae.wisc.edu/~ece533/images/airplane.png"))
        self.bottom_layout = FloatLayout(size=(600, 600))
        self.ans_1 = Button(text="Ans 1",
                   background_color=(0.1, 0.5, 0.3, 1),
                   size_hint=(0.2, 0.2),
                   pos_hint={'x': 0.3, 'y': 0.5}
                   )
        self.ans_1.bind(on_press=self.ans_correct_callback)
        self.bottom_layout.add_widget(
            self.ans_1
        )
        self.ans_2 = Button(
            text="Ans 2",
            background_color=(0.1, 0.5, 0.3, 1),
            size_hint=(0.2, 0.2),
            pos_hint={'x': 0.5, 'y': 0.5}

        )
        self.ans_2.bind(on_press=self.ans_correct_callback)
        self.bottom_layout.add_widget(self.ans_2)
        self.add_widget(self.bottom_layout)

    def ans_correct_callback(self, instance):
        print(f"This button was called - {instance.text}")


class MyKivyApp(App):

    def build(self):
        Window.clearcolor = (1,1,1,1)
        return MyLayout()

    def on_start(self):
        print("This method on start is fired!!!!!!!!")

    def on_stop(self):
        print("This method is called after the app ends")


if __name__ == '__main__':
    MyKivyApp().run()

 

To know more about Float Layouts in Python Kivy, the Below Video explains the end to end usage in detailed fashion.

Leave a Comment