Python – Rounding button corners in kivy

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.

In this article we will 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 rectangle, but we can change the background of widgets and put couple of images for the normal and the down state 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 understand one more property of 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

background_normal: 'normal.png'
background_down: 'down.png'
border: 30, 30, 30, 30

chevron_right


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 this 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 the very simple piece of code and i 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 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:

filter_none

edit
close

play_arrow

link
brightness_4
code

## Sample Python application demonstrating that   
## how to create button corners round in kivy 
       
##################################################      
# 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
   
# this restrict the kivy version i.e   
# below this kivy version you cannot   
# use the app or software   
kivy.require('1.9.0')  
      
# to change the kivy default settings we use this module config 
from kivy.config import Config 
      
# 0 being off 1 being on as in true / false 
# you can use 0 or 1 && True or False 
Config.set('graphics', 'resizable', True)
   
     
# class in which we are creating the imagebutton 
class 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',
  
                     # Added the border property to round the corners of the button
                     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() class  
root = ButtonApp() 
     
# run function runs the whole program 
# i.e run() method which calls the target 
# function passed to the constructor. 
root.run()

chevron_right


Output:

Note: Widgets are still rectangles. That means that even if you click on the rounded corners, the button still receive the event.




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

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.