Working with Buttons in kivy

Introduction

When creating applications, we cannot overlook an element that is present in almost every component of the application. That is the button. Kivy is an independent GUI tool in Python that can be used to create Android, IOS, Linux, and Windows applications. Kivy provides the functionality to write the code for once and run it on different platforms. Though, most applications built on kivy are Android applications we can use it for desktop applications as well. 

Thus, in this blog, we will learn how we can create a button that will be associated with actions that are triggered once we click on the button. Also, we can style our buttons to suit the UI of our Applications as well as create and associate functions with them. Making it one of the most important components in any Application.

Creating Buttons

When creating any button there are basically 3 phases to it:

• Creating a button
• Styling the button
• Binding a function to it

We will learn about the above steps using the button import in kivy and then extending the class to add and return a button.

Creating a Button

Before we create a button in kivy we first need to import the kivy and the kivy app, along with the button library from which we will create a class that will be extended to create a separate button for us. Then we simply return it after wrapping it in a container.

Example

#import the kivy module
import kivy

#this makes sure the kivy module is 1.9.1 or higher
kivy.require("1.9.1")

#we inherit the class of our app from the app class
from kivy.app import App

#creates buttons in kivy using the button module
from kivy.uix.button import Button

#class in which we create our button
class testButton(App):
    def build(self):
        #a button with the text "Hello World" is created
        testBtn = Button(text = "Hello World")
        return testBtn

#creating the object root for ButtonApp() class
root = ButtonApp()

#run method is called and executes the function to the constructor.
root.run()

You can also try this code with Online Python Compiler

Run Code

Styling a Button

The above-created covers the whole screen because the size and other style aspects are not mentioned in the code of the testBtn created. Now we need to provide some styling to the button created in order to make it suitable for our UI.

Example

def build(self):
    testBtn = Button(text = "Hello World",
font_size = "10sp",
size = (20,20),
pos = (300.300))
    return testBtn

You can also try this code with Online Python Compiler

Run Code

Binding Function to Button

Now that our button looks a bit better, we now move on to functionalities. However, adding functionalities in kivy is done using another method known as the bind() function. The bind function receives the result of the function call mentioned in it and when the button is pressed it executes the result of the function callback.

Example

#import the kivy module
import kivy

#this makes sure the kivy module is 1.9.1 or higher
kivy.require("1.9.1")

#we inherit the class of our app from the app class
from kivy.app import App

#creates buttons in kivy using the button module
from kivy.uix.button import Button

#class in which we create our button
class testButton(App):
    def build(self):
        #a button with the text "Hello World" is created
        testBtn = Button(text ="Hello World",
                  font_size ="10sp",
                  size =(20, 20),
                  size_hint =(0.4,0.4),
                  pos =(250, 200))

#bind the callback to testBtn with event on_press
            testBtn.bind(on_press = self.callback)
        return testBtn
    #define the callback 
    def callback(self, event):
        print("Hello World Again")

#creating the object root for ButtonApp() class
root = ButtonApp()

#run method is called and executes the function to the constructor.
root.run()

You can also try this code with Online Python Compiler

Run Code

Now, we have created a button with all of its aspects.

Output