Kivy - Button Colors

In any GUI application, button is an important component. Its primary function to respond to click event and invoke a callback. To design attractive GUI, the button color should be chosen appropriately. You can configure a button by specifying the color for its caption, background color in normal as well as disabled state.

In Kivy, the Button class defines the following color-related properties −

  • color
  • background_color
  • disabled_color
  • outline_color
  • disabled_outline_color

color Property

The Button class inherits this property from Label class, as Button is a Label that responds to click related events. The color property defines the color of the button text, or the button caption.

Since color is of ColorProperty type, it must be specified in (r,g,b,a) format. The colors take the value between "0" to "1". The "a" component is for transparency. For a button, color defaults to [1, 1, 1, 1].

background_color Property

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. The background color of the button is a ColorProperty in the format (r, g, b, a) with default value [1,1,1,1].

disabled_color Property

This property is inherited from the Label class. It defines the color of the button text or caption when it is disabled. It's a ColorProperty and defaults to [1,1,1,3]

outline_color Property

Inherited from the Label class, this property configures the color of text outline. Note that this requires SDL2 text provider. This property is of ColorProperty type and its default value is [0,0,0,1]

disabled_outline_color Property

This property defines the color of the text outline when the widget is disabled, in the (r, g, b) format. It is inherited from Label class. This feature requires the SDL2 text provider. The disabled_outline_color is a ColorProperty and defaults to [0, 0, 0].

Example 1

Let us demonstrate the use of color and disabled_color properties. In the following example, we have placed two buttons in a floatlayout. They are instantiated with different color and disabled_color properties. When clicked, the text color changes.

from kivy.app import App
from kivy.uix.button import Button
from kivy.config import Config
from kivy.uix.floatlayout import FloatLayout

# Configuration
Config.set('graphics', 'width', '720')
Config.set('graphics', 'height', '300')
Config.set('graphics', 'resizable', '1')

class HelloApp(App):
   def on_button_press(self, instance):
      instance.disabled = True

   def build(self):
      flo = FloatLayout()

      btn1 = Button(text= 'Hello Python', color= [1,0,0,1],
         disabled_color = [0,0,1,1],
         font_size= 40, size_hint= (.4, .25),
         pos_hint= {'center_x':.5, 'center_y':.8})
      btn1.bind(on_press = self.on_button_press)
      btn2 = Button(text= 'Hello Kivy', color= [0,0,1,1],
         disabled_color = [1,0,0,1],
         font_size= 40, size_hint= (.4, .25),
         pos_hint= {'center_x':.5, 'center_y':.2})
      flo.add_widget(btn1)
      btn2.bind(on_press = self.on_button_press)
      flo.add_widget(btn2)
      return flo

if __name__ == '__main__':
   HelloApp().run()

Output

Initially, both the buttons are enabled. When you press the buttons, they get disabled (they are unable to receive the "on_press" event) and the text color changes as per the configuration.

Kivy Button Colors

Example 2

In the following program, when any button is clicked, its text color and background color is interchanged.

from kivy.app import App
from kivy.uix.button import Button
from kivy.config import Config
from kivy.uix.floatlayout import FloatLayout

# Configuration
Config.set('graphics', 'width', '720')
Config.set('graphics', 'height', '300')
Config.set('graphics', 'resizable', '1')

class HelloApp(App):
   def on_button_press(self, instance):
      print("change color")
      instance.background_color, instance.color = instance.color, instance.background_color

   def build(self):
      flo = FloatLayout()

      self.btn1 = Button(text='Hello Python',
         color=[1, 0, 0, 1],
         background_color=[0, 0, 1, 1],
         font_size=40, size_hint=(.4, .25),
         pos_hint={'center_x': .5, 'center_y': .8})

      self.btn2 = Button(text='Hello Kivy',
         color=[0, 0, 1, 1],
         background_color=[1, 0, 0, 1],
         font_size=40, size_hint=(.4, .25),
         pos_hint={'center_x': .5, 'center_y': .2})
      flo.add_widget(self.btn1)
      self.btn1.bind(on_press=self.on_button_press)
      self.btn2.bind(on_press=self.on_button_press)
      flo.add_widget(self.btn2)
      return flo

if __name__ == '__main__':
   HelloApp().run()

Output

When you click any of the two buttons, their colors get interchanged as shown here −

Kivy Button Colors Hello
Advertisements