Build A Simple Calculator App – Python Kivy GUI Tutorial #15

In this video we’ll start to build a simple Calculator app with Kivy and Python.

In this video we’ll build out the main GUI for the Calculator App. We’ll also start to work on the functionality a bit, but making the ‘C’ or “Clear” button actually clear the text input box.

We’ll start out using a Box Layout with a Text Input box in it, then we’ll add a Grid Layout inside of that to hold all of the buttons for our Calculator.

Python Code: calc.py
GitHub Code: calc.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

# Set the app size
Window.size = (500,700)

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

class MyLayout(Widget):
	def clear(self):
		self.ids.calc_input.text = '0'


class CalculatorApp(App):
	def build(self):
		return MyLayout()

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

Kivy Design Code: calc.kv
GitHub Code: calc.kv

<MyLayout>
	BoxLayout:
		orientation: "vertical"
		size: root.width, root.height
		
		TextInput:
			id: calc_input
			text: "0"
			halign: "right"
			font_size: 65
			size_hint: (1, .15)

		GridLayout:
			cols: 4
			rows: 5

			# Row
			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "%"

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "CE"

			Button:
				id: clear
				size_hint: (.2, .2)
				font_size: 32
				text: "C"
				on_press: root.clear()
				
			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "/"

			# Row
			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "7"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "8"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "9"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "X"

			# Row
			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "4"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "5"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "6"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "-"

			# Row
			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "1"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "2"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "3"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "+"

			# Row
			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "+/-"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "0"
				background_color: (157/255, 157/255, 157/255, 1)

			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "."
				background_color: (157/255, 157/255, 157/255, 1)


			Button:
				size_hint: (.2, .2)
				font_size: 32
				text: "="