Kivy Tutorial - Kivy Button with Callbacks

Kivy Tutorials

About Lesson

In this Kivy Tutorial we are going to talk about Kivy Button with Callbacks, we will learn that how you can create button in kivy and how you can connect button with the callbacks in kivy. kivy Button is a Label with associated actions that are triggered when the button is pressed (or released after a click/touch). To configure the button, the same properties (padding, font_size, etc) and sizing system are used as for the Label class.

There are two ways that you can create button in kivy, the first way is that you can create button using the kivy.uix.button module, and the second way is using the kivy design language, so first let’s just do the first way. also iam going to show you how to create callbacks for the kivy button.

This is the complete code for Kivy Tutorial – Kivy Button with Callbacks

from kivy.app import App
from kivy.uix .button import Button



#our main window class
class Window(App):
    def build(self):
        
        #we have create button
        button = Button(text = "Click Me",  size_hint =(.5, .25),  pos =(20, 20))
        
        #connected the click_me method with the button
        button.bind(on_press = self.click_me)
        return button



    #our callback that is connected with the button
    def click_me(self, value):
        print("Geekscoders.com")





if __name__ == "__main__":
    window = Window()
    window.run()

from kivy.app import App

from kivy.uix .button import Button

#our main window class

class Window(App):

def build(self):

#we have create button

button = Button(text = "Click Me", size_hint =(.5, .25), pos =(20, 20))

#connected the click_me method with the button

button.bind(on_press = self.click_me)

return button

#our callback that is connected with the button

def click_me(self, value):

print("Geekscoders.com")

if __name__ == "__main__":

window = Window()

window.run()

In the code first we have created our class that extends from the App class, after that we have created a button, and you need to give some parameters, like the text of the button size and position of the button.

 button = Button(text = "Click Me",  size_hint =(.5, .25),  pos =(20, 20))

1	button = Button(text = "Click Me", size_hint =(.5, .25), pos =(20, 20))

This code is for binding of our button with the click_me() method.

button.bind(on_press = self.click_me)

1	button.bind(on_press = self.click_me)

This is the method that we want when a user clicks on the button, we are going to just print something in the console.

    def click_me(self, value):
        print("Geekscoders.com")

1 2	def click_me(self, value): print("Geekscoders.com")

Run the complete code and this is the result.

Kivy Tutorial - Kivy Button with Callbacks — Kivy Tutorial – Kivy Button with Callbacks

Creating Button with KV Language

So now let’s create our button using kivy design language, this is our complete code for creating button using Kivy design language.

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


class MyWidget(Widget):
    pass


class ButtonWindow(App):
    def build(self):
        return MyWidget()


if __name__ == "__main__":
    window = ButtonWindow()
    window.run()

from kivy.app import App

from kivy.uix.widget import Widget

class MyWidget(Widget):

pass

class ButtonWindow(App):

def build(self):

return MyWidget()

if __name__ == "__main__":

window = ButtonWindow()

window.run()

So you can see at the top i have created a new class, that class extends from Widget base class, now it is good idea to create our Widget class. and for right now i have not added anything in this class, but we will add our callback for this button in this class, also we have returned this class in our main window class.

And this is our kivy file, make sure that your kivy file name should be buttonwindow.kv, because our main class is ButtonWindow.

#:kivy 1.10.0


<MyWidget>:
    Button:
        text: "GeeksCoders"
        pos: 100, 100
        size: 140, 70
        color: .5,.7,0,1
        font_size: 20

#:kivy 1.10.0

<MyWidget>:

Button:

text: "GeeksCoders"

pos: 100, 100

size: 140, 70

color: .5,.7,0,1

font_size: 20

So in the kivy file first of all we have added the kivy version, after that we are going to write the class that we want to define rules, in our case it is MyWidget. and we have added our button with some attributes like position, size, color and font size. also pay attention in your kivy file indentation.

Run the complete code and this is the result.

Adding Callbacks to Kivy Button

Now let’s add callbacks for our button, let’s change our python file and add a new method in our MyWidget class like this for our callback. we will connect this method in our kivy file with our button.

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

class MyWidget(Widget):


    def click_me(self):
        print("You clicked me .. ")
        self.mylabel.text ="Change to Geekscoders.com"


class ButtonWindow(App):
    def build(self):
        return MyWidget()




if __name__ == "__main__":
    window = ButtonWindow()
    window.run()

from kivy.app import App

from kivy.uix.widget import Widget

class MyWidget(Widget):

def click_me(self):

print("You clicked me .. ")

self.mylabel.text ="Change to Geekscoders.com"

class ButtonWindow(App):

def build(self):

return MyWidget()

if __name__ == "__main__":

window = ButtonWindow()

window.run()

We have added a method of click_me() in out class, basically using this method when a user clicks on the kivy button i want to change the text of the label.

Now this is our updated kivy file. so the new thing in this file is that we have added a new widget of label, also we have added an id to the label, after that you need to reference the label in our MyWidget rules. also you can see we have a new thing in our Button, that is on_press.

#:kivy 1.10.0


<MyWidget>:
    mylabel:label
    Button:
        text: "Click Me"
        pos: 100, 100
        size: 120, 50
        color: .5,.7,0,1
        font_size: 20
        #on_press: print("The Button Is Pressed")
        on_press: root.click_me()

    Label:
        id:label
        text: "Iam a label"
        pos:200,200

#:kivy 1.10.0

<MyWidget>:

mylabel:label

Button:

text: "Click Me"

pos: 100, 100

size: 120, 50

color: .5,.7,0,1

font_size: 20

#on_press: print("The Button Is Pressed")

on_press: root.click_me()

Label:

id:label

text: "Iam a label"

pos:200,200

Using on_press we have connected our kivy code with our method in the Python code.

on_press: root.click_me()

1	on_press: root.click_me()

Run the complete code and this is the result.