Kivy Design Language – Python Kivy GUI Tutorial #5

In this video we’ll start to look at the Kivy Design Language.

The .kv design language allows us to abstract away the design elements of our app into a separate file, apart from our main Python code.

Think of it similar to HTML and CSS…kivy design language is similar to CSS (at least the concept of it).

In this video I’ll recreate our app using the kivy design language. You’ll see how easy it is!

Python Code: design.py

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.textinput import TextInput
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty

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 MyApp(App):
	def build(self):
		return MyGridLayout()


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

Kivy Design Code: my.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()