Kivy FloatLayout – Python Kivy GUI Tutorial #13

In this video I’ll show you how to use the FloatLayout with Kivy to position the things in your app.

Float Layout allows you to position things very precisely on your app. We do that using size_hint (which takes a width and height argument) and pos_hint (which is a dictionary that can take 6 arguments – x, y, top, bottom, left, and right).

With the float layout, you can move things around your app, or float them around your app any way you like!

Python Code: float_layout.py
GitHub Code: float_layout.py

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty
from kivy.lang import Builder
from kivy.core.window import Window
#from kivy.uix.floatlayout import FloatLayout

# Designate Our .kv design file 
Builder.load_file('float_layout.kv')

class MyLayout(Widget):
	pass

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

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

Kivy Design Code: float_layout.kv
GitHub Code: float_layout.kv

<Button>
	font_size: 32
	size_hint: (0.3, 0.3)

<MyLayout>
	
	FloatLayout:
		size: root.width, root.height
	
		
		Button:
			text: "Top Left"
			# {"x", "y", "top", "bottom", "left", "right"}
			pos_hint: {"x":0, "top":1}
		
		Button:
			text: "Top Right"
			pos_hint: {"x":.7, "top":1}
		Button:
			text: "Center"
			pos_hint: {"x":0.35, "top":0.66}

		Button:
			text: "Bottom Left"
			pos_hint: {"x":0}

		Button:
			text: "Bottom Right"
			pos_hint: {"x":.7, "bottom":1}