The Kivy Builder – Python Kivy GUI Tutorial #6

In this video we’ll look at the Kivy Builder. In the last video we talked about the Kivy Design Language as a way to separate our design code from our functional app code, and we did that by creating a .kv file with the same name as our app’s main Class.

In this video I’ll show you how to create a kivy design file and name it anything you want, regardless of the name of your app’s main class.

Then, we’ll let our app know which .kv design file to use by using the Builder.

There are two Builder methods, load_file and load_string, and we’ll discuss both of them in this video!

Python Code: builder.py

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty
from kivy.lang import Builder

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

# Just load our .kv design stuff right here
'''Builder.load_string(""" 

<MyGridLayout>
	
	name:name
	pizza:pizza
	color:color

	GridLayout:
		cols:1
		size: root.width, root.height
		GridLayout:
			cols:2

			Label:
				text: "Name"
			TextInput:
				id: name
				multiline:False

			Label:
				text: "Favorite Pizza"
			TextInput:
				id: pizza
				multiline:False
				
			Label:
				text: "Favorite Color"
			TextInput:
				id: color
				multiline:False	

		Button:
			text: "Submit"
			font_size: 32
			on_press: root.press()



	""")
'''
class MyGridLayout(Widget):
	
	name = ObjectProperty(None)
	pizza = ObjectProperty(None)
	color = ObjectProperty(None)


	def press(self):
		name = self.name.text
		pizza = self.pizza.text
		color = self.color.text

		#print(f'Hello {name}, you like {pizza} pizza, and your favorite color is {color}!')
		# Print it to the screen
		#self.add_widget(Label(text=f'Hello {name}, you like {pizza} pizza, and your favorite color is {color}!'))
		print(f'Hello {name}, you like {pizza} pizza, and your favorite color is {color}!')
		# Clear the input boxes
		self.name.text = ""
		self.pizza.text = ""
		self.color.text = ""

class AwesomeApp(App):
	def build(self):
		return MyGridLayout()


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

Kivy Design Code: whatever.kv

<MyGridLayout>
	
	name:name
	pizza:pizza
	color:color

	GridLayout:
		cols:1
		size: root.width, root.height
		GridLayout:
			cols:2

			Label:
				text: "Name"
			TextInput:
				id: name
				multiline:False

			Label:
				text: "Favorite Pizza"
			TextInput:
				id: pizza
				multiline:False
				
			Label:
				text: "Favorite Color"
			TextInput:
				id: color
				multiline:False	

		Button:
			text: "Submit"
			font_size: 32
			on_press: root.press()