Button Color in Kivy

Button Creation

The basic approach followed while creating buttons is 

• Importing kivy
• Importing the kivy App
• Importing all needed modules
• set the minimum version(it is optional)
• Add widgets
• Add button at set their colors
• Extend the class
• return a layout.
• Run an instance of the class

Button Creation with color in Kivy

As we have seen above the steps are to be followed while creating a button with color. Now we will be discussing with the help of a program.

Program

# import kivy module
import kivy

# this restricts the kivy version
# below this kivy version, we cannot
# use the app or the software
kivy.require("1.9.1")

# base Class of the App inherits from App class.
# app: it always refers to the instance of your application
from kivy.app import App

# this creates a button in kivy, and if it is not imported, it shows the error
from kivy.uix.button import Button

# the class where we are creating the button
class DemoButtonApp(App):

	def build(self):
		# use a (r, g, b, a) tuple 
        sampleBtn = Button(text ="Push Me !", 
        		    font_size ="20sp",   

    	             # Here we can give the color
	                 # value must be in range 0 to 1 
        	         # (1,1,1,1) is greyish black color
            	     background_color =(1, 1, 1, 1),  
  
                	 size =(32, 32), 
	                 size_hint =(.2, .2), 
	                 pos =(300, 250)) 
  
       return sampleBtn


# creating the object root for ButtonApp() class
root = DemoButtonApp()

# run function runs the whole program
# i.e run() method which calls the
# target function passed to the constructor.
root.run()

You can also try this code with Online Python Compiler

Run Code

Output

In this output, the button will cover the whole window as we have not given any specific size or done any styling on the button, so by default, it shows button size equal to window size.
 

By default the color of the button is greyish and if you want to change it then you have to use this property, and it only takes the value in range 0 to 1. If any other value is given, it will lead to misbehaving in the program.

Changing Button Color in Kivy

Here we are demonstrating a sample python application explaining how to change button color in Kivy.

Program

# import kivy module
import kivy

# to choose the colors randomly
# every time we run it shows different color
import random

# this restricts the kivy version
# below this kivy version, we cannot
# use the app or the software
kivy.require("1.9.1")

# base Class of the App inherits from App class.
# app: it always refers to the instance of your application
from kivy.app import App

# this creates a button in kivy, and if it is not imported, it shows the error
from kivy.uix.button import Button

# BoxLayout arranges the children in vertical or horizontal box.
# it also help to put the children at the desired locations.
from kivy.uix.boxlayout import BoxLayout

# declaring the colours we can use directly also
red = [1, 0, 0, 1]
purple = [1, 0, 1, 1]
blue = [0, 0, 1, 1]
green = [0, 1, 0, 1]

# this is the class in which we are creating the button
class DemoChangeColorApp(App):

	def build(self):

		# setting horizontal box layout
		superBox = BoxLayout(orientation ='vertical')
		HB = BoxLayout(orientation ='horizontal')

		# creating list of some defined colors
		colors = [red, green, blue, purple]

		# Changing the color of the buttons
		# here we can see how we can change the color
		sampleBtn1 = Button(text ="One",
		
		# Color of the button is changed and it is not default
		background_color = random.choice(colors),
		font_size = 32,
		size_hint =(0.7, 1))

		sampleBtn2 = Button(text ="Two",
		background_color = random.choice(colors),
		font_size = 32,
		size_hint =(0.7, 1))

		HB.add_widget(sampleBtn1)
		HB.add_widget(sampleBtn2)

		# setting vertical box layout
		VB = BoxLayout(orientation ='vertical')

		sampleBtn3 = Button(text ="Three",
		background_color = random.choice(colors),
		font_size = 32,
		size_hint =(1, 10))

		sampleBtn4 = Button(text ="Four",
		background_color = random.choice(colors),
		font_size = 32,
		size_hint =(1, 15))

		VB.add_widget(sampleBtn3)
		VB.add_widget(sampleBtn4)

		superBox.add_widget(HB)
		superBox.add_widget(VB)

		return superBox

# creating the object root for App class
root = DemoChangeColorApp()

# run function runs the whole program
# run() method which calls the
# target function passed to the constructor.
root.run()

You can also try this code with Online Python Compiler

Run Code

Output

FAQs

How to set the background color of the button in kivy?

The background color kivy is the property which sets the background color of an element.
Syntax: background_color: 1, 0, 0, 1
 

What is the box layout in kivy?

The BoxLayout arranges the children in a vertical or horizontal box. For example: layout = BoxLayout(orientation='vertical').
 

What is a widget in kivy?

A Widget is a base building block of the GUI interfaces in Kivy. It provides a Canvas that can be used to draw on the screen.
 

What is float layout in kivy?

The FloatLayout honors pos_hint and size_hint properties of its children. For example: layout = FloatLayout(size=(300, 300)).

Conclusion

In this blog, we started with the kivy framework and button introduction. Then we discussed the creation of a button by adding color to it in kivy.  After that, we discussed how to change the button color and its background color with the help of a simple program.

We hope that this blog helped you enhance your knowledge in improving your understanding of the button colors in kivy.

You may also want to learn more so please visit interesting articles about buttons, kivy, and python libraries.

Learning never stops, and to learn more and become more skilled, head over to our practice platform Coding Ninjas Studio, practice top problems, attempt Mock Tests, read informative blogs, and interview experiences. Do upvote our blog to help other ninjas grow. 

Happy Learning!