Change color button in Kivy

2.2k views Asked by At

First of all i'm not a professional programmer i'm just an hobbyist using code to make some stuff to work (not always). I'm using Kivy at the moment to make a simple app and can't figure out how to change the color of a button to the color i really want. I've spent some time on the page, looked stackoverflow but still can't manage it... Here's a bit of code. I use background_color to change the color and i understood i should use background_normal to set the "white color" (but i don't want the rest to be white...) and i don't know where to change background_color... Same question for when it's pressed.

It's alright for Label, this works :)

Other other small question. To get my rgb i divided all the color by 255 to get a value between 0 and 1, is it the correct way or they could be something more precise? Thanks !

BoxLayout:
padding: 10
spacing: 10
orientation: 'vertical'
Label:
    text: "Jouer avec les verbes \nirréguliers par :"
    color: 1,1,1,1
    canvas.before:
        Color:
            rgba: 0.99, 0.65, 0.07, 1
        Rectangle:
            pos: self.pos
            size: self.size
BoxLayout:
    orientation: 'horizontal'
    spacing: 10

    Button:
        text: "L'infinitif"
        size_hint: 1, 1
        background_color: 0.81, 0.27, 0.33, 1

    Button:
        text: "La traduction \nFrançaise"
        size_hint: 1, 1
1

There are 1 answers

11
The_Monster On

I found something that might help you:

http://kivy.org/docs/api-kivy.uix.button.html

background_color

Added in 1.0.8 Background color, in the format (r, g, b, a).

This acts as a multiplier to the texture colour. The default texture is grey, so just setting the background color will give a darker result. To set a plain color, set the background_normal to ''.

The background_color is a ListProperty and defaults to [1, 1, 1, 1].

Hope this is usefull, but next time search a little more ;)

Found this on SO

The problem is that Button.background_color really works as a kind of tint, not just a block colour. Since the default background is a grey image (the one you normally see if you make an unstyled button), what you end up seeing is a red tint to that grey image - which comes out as the dark red you observe.

You can get the behaviour you want by replacing the background image to just one that's plain white (it doesn't have to be more than a few pixels), or by otherwise playing with the background_normal and background_down properties. When your background_color tints the new pure white image, you get the pure red you're after.

And if thats not enough you can always watch this vid:

https://www.youtube.com/watch?v=ahx9RWqQNgg