Search code examples
pythonkivy

Text is below the button's canvas kivy


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)


Solution

  • 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})