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?

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(""" <Base>:     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

Answer 2

If you are looking only for good looks, and aren't picky about the corners, though rounded, are still touch points, you can do it simply, as shown in this sample program (This has large radius for this sample):

from kivy.uix.button import Button from kivy.lang import Builder from kivy.base import runTouchApp  kv=""" <RoundedButton@Button>:     background_color: 0,0,0,0  # the last zero is the critical on, make invisible     canvas.before:         Color:             rgba: (.4,.4,.4,1) if self.state=='normal' else (0,.7,.7,1)  # visual feedback of press         RoundedRectangle:             pos: self.pos             size: self.size             radius: [50,] """ class RoundedButton(Button):     pass  Builder.load_string(kv)  runTouchApp(RoundedButton(text="Hit Me!"))