Kivy ScreenManager and BoxLayout

Question

I'm just in the learning process of Kivy and have made a simple example. There should be 2 screens. Every screen should have a menu bar. The menu bars are shown at the bottom of the 2 screens. This works perfectly. Now I try to put the menu bar at the top of the screens and don't get my example running.

Here is the snippet of my code that works:

<ScreenOverview>:
    name:   "ScreenOverview"

    BoxLayout:
        orientation: "vertical"

        Button:
            text: 'Overview Screen'
            font_size: 50

        MenuBar:

When I switch the MenuBar with Button, I only see the Button at the bottom:

<ScreenOverview>:
    name:   "ScreenOverview"

    BoxLayout:
        orientation: "vertical"

        MenuBar:

        Button:
            text: 'Overview Screen'
            font_size: 50

Only using the MenuBar, I can see the MenuBar, but also at the bottom and not at the top.

<ScreenOverview>:
    name:   "ScreenOverview"

    BoxLayout:
        orientation: "vertical"

        MenuBar:

I search here and tried many hints and examples, but I don't get my code to work. Can anybody explain my mistalke?

Here is my complete py-code:

import kivy
kivy.require('1.10.1') # replace with your current kivy version !

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.button import Button
from kivy.uix.screenmanager import ScreenManager, Screen, SlideTransition

class MenuBar( Button ):
    pass

class ScreenOverview( Screen ):
    def __init__( self, **kwargs ):
        super( ScreenOverview, self ).__init__( **kwargs )

    def switchToScreen( self ):
        if( self.manager.current == "ScreenBookings" ):
            self.manager.transition = SlideTransition( direction="left" )
            self.manager.current = "ScreenOverview"

class ScreenBookings( Screen ):
    def __init__( self, **kwargs ):
        super( ScreenBookings, self ).__init__( **kwargs )

    def switchToScreen( self ):
        if( self.manager.current == "ScreenOverview" ):
            self.manager.transition = SlideTransition( direction="right" )
            self.manager.current = "ScreenBookings"

class RVScreenManager( ScreenManager ):
    pass

class RVApp( App ):
    def build( self ):
        self.ScreenManager = RVScreenManager()

        self.ScreenOverview = ScreenOverview( name="ScreenOverview")
        self.ScreenManager.add_widget( self.ScreenOverview )

        self.ScreenBookings = ScreenBookings( name="ScreenBookings")
        self.ScreenManager.add_widget( self.ScreenBookings )

        return( self.ScreenManager )

    def switchScreenOverview( self ):
        self.ScreenOverview.switchToScreen()

    def switchScreenBookings( self ):
        self.ScreenBookings.switchToScreen()

Builder.load_file( "sf-fragen01.kv" )

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

And the kv file:

#:import SlideTransition kivy.uix.screenmanager.SlideTransition

<RVScreenManager>:
    id: ScreenManager

    ScreenOverview:
        name: "ScreenOverview"
        screen_manager: "ScreenManager"
    ScreenBookings:
        name: "ScreenBookings"
        screen_manager: "ScreenManager"

<ScreenOverview>:
    name:   "ScreenOverview"

    BoxLayout:
        orientation: "vertical"

        Button:
            text: 'Overview Screen'
            font_size: 50

        MenuBar:

<ScreenBookings>:
    name: "ScreenBookings"

    BoxLayout:
        orientation: "vertical"

        Button:
            text: 'Bookings Screen'
            font_size: 50

        MenuBar:

<MenuButton@Button>:
    font_size:      20
    text_size:      self.size
    halign:         "center"
    valign:         "center"

<MenuBar>:
    name: "MenuBar"

    BoxLayout:
        size:       root.size[0], root.size[1]

        MenuButton:
            on_release:
                app.switchScreenOverview()
            text: 'Overview'

        MenuButton:
            on_release:
                app.switchScreenBookings()
            text: 'Bookings'

Answer 1

I think it might be due to your MenuBar extending Button. It make more sense for MenuBar to extend some type of Layout. Here is your py code with the MenuBar extending BoxLayout:

import kivy
from kivy.uix.boxlayout import BoxLayout

kivy.require('1.10.1') # replace with your current kivy version !

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.button import Button
from kivy.uix.screenmanager import ScreenManager, Screen, SlideTransition

class MenuBar( BoxLayout ):
    pass

class ScreenOverview( Screen ):
    def __init__( self, **kwargs ):
        super( ScreenOverview, self ).__init__( **kwargs )

    def switchToScreen( self ):
        if( self.manager.current == "ScreenBookings" ):
            self.manager.transition = SlideTransition( direction="left" )
            self.manager.current = "ScreenOverview"

class ScreenBookings( Screen ):
    def __init__( self, **kwargs ):
        super( ScreenBookings, self ).__init__( **kwargs )

    def switchToScreen( self ):
        if( self.manager.current == "ScreenOverview" ):
            self.manager.transition = SlideTransition( direction="right" )
            self.manager.current = "ScreenBookings"

class RVScreenManager( ScreenManager ):
    pass

class RVApp( App ):
    def build( self ):
        self.ScreenManager = RVScreenManager()

        self.ScreenOverview = ScreenOverview( name="ScreenOverview")
        self.ScreenManager.add_widget( self.ScreenOverview )

        self.ScreenBookings = ScreenBookings( name="ScreenBookings")
        self.ScreenManager.add_widget( self.ScreenBookings )

        return( self.ScreenManager )

    def switchScreenOverview( self ):
        self.ScreenOverview.switchToScreen()

    def switchScreenBookings( self ):
        self.ScreenBookings.switchToScreen()

Builder.load_file( "sf-fragen01.kv" )

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

And the .kv file with the MenuBar at the top. Note that the MenuBar no longer contains a BoxLayout, because MenuBar is a BoxLayout:

#:import SlideTransition kivy.uix.screenmanager.SlideTransition

<RVScreenManager>:
    id: ScreenManager

    ScreenOverview:
        name: "ScreenOverview"
        screen_manager: "ScreenManager"
    ScreenBookings:
        name: "ScreenBookings"
        screen_manager: "ScreenManager"

<ScreenOverview>:
    name:   "ScreenOverview"

    BoxLayout:
        orientation: "vertical"

        MenuBar:

        Button:
            text: 'Overview Screen'
            font_size: 50

<ScreenBookings>:
    name: "ScreenBookings"

    BoxLayout:
        orientation: "vertical"

        MenuBar:

        Button:
            text: 'Bookings Screen'
            font_size: 50

<MenuButton@Button>:
    font_size:      20
    text_size:      self.size
    halign:         "center"
    valign:         "center"

<MenuBar>:
    name: "MenuBar"

    size:       root.size[0], root.size[1]

    MenuButton:
        on_release:
            app.switchScreenOverview()
        text: 'Overview'

    MenuButton:
        on_release:
            app.switchScreenBookings()
        text: 'Bookings'