0

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:

mdoc-2011
  • 2,747
  • 4
  • 21
  • 43

2 Answers2

1

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

ikolim
  • 15,721
  • 2
  • 19
  • 29
  • Thank you for your answer. As I mentioned in the question, I have tried using the `background_color` attribute. I was using 1,1,1,1 to set it to white, even if I try the translucent blue you recommend, the color remains unchanged. – mdoc-2011 Apr 04 '18 at 18:18
  • 1
    @mdoc-2011: I have updated my post with an example of tabbed panel content with white background colour. – ikolim Apr 04 '18 at 20:28
  • It seems that the 'background_image:' attribute is required, even though I don't actually want to use a background image? – mdoc-2011 Apr 04 '18 at 20:35
1

I know I am late to answer but I came across this while finding an answer to another question. It can be helpful to some :) What you can do is set the canvas.before in the box layout or grid layout and it will do the trick, you don't need to set the background image. Below is the snippet how is used it to make the background of my panel white.

TabbedPanel:

    do_default_tab: False

    TabbedPanelItem:
       # This will change the tab panel button color
       background_color: 0.0,0.9,2,1
       text: 'Scripts'

        BoxLayout :
               # This will change the background to white
                canvas.before:
                    Color:
                        rgba:1,1,1,1
                    Rectangle:
                        pos: self.pos
                        size: self.size
                orientation: "vertical"
                # Recycle view I've used to show the list 
                RV:
                    id: listrecycleview
                    pos_hint:{"x":0, "y": 0.1}