CODEWITHSUNDEEP
kivy
James_L
James_L

Reputation: 1225

kivy: change background color to white

I'd like to have an app with black buttons and labels, and with white text, and thus, would like to have white space separating these widgets. I suppose that in order to do so, it would be necessary to convert the background from the default color, which is black, to white. What is the best way of accomplishing this? Thank you!

Upvotes: 30

Views: 85722

Answers (3)

SAP ASFlash
SAP ASFlash

Reputation: 164

Every Layout has a canvas, which can be used as canvas.before or canvas.after and then you get the desired output. If you have some sort of Layout, like a BoxLayout, then you can use canvas.before with the Color instruction like this.

Here I am showing a more complex example with an image, that I am trying in a Food App.

<MainUI>:
BoxLayout:
    orientation:"vertical"
    padding:10
    spacing:10
    canvas.before:
        Color:
            rgba:1,1,1,0.4
        Rectangle:
            pos:self.pos
            size:self.size
            source:"images/bg1.png"

this works with anything, and it looks like this.

enter image description here

Now if you just make the transparency to 100% or 1 in the Color > rgba instruction, and simply remove the image instruction.

<MainUI>:
BoxLayout:
    orientation:"vertical"
    padding:10
    spacing:10
    canvas.before:
        Color:
            rgba:1,1,1,1
        Rectangle:
            pos:self.pos
            size:self.size

and it turns the full background white.

enter image description here

Upvotes: 0

de_smarty
de_smarty

Reputation: 56

I have created a module for this purpose. Please check: Details on Github

#Change background color of a kivy layout
#Place the CustomGraphics.py file to a folder
#code starts here

import sys
sys.path.append([path to CustomGraphics.py])
from CustomModules import CustomGraphics
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label

class TestApp(App):
    def build(self):
        layout = BoxLayout(orientation='vertical', size=(Window.width, Window.height))
        label = Label(text="Remember my name: It's Smruti Ranjan Gochhayat")
        layout.add_widget(label)
        CustomGraphics.SetBG(layout, bg_color=[1,0,0,1])
        return layout
if __name__ == '__main__':
    TestApp().run()
    
#code ends here

I wish it is helpful for some people

Upvotes: 1

inclement
inclement

Reputation: 29450

A simple way is to simply draw a big white rectangle behind your root widget. For instance, in kivy language you could do

<YourRootWidget>:
    canvas.before:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size

I think you can also actually directly set the colour that kivy clears the window background with, which is exposed as Window.clearcolor. You would do this with

from kivy.core.window import Window
Window.clearcolor = (1, 1, 1, 1)

You would probably need to put this before anything else in your app, as it won't affect anything if run after the window has been created.

Upvotes: 80

Related Questions