Kivy Custom Button on_press change canvas colour

Question

Further to my last question, I have been looking at the documentation and online for examples for how to change the canvas color of a custom button on press. Here is what I have; nothing changes when clicked:

class CircularButton(ButtonBehavior, Label):

    # code inspired from:
        # https://github.com/kivy/kivy/issues/4263#issuecomment-217430358
        # https://stackoverflow.com/a/42886979/6924364
        # https://blog.kivy.org/2014/10/updating-canvas-instructions-declared-in-python/

    def __init__(self, **kwargs):
        super(CircularButton,self).__init__(**kwargs)

        with self.canvas.before:
            Color(rgba=(.5,.5,.5,.5))
            self.shape = Ellipse(pos=self.pos,size=self.size)

        self.bind(pos=self.update_shape, size=self.update_shape)

    def update_shape(self, *args):
        self.shape.pos = self.pos
        self.shape.size = self.size

    def on_press(self, *args): #<--- what am I doing wrong here?
        with self.canvas:
            Color(rgba=(0,0,0,0))

    def collide_point(self, x, y):
        return Vector(x, y).distance(self.center) <= self.width / 2

Answer 1

Maybe helps someone this solution:

.py

class PositionButton(Button):
    b_color = ListProperty()

.kv

<PositionButton>:
    background_color: [0,0,0,0]
    b_color: [0, 0, 1, .3] if self.state == 'normal' else [0, 0, 1, .5]
    canvas.before:
        Color:
            rgba: self.b_color

Answer 2

You have to store and reuse the Color instruction and change the color as Canvas adds the instructions, in your case you are adding a new Color instruction that does not apply to another element like Rectangle or Ellipse so you do not see the effect.

from kivy.base import runTouchApp
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.label import Label
from kivy.vector import Vector
from kivy.graphics import Color, Ellipse
from kivy.properties import ListProperty


class CircularButton(ButtonBehavior, Label):
    background_color = ListProperty((0.5,.5,.5,.5))

    def __init__(self, **kwargs):
        super(CircularButton,self).__init__(**kwargs)
        self.draw()
        self.text='test'

    def update_shape(self, *args):
        self.shape.pos = self.pos
        self.shape.size = self.size

    def on_background_color(self, *args):
        self.shape_color.rgba = self.background_color

    def draw(self, *args):
        with self.canvas.before:
            self.shape_color = Color(rgba=(0.5,.5,.5,.5))
            self.shape = Ellipse(pos=self.pos,size=self.size)
            self.bind(pos=self.update_shape, size=self.update_shape)

    def on_press(self, *args):
        self.background_color= (1, 0, 0, 1)

    def on_release(self, *arg):
        self.background_color = (0.5,.5,.5,.5)

    def collide_point(self, x, y):
        return Vector(x, y).distance(self.center) <= self.width / 2

if __name__ == '__main__':
    runTouchApp(CircularButton())

Although I prefer to combine the .kv and the .py taking advantage of the kv language is declarative making the connections are simple:

from kivy.base import runTouchApp
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.label import Label
from kivy.vector import Vector
from kivy.lang import Builder


Builder.load_string('''
<CircularButton>
    background_color: 0.5,.5,.5,.5
    canvas.before:
        Color:
            rgba: self.background_color
        Ellipse:
            pos: self.pos
            size: self.size
    ''')


class CircularButton(ButtonBehavior, Label):
    def __init__(self, **kwargs):
        super(CircularButton, self).__init__(**kwargs)
        self.text = "test"

    def on_press(self, *args):
        self.background_color = (1, 0, 0, 1)

    def collide_point(self, x, y):
        return Vector(x, y).distance(self.center) <= self.width / 2

if __name__ == '__main__':
    runTouchApp(CircularButton())