Using Images As Buttons – Python Kivy GUI Tutorial #35

In this video I’ll show you how to use images for buttons in your Kivy App.

Chances are, you’re going to want to use images as buttons in your app. It’s pretty easy to do that, and I’ll show you how in this video.

Just give your Button an Image, with a source pointing to the image. Then change the size of your button to fit the size of your image. Give your button an on_press and an on_release and you’re good to go!

Python Code: button_image.py
GitHub Code: button_image.py

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

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

class MyLayout(Widget):
	def hello_on(self):
		
		self.ids.my_image.source = 'images/login_pressed.png'

	def hello_off(self):
		self.ids.my_image.source = 'images/login.png'
		self.ids.my_label.text = "You Pressed The Button!"
		
class AwesomeApp(App):
	def build(self):
		return MyLayout()

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

Kivy Design Code: button_image.kv
GitHub Code: button_image.kv

<MyLayout>
	BoxLayout:
		orientation: "vertical"
		size: root.width, root.height
		
		padding: 50
		spacing: 20

		Label: 
			id: my_label
			text: "Hello World!"
			font_size: 32
		
		Button:
			# text: "Hello"
			# font_size: 32
			size_hint: .15, .12
			pos_hint: {'center_x': 0.5}
			background_color: 0,0,0,0

			on_press: root.hello_on()
			on_release: root.hello_off()

			Image:
				id: my_image
				source: 'images/login.png'
				center_x: self.parent.center_x
				center_y: self.parent.center_y
				size: root.width, root.height