”;
In Kivy, FloatLayout gives you complete control over the placement of widgets. It enforces no restrictions on how a widget is positioned and how it is sized. FloatLayout honors the “pos_hint” and the “size_hint” properties
of its children.
The FloatLayout class is defined in the “kivy.uix.floatlayout” module.
from kivy.uix.floatlayout import FloatLayout layout = FloatLayout(**kwargs)
You can specify the layout size with size parameter. It is a tuple of width and height in pixels.
layout = FloatLayout(size=(300, 300))
When a widget is placed in a FloatLayout object with add_widget() method, will adopt the same size as the layout.
You can specify “size_hint”, “pos_hint”, “pos” and “size” properties to define the size and position of a widget in FloatLayout.
button = Button( text=''TutorialsPoint'', size_hint=(.4, .3), pos=(100, 100))
This will position a button at 100,100 coordinates (measured from bottomleft) and of size 40% of the layout width, 30% of layout height.
FloatLayout supports the two main methods, inherited from the Widget class: add_widget() and remove_widget().
The basic usage of FloatLayout is shown below −
class FloatApp(App): def build(self): flo = FloatLayout() l1 = Label(text="TutorialsPoint") flo.add_widget(l1) return flo
You can also use the “kv” file to populate the application window as shown below −
FloatLayout: Label: text : ''TutorialsPoint''
Example
Let us design a form with three labels, three text input boxes − one which is a multiline text box, and a submit button.
A FloatLayout object is used for the purpose. The labels are placed at 200 px as x-coordinate value, the text boxes at 400 px as x coordinate value. Labels and text boxes have width that is 10% of the layout. The single
button is placed horizontally in the center.
from kivy.app import App from kivy.uix.label import Label from kivy.uix.button import Button from kivy.uix.textinput import TextInput from kivy.uix.floatlayout import FloatLayout from kivy.graphics import Color, Rectangle from kivy.core.window import Window Window.size = (720,350) class FloatApp(App): def build(self): flo = FloatLayout() l1 = Label( text="Name", size_hint=(.2, .1), pos=(200, 350), color = [1,1,1,1] ) with l1.canvas: Color(0, 1, 0, 0.25) Rectangle(pos=l1.pos, size=(350, 50)) flo.add_widget(l1) t1 = TextInput(size_hint=(.4, .1), pos=(400, 350)) flo.add_widget(t1) l2 = Label( text="Address", size_hint=(.2, .1), pos=(200, 250),color = [1,1,1,1] ) with l2.canvas: Color(0, 1, 0, 0.25) Rectangle(pos=l2.pos, size=(350, 50)) flo.add_widget(l2) t2 = TextInput( multiline=True, size_hint=(.4, .1), pos=(400, 250) ) flo.add_widget(t2) l3 = Label( text="College", size_hint=(.2, .1), pos=(200, 150), color = [1,1,1,1] ) with l3.canvas: Color(0, 1, 0, 0.25) Rectangle(pos=l3.pos, size=(350, 50)) flo.add_widget(l3) t3 = TextInput(size_hint=(.4, .1), pos=(400, 150)) flo.add_widget(t3) b1 = Button( text=''Submit'', size_hint = (.2, .1), pos_hint = {''center_x'':.5, ''center_y'':.09} ) flo.add_widget(b1) return flo FloatApp().run()
Output
When you run this code, it will produce an output window like this one −
Note that the labels are given background color by drawing a rectangle on the label canvas with RGBA color value (0, 1, 0, 0.25).
If you wish to use a “kv” file instead of designing the UI in the build() method, here is the “kv” language script −
FloatLayout: Label: id:l1 text:"Name" size_hint:(.2, .1) pos:(200, 350) color : [1,1,1,1] canvas: Color : rgba: 0, 1, 0, 0.25 Rectangle: pos:self.pos size : (350, 50) Label: id:l2 text:"Address" size_hint:(.2, .1) pos:(200, 250) color : [1,1,1,1] canvas: Color : rgba: 0, 1, 0, 0.25 Rectangle: pos:self.pos size : (350, 50) Label: id:l3 text:"College" size_hint:(.2, .1) pos:(200, 150) color : [1,1,1,1] canvas: Color : rgba: 0, 1, 0, 0.25 Rectangle: pos:self.pos size : (350, 50) TextInput: id:t1 size_hint:(.4, .1) pos:(400, 350) TextInput: id:t2 multiline:True size_hint:(.4, .1) pos:(400, 250) TextInput: id:t3 size_hint:(.4, .1) pos:(400, 150) Button: id:b1 text:''Submit'' size_hint : (.2, .1) pos_hint : {''center_x'':.5, ''center_y'':.09}
”;