Search code examples
pythonkivykivy-language

Kivy Tabbed Panel won't change background color


I have a kivy app, which I was able to create with a white background using Window.clearcolor in the python file, as suggested in kivy: change background color to white . I then added a tabbed panel, which has caused the background to go back to black.

I attempted to use canvas and canvas.before, and background_color to make it go back to white, but it still renders black (or rather dark grey).

Reproducible Toy Example

import kivy
from kivy.lang import Builder
from kivy.core.window import Window


kivy.require('1.1.0')

from kivy.app import App

presentation = Builder.load_file("works.kv")
class TestApp(App):
    def build(self):
        Window.clearcolor = (1, 1, 1, 1)
        return presentation




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

with kv file:

#:kivy 1.10.0
GridLayout:
    cols: 2

    Label:
        text:'just to force spacing'
    Button:
        text: 'Hello World'

but when I add a tabbed panel to the kv file, like the following, the background appears to be black (screenshots below):

#:kivy 1.10.0
BoxLayout:
    TabbedPanel:
        do_default_tab: False
        background_color: (1, 1, 1, 1)

        TabbedPanelItem:
            text: 'Main'

            GridLayout:
                cols: 2

                Label:
                    text:'just to force spacing'
                Button:
                    text: 'Hello World'

        TabbedPanelItem:
            text: 'Tab 2'

SCREENSHOTS:

Before adding panels:

window with white background

After adding panels (I would like the panel to have a white background, in this toy example the text would be white on white, but I have that handled in my app):

Panel with grey background

Tried

<Main>:
    name: 'mscreen'
    canvas.before:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size

    TabbedPanel:
        do_default_tab: False

        TabbedPanelItem:
            text: 'Main'

            GridLayout: ...

and similarly

<Main>:
    name: 'mscreen'
    canvas:
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            pos: self.pos
            size: self.size

    TabbedPanel:
        do_default_tab: False

        TabbedPanelItem:
            text: 'Main'

            GridLayout:...

If I'm reading Kivy's documentation on TabbedPanels correctly, I should be able to use background_color, but this also doesn't work:

TabbedPanel:
    do_default_tab: False

    TabbedPanelItem:
        text: 'Main'
        background_color: 1,1,1,1

and

TabbedPanel:
    do_default_tab: False
    background_color:1,1,1,1

    TabbedPanelItem:
        text: 'Main'

Related: I am aware others have struggled with Kivy Backgrounds. To the best of my knowledge, I have attempted their suggestions.

Less directly related:


Solution

  • Solution

    Using the kv file provided and some additions.

    kv file - White Tabbed Panel Content

    #:kivy 1.10.0
    BoxLayout:
        TabbedPanel:
            do_default_tab: False
            background_color: (1, 1, 1, 1)    # White colour
            border: [0, 0, 0, 0]
            background_image: 'path/to/background/image'
    
            TabbedPanelItem:
                text: 'Main'
    
                GridLayout:
                    cols: 2
    
                    Label:
                        text:'just to force spacing'
                    Button:
                        text: 'Hello World'
    
            TabbedPanelItem:
                text: 'Tab 2'
    

    Blue Tabbed Panel Content

    To change the appearance of the main tabbed panel content:

    TabbedPanel:
        background_color: (0, 0, 1, .5)    # 50% translucent blue
        border: [0, 0, 0, 0]
        background_image: 'path/to/background/image'
    

    Output

    Img01 - White Tabbed Panel content Img02 - Blue Tabbed Panel content