Rounding button corners in kivy

Question

What is the preferred way to create rounded corners for buttons in kivy?

Are there other equally viable ways to perform this task? Thank you.

Answer 1

This is a tricky one. As far as I am concern Widgets are always rectangles. But we can change the background and put a couple of images for the normal and down states using the background_normal and background_down properties respectively. Also you will need to understand the border property.

With this two images called normal.png and down.png, you can start adding your round borders.

Here is the piece of code, which is very straight forward (I try to explain the border property below):

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.lang import Builder

Builder.load_string("""
:
    Button:
        background_normal: 'normal.png'
        background_down: 'down.png'
        border: 30,30,30,30
""")


class Base(FloatLayout):
    pass

class ButtonsApp(App):
    def build(self):
        return Base()

if __name__ == "__main__":
    ButtonsApp().run()

The way I understand this (and I might be wrong) is this. The values in border: 30,30,30,30 tells how many pixels on the top, right, bottom and left are going to be used for the border of the background's button. The rest is going to be filled with the middle part. I am not sure here. By the way, If you want to see something cool, see for example border: 150,150,150,150. The reason is that we are picking up a border bigger than the actual image.

The caveat: Widgets are still rectangles. That means that even if you click on the rounded corners, the button still receive the event. I guess it is a fair price. If you want to do something better, maybe I can help you but we will need to use some maths to collide the points. One of the tricks with the Pong Game tutorial in the documentation is that actually the ball is a square. I posted a related question here, but you will need to use the Canvas