CODEWITHSUNDEEP
kivy
Sean
Sean

Reputation: 222

Error when making rounded corners for buttons in Kivy v2.0.0

I'm trying to make rounded corners for a button in a kv file like so:

test.kv

#:kivy 2.0
<CustomGridLayout>
    GridLayout:
        cols: 1

        RoundedButton:
            text: 'Button #1'

<RoundedButton@Button>
    background_color: (51/255.0, 51/255.0, 51/255.0, 1)
    background_normal: ''
    background_down: ''
    size_hint: None, None
    size: 300, 50
    canvas.before:
        Color:
            rgba: self.background_color
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: 10,

test.py

import kivy
kivy.require('2.0.0')

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.core.window import Window

class CustomGridLayout(Widget):
    pass

class TestApp(App):
    def build(self):
        Window.size = (360,640)
        Window.clearcolor = (238/255.0, 238/255.0, 238/255.0, 1)
        return CustomGridLayout()

if __name__ == '__main__':
    TestApp().run()

This does not result in rounded corners for me.

However when I add border: 0, in RoundedButton like this: test.kv

<RoundedButton@Button>
    ...
    border: 0,
    canvas.before:
        ...
        RoundedRectangle:
            radius: 10,

The button is then rounded. But then upon starting the app, as well as every time I click the button, I get the following error:

ValueError: need more than 1 value to unpack Exception ignored in: 'kivy.graphics.vertex_instructions.BorderImage.bui ld'

This is referring to their being only a single value in border so I changed it to 4 values (i.e. 0, 0, 0, 0) and the error went away but corners are no longer rounded.

I also tried border: 10, 10, 10, 10 but again no rounding.

And lastly I've also tried using the border property with no canvas.before but to no avail.

Upvotes: 0

Views: 156

Answers (1)

John Anderson
John Anderson

Reputation: 38937

You need to eliminate the background_color by making it transparent. The background_color is what you are seeing. By making it transparent, it allows you to see the rounded rectangle:

<RoundedButton@Button>
    background_color: (0, 0, 0, 0)
    background_normal: ''
    background_down: ''
    size_hint: None, None
    size: 300, 50
    canvas.before:
        Color:
            rgba: 51/255.0, 51/255.0, 51/255.0, 1
        RoundedRectangle:
            size: self.size
            pos: self.pos
            radius: 10,

Upvotes: 1

Related Questions