Table of contents
1.
Introduction
2.
Buttons
3.
Shaping a button in kivy
3.1.
Approach
3.2.
Implementation
4.
Frequently Asked Questions
4.1.
What do you know about Kivy?
4.2.
What is the use of button in Kivy?
4.3.
How to decorate a button in kivy?
4.4.
How to change the background image of a button in kivy?
5.
Conclusion
Last Updated: Mar 27, 2024
Easy

Shaping a button in kivy using kv file

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Kivy is an open-source Python toolkit for quickly developing applications with novel user interfaces, like multi-touch apps. It is mainly used to create android applications, but it may also create desktop applications. In this blog, we'll look at how to shape and decorate a button in Kivy-created windows.

Buttons

In Kivy, a button is a type of label that triggers the corresponding actions when clicked. We can add functionalities to a button and design it.

Shaping a button in kivy

Widgets are by default rectangles, but utilizing the background_normal and background_down parameters of buttons, we can change the background of widgets and add a pair of images for the normal and down states of the button. 

To round the corners of the button in kivy, you must also be familiar with another property of the button, the border property.

Background_down: The background image of a button used when the button is clicked. It is a string property.

Background_normal: The background image of a button used when the button is not clicked. It is also a string property.

Border: BorderImage graphics instruction uses a border. Background_normal and background_down are also supported. Custom backgrounds are possible. It is a list of four values: (bottom, right, top, and left).

Approach

The basic approach to shaping a button in kivy is as follows:=

  1. import kivy, kivyApp
  2. import button, float layout
  3. set minimum version(optional)
  4. Create the Layout class
  5. Create App class
  6. Create .kv file:
    • Add Base class
    • Add Button properties
    • Add Image as a button
    • Round the corners of the button using the border property
  7. Return instance of the layout class.
  8. Run an instance of the class.

Implementation

Let's learn how to implement the above approach.

main.py

import kivy
   
# Restricting the version of kivy
kivy.require("1.9.1")

# Importing required classes
from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
   
# To change the kivy default settings we use this module config
from kivy.config import Config

Config.set('graphics', 'resizable', True)
 
# Creating the root widget
class Base(FloatLayout):
    pass
 
# Creating the image button in kivy
class MyButtonApp(App):

    def build(self):
        # Returning the instance of button class
        return Base()

if __name__ == "__main__":
    MyButtonApp().run()
You can also try this code with Online Python Compiler
Run Code

 

MyButton.kv

# Creating a styled button in kivy
<Base>:
    Button:
        text: 'Click me!'
 
        # Properties of button in kivy
        background_normal: 'normal.png' # Add image path here
        background_down: 'down.png'  # Add image path here
 
 
        # Adding background color to the button
        background_color: 0.1, 0.5, 0.5, 1
         
        size_hint: .3, .3
        pos_hint: {"x": 0.35, "y": 0.3}

 

Output:

Frequently Asked Questions

What do you know about Kivy?

Kivy is an open-source Python toolkit for quickly developing applications with novel user interfaces, like multi-touch apps. It is mostly used to create Android applications, but it may also be used to create desktop applications.

What is the use of button in Kivy?

In Kivy, a button is a type of label that triggers the corresponding actions when clicked. We can add functionalities to a button and design it.

How to decorate a button in kivy?

We can decorate a button in kivy by utilizing the background_normal and background_down parameters of buttons. We can round the corners of a button using the border property

How to change the background image of a button in kivy?

We can change the background image of a button using the background_normal and background_down functions.

Conclusion

This article extensively discussed how to shape and decorate a button in Kivy with examples. 

After reading this article, are you not feeling excited to read/explore more articles on Kivy? Don’t worry; Coding Ninjas has covered you. To learn, see  .kv file, Grid Layout in Kivy without .kv file, Animations in Kivy, and Ellipse in Kivy.

Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and AlgorithmsCompetitive ProgrammingJavaScriptSystem Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But if you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc; you must look at the problems, interview experiences, and interview bundle for placement preparations.

Nevertheless, you may consider our paid courses to give your career an edge over others!

Do upvote our blogs if you find them helpful and engaging!

Happy Learning!

Live masterclass