Kivy: Change Button Color Part 1
This is how I finally figured out the best way to change the font and background color in the .kv file:
I was able to set the perimeters for all the buttons in my app on every screen by putting this at the top of my .kv file.
What’s going on?
- <Button> → This is not a screen, it refers to the built in Button class in Kivy and will standardize all buttons in your app. You can do the same thing with TextInput, etc.
- color: → font color.
- 1, 1, 1, 1 → the way Kivy manages color using rgba model. 1, 1, 1, 1, will give you white. rgba means red, green, blue, alpha. It refers to how much red or green or blue. The alpha refers to the opacity. 0 being clear and 1 being completely opaque. Most color pickers only use the 0 to 255 model (as you’ve probably already seen). To get variations I recommend using this site: https://rgbacolorpicker.com/. Then divide the number that you choose for each rgb by 255. In my opinion, quickly using my phone’s calculator is much quicker than searching for a converter online. See the example below:
This is the way to visualize the process of changing to decimals:
r =136/255 = 0.53
g = 255/255 = 1
b = 98/255 = 0.38
I always round to two decimal places. The Kivy notation for this specific color would be
(0.53, 1, 0.38, 0.31)
Back to my example:
4) background_color: 0, 1, 0, 1 →See below my color. The twist is that the kivy buttons are already have a dark color and shows through regardless. My green should look like this:
It ends up looking like this:
If you happen to know how to fix this problem, please put it in the comments.