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.

filter_none

edit
close

play_arrow

link
brightness_4
code

# 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()

chevron_right


.kv file implementation of the Approach

filter_none

edit
close

play_arrow

link
brightness_4
code

# .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

chevron_right


Output:

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



My Personal Notes arrow_drop_up

Competative Programmer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.