Python | Working with buttons in Kivy with .kv file

Kivy is a platform independent GUI tool in Python. As it can be run on Android, IOS, linux and Windows etc. It is basically used to develop the Android application, but it does not mean that it can not be used on Desktops applications.

Button:

The Button is a Label with associated actions that are triggered when the button is pressed (or released after a click/touch). We can add functions behind the button and style the button.

In this article, we are going to discuss how we can create the buttons using .kv file. We do a little bit of button styling also and also we define you how to bind a button to a callback.

To use button you must have to import :

import kivy.uix.button as Button

Basic Approach:

1) import kivy
2) import kivyApp
3) import Widget
4) import Button
5) Set minimum version(optional)
6) Create widget class:
          1) Arrange a callback
          2) Define Callback function
7) create App class
8) create .kv file (name same as the app class):
        1) create Widget
        2) Create Button
        3) Specify requirements
9) return Layout/widget/Class(according to requirement)
10) Run an instance of the class

One of the common problems is how to add functionality to the button. So to add functionality we use bind() function it binds the function to the button. bind() creates an event that is send to callback().

One of the most common problems for new Kivy users is misunderstanding how the bind method works, especially amongst newer Python users who haven’t fully formed their intuition about function calls.
The thing is that the bind method doesn’t know about the existence of a function or its arguments, it only receives the result of this function call. As in the given code when the button is pressed it prints that “button pressed” def in the function callback.

Code to implement the above Approach with button action and styling.

# import kivy module
import kivy

# this restrict the kivy version i.e
# below this kivy version you cannot
# use the app or software
kivy.require("1.9.1")

# base Class of your App inherits from the App class.
# app:always refers to the instance of your application
from kivy.app import App

# creates the button in kivy
# if not imported shows the error
from kivy.uix.button import Button

# Widgets are elements of a graphical user
# interface that form part of the User Experience.
from kivy.uix.widget import Widget


# Creating a widget class
# through this we add button
# the commands of the class is in .kv file
class Button_Widget(Widget):

    def __init__(self, **kwargs):

        # Python super() function allows us to
        # refer to the parent class explicitly.

        super(Button_Widget, self).__init__(**kwargs)

        # creating Button
        btn1 = Button(text ='Hello World 1', font_size ="15sp",
                   background_color =(1, 1, 1, 1),
                   color =(1, 1, 1, 1),
                   # size =(32, 32),
                   # size_hint =(.2, .2),
                   pos =(300, 250))

        # Arranging a callback to a button using
        # bind() function in kivy.
        btn1.bind(on_press = self.callback)
        self.add_widget(btn1)

    # callback function tells when button pressed
    # It tells the state and instance of button.
    def callback(self, instance):
        print("Button is pressed")
        print('The button % s state is <%s>' % (instance, instance.state))

# create App class
class ButtonApp(App):

    def build(self):
        # return the widget
        return Button_Widget()

# run the App
if __name__ == "__main__":
    ButtonApp().run()

.kv file implementation of the Approach

# .kv file of the main.py code
# Adding Button widget

<Button_Widget>:

    # defining Button size
    size: 100, 100

    # creating Canvas
    canvas.before:
        Color:
            rgba: 0.72, 0.62, 0.92, 1
        Rectangle:
            pos: self.pos
            size: self.size

Output:

Showing the button action picture:i.e on clicking on button you will get this output