Python – Rounding button corners in kivy

14 Jan, 2021
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 Desktop applications.
In this article we will be going to learn how to round the button corners in kivy python.
Now one question arises – What is the preferred way to create rounded corners for buttons in kivy?
Basically, this is the tricky one. As we know Widgets are always a rectangle, but we can change the background of widgets and put a couple of images for the normal and the downstate of the button by using some properties of buttons like background_normal and background_down properties respectively. Also to round the corners of the button you also must have understood one more property of the button that is the border property. 
background_down : 1) Background image of the button used for the default graphical representation when the button is pressed. 2) background_down is a StringProperty.
background_normal : 1) Background image of the button used for the default graphical representation when the button is not pressed. 2) background_normal is also a StringProperty.
 border : 1) Border used for BorderImage graphics instruction. Used with background_normal and background_down. Can be used for custom backgrounds. 2) It must be a list of four values: (bottom, right, top, left). 3) border is a ListProperty and defaults to (16, 16, 16, 16)
 
Kivy Tutorial – Learn Kivy with Examples.
Syntax of all above properties:  
Python3
background_normal: 'normal.png'background_down: 'down.png'border: 30, 30, 30, 30
Basic Approach:

-> import kivy
-> import kivy App
-> import button
-> set minimum version(optional)
-> Extend the class :  
              -> create an image a button
              -> Do styling
              -> Use the border property to round the corners of the button
              -> Arrange call back if needed 
-> Add and return a button
-> Run an instance of the class
With these two images called normal.png and down.png, you can start adding your round borders. 
 
We are going to use the above 2 images in creating the rounded button.
Below is a very simple piece of code and we will try to explain each and everything.
border property– The values in border:30, 30, 30, 30 tells us how many pixels on the left, right, top, bottom are going to be used for the border of the button. If you give a border, see for example border: (150, 150, 150, 150), this will behave wrongly and the reason is that we are picking up a border bigger than the actual image.
Now below is the code implementing my approach:  
Python3
## Sample Python application demonstrating that## how to create button corners round in kivy     ##################################################    # import kivy moduleimport kivy     # this restrict the kivy version i.e# below this kivy version you cannot# use the app or softwarekivy.require("1.9.1")     # base Class of your App inherits from the App class.# app:always refers to the instance of your applicationfrom kivy.app import App     # creates the button in kivy# if not imported shows the errorfrom kivy.uix.button import Button # this restrict the kivy version i.e# below this kivy version you cannot# use the app or softwarekivy.require('1.9.0')     # to change the kivy default settings we use this module configfrom kivy.config import Config     # 0 being off 1 being on as in true / false# you can use 0 or 1 && True or FalseConfig.set('graphics', 'resizable', True)      # class in which we are creating the imagebuttonclass ButtonApp(App):             def build(self):         # create a fully styled functional button        # Adding images normal.png and down.png        btn = Button(text ="Push Me !",                    background_normal = 'normal.png',                    background_down = 'down.png',                    border = (30, 30, 30, 30),                                       size_hint = (.3, .3),                    pos_hint = {"x":0.35, "y":0.3}                )         # Returning the button        return btn                  # creating the object root for ButtonApp() classroot = ButtonApp()     # run function runs the whole program# i.e run() method which calls the target# function passed to the constructor.root.run()
Output:  
 
Note: Widgets are still rectangles. That means that even if you click on the rounded corners, the button still receive the event. 
abhigoya
Python-gui
Python-kivy
Python
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Python Dictionary
Different ways to create Pandas Dataframe
Enumerate() in Python
Python String | replace()
How to Install PIP on Windows ?
*args and **kwargs in Python
Python Classes and Objects
Iterate over a list in Python
Python OOPs Concepts
Convert integer to string in Python