How do I change the background color of a button in Kivy?

Question

I am attempting to build a simple app that plays music every time a click on a button that I built in kivy. I would like to add graphics and styling, as the default color is just plain grey. How do I do I change that color to red? I have tried implementing the background_color parameter but that does not change anything. I have attached my code below:

   <Test>:
      do_default_tab: False
      Widget:
         canvas.before:
            Rectangle:
                size: self.size
                pos: self.pos


     TabbedPanelItem:

         text: 'Opera'

         text_size: self.size


         BoxLayout:
            orientation: 'vertical'
            padding: 20
            spacing: 10

            Button:

               text: 'Nessun Dorma'
               text_size: self.size
               on_press: root.nessun_dorma()


               halign: 'center'
               valign: 'middle'

               font_size: 20

Yoav Glazner · Accepted Answer · 2017-08-17T20:10:58.863

11

You can use state and background_color to achieve the wanted behavior

<FunkyButton>:
     background_color: (1,0,0,1) if self.state == 'normal' else (0,1,0,1)
     background_normal: ""
     #background_down: "" #optional if you want your color pressed

color unchanged...

this way the button will be red when is not pressed and green when it is...

edited Aug 17 '17 at 20:10

answered Jan 02 '17 at 22:15

Yoav Glazner

7,936
1
19
36

This looked like a good solution, but when I tried: background_color: (0,0,0,1) if self.state=='normal' else (1,1,1,1) I got a cyan color instead of white on button press. – RufusVS Aug 17 '17 at 05:19
@RufusVS - try adding background_down: "" – Yoav Glazner Aug 17 '17 at 20:11

score 2 · Answer 2 · edited May 23 '17 at 11:53

2

One way is to use images. Create the images externally and load one or the other depending on the state:

ToggleButton:
    id: 'enableBtn'
    text: 'Enable'
    state: 'normal'
    background_normal: 'enable.png'
    background_down: 'disable.png'
    on_release: root.on_disable()

I also found this post very helpful as it also explains how to change the shape of the button

edited May 23 '17 at 11:53

Community

1
1

answered Jan 01 '17 at 23:47

tomdertech

497
1
9
27

How do I change the background color of a button in Kivy?

2 Answers2