Kivy Widget Colors

So, I’ve been playing a bit with using Kivy for programming mobile applications. I chose Kivy for a couple of reasons:

1) I like Python, and am always looking for an excuse to use it
2) Cross platform compiling is also something I’m looking for

I went through the Pong tutorial, and everything looked good. Then I started looking at how to change the color of a widget, and found a confusing variety of information. Turns out I can’t just set a color value on the widget and have it work.

The way that I ended up using wasn’t one I found online, but it seemed simpler to me than the techniques I did find. So I’m sharing it here for future web searchers.

If you know of an easier way to change the colors of widgets dynamically, let me know.

Step 1

In your .kv file, use something like this to tie the color of a widget to a property in the object:


<MyWidget>:
    canvas:
        Color:
            rgb: self.color

Then in the .py file where you declare that widget, create a ListProperty named color:


class MyWidget(Widget):
    color = ListProperty ([1,0,0]);

The initial value should be whatever color you want the widget to be, in RGB terms. [1,0,0] is full red.

Then, when you want to change the color of the widget, just change the value of the color list.

mywidget.color = [0,0,1]

The widget will automatically be redrawn in the given color.

This entry was posted in Kivy, Programming. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *