Label with Background Color with Container as Screen dosent show background color

Question

I am trying to have a label with a background color . Basically it looks like a Label with a rectangle with a different color over it . This works totally ok if i use parent as a Widget but if i change the parent to be as Screen as i need to use screen The colored rectangle i.e. background color or the label disappears . Can some one advice . Below are the codes for both . 1. Working with Widget container 2. Not working with Screen Container <-- Need suggestion here

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.label import Label
from kivy.uix.widget import Widget
from kivy.properties import ListProperty
from kivy.uix.screenmanager import ScreenManager, Screen,FallOutTransition

kvCode=('''
<CLabel@Label>:
    canvas.before:
        Color:
            rgb: self.bgcolor
        Rectangle:
            size: self.size
            pos: self.pos
''')


class CLabel(Label):
    bgcolor = ListProperty([0,0,0])

class Container(Widget):
    def __init__(self, **kwargs):
        super(Container, self).__init__(**kwargs)
        labelWithBackground = CLabel(text="Coloured background",bgcolor=    [.45,.46,.52,1])
        labelWithBackground.center = 100,100
        self.add_widget(labelWithBackground)

class MyJB(App):
    def build(self):

        Builder.load_string(kvCode)
        parent = Container()
        return parent


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



from kivy.app import App
from kivy.lang import Builder
from kivy.uix.label import Label
from kivy.uix.widget import Widget
from kivy.properties import ListProperty
from kivy.uix.screenmanager import ScreenManager, Screen,FallOutTransition
kvCode=('''
<CLabel@Label>:
    canvas.before:
        Color:
            rgb: self.bgcolor
        Rectangle:
            size: self.size
            pos: self.pos
''')


class CLabel(Label):
    bgcolor = ListProperty([0,0,0])

class Container(Screen,Widget):
    def __init__(self, **kwargs):
        super(Container, self).__init__(**kwargs)
        labelWithBackground = CLabel(text="Coloured background",bgcolor=[.45,.46,.52,1])
        labelWithBackground.center = 100,100
        self.add_widget(labelWithBackground)


class MyJB(App):
    def build(self):
        sm = ScreenManager(transition= FallOutTransition())
        sm.add_widget(Container(name='loading'))
        Builder.load_string(kvCode)
        return sm


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

Answer 1

The problem is that you're not loading your kv rules until after creating the widget. If you load them first, it works fine.

You can load your rules at any time - not just in build(). So you can just remove Builder.load_string(kvCode) from build() and change kvCode=(''' to Builder.load_string('''. I put a Builder.load_string() at the top of every widget file I create.

Also, Kivy supports more advanced property setups that will work better. Here is our way of doing this:

from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.properties import BoundedNumericProperty, ReferenceListProperty
from kivy.uix.label import Label

Builder.load_string('''
<BackgroundWidget>:
    canvas.before:
        Color:
            rgba: self.background_color
        Rectangle:
            size: root.size
            pos: root.pos
''')

class BackgroundWidget(Widget):
    '''BackgroundWidget class
    '''

    background_color_r = BoundedNumericProperty(0., min=0., max=1.)
    background_color_g = BoundedNumericProperty(0., min=0., max=1.)
    background_color_b = BoundedNumericProperty(0., min=0., max=1.)
    background_color_a = BoundedNumericProperty(0., min=0., max=1.)

    background_color = ReferenceListProperty(background_color_r, background_color_g, background_color_b, background_color_a)

class BackgroundLabel(BackgroundWidget, Label): pass

You can change or animate each color component separately, the color values are constrained appropriately, and BackgroundWidget is a mixin which adds background functionality to any widget (like BackgroundLabel).