I've created a rounded button. This is the reference: https://kivycoder.com/rounded-buttons-with-kivy-python-kivy-gui-tutorial-22/
However, the text is below the canvas, which looks like this result of my code
Here is my code:
roundbutton = """
<RoundButton@Button>:
background_color: (0, 0, 0, 0)
background_normal: ''
canvas.before:
Color:
rgba: self.color
RoundedRectangle:
pos: self.pos
size: self.size
radius: [(20, 20), (20, 20), (20, 20), (20, 20)]
"""
Builder.load_string(roundbutton)
class RoundButton(Button):
def __init__(self, **kwargs):
super().__init__(**kwargs)
class ScrButton(RoundButton):
def __init__(self, screen, direction='right', goal='main', **kwargs):
super().__init__(**kwargs)
self.screen = screen
self.direction = direction
self.goal = goal
def on_press(self):
self.screen.manager.transition.direction = self.direction
self.screen.manager.current = self.goal
class LoginScreen(Screen):
def __init__(self, **kw):
super().__init__(**kw)
layout = FloatLayout()
login_button = ScrButton(self, direction='left', goal='dashboard', text='[b]LOGIN[/b]', markup=True, color = (237/255, 221/255, 182/255, 1), size_hint=(.8, .07), pos_hint={'center_x':.5, 'center_y':.3})
layout.add_widget(login_button)
self.add_widget(layout)
Here is my expected result (https://i.sstatic.net/CAEPX.png)
The problem is that you are using self.color
in your kv
as the color of your Button
. However, color
is already defined as the text color, so you are guaranteeing that text color is the same as your Button
color as therefor invisible. To see this, try changing that section of your kv
to:
<RoundButton@Button>:
background_color: (0, 0, 0, 0)
background_normal: ''
canvas.before:
Color:
rgba: [1, 0, 0, 1]
RoundedRectangle:
pos: self.pos
size: self.size
radius: [(20, 20), (20, 20), (20, 20), (20, 20)]
The above demonstrates that you cannot use the color
property as the color of the Button
since it is already used as the color of the text. To set the color of the Button
you must create a new property for that. For example, create a new property named rounded_color
:
class ScrButton(RoundButton):
rounded_color = ListProperty([0, 0, 0, 1]) # new property added
Then use that new property in the kv
:
<RoundButton@Button>:
background_color: (0, 0, 0, 0)
background_normal: ''
canvas.before:
Color:
rgba: self.rounded_color # do not use the color property here
RoundedRectangle:
pos: self.pos
size: self.size
radius: [(20, 20), (20, 20), (20, 20), (20, 20)]
And finally, set the value of that new property:
# set the rounded_color property here
login_button = ScrButton(self, direction='left', goal='dashboard', text='[b]LOGIN[/b]', markup=True,
rounded_color=(237 / 255, 221 / 255, 182 / 255, 1), size_hint=(.8, .07),
pos_hint={'center_x': .5, 'center_y': .3})