KivyMD: Contents of Screen overlap with Toolbar

Question

I'm writing a simple app in KivyMD. According to the kivy documentation my .kv structure with MDNavigationDrawer and MDToolbar is right and everything works fine as long as the screens are empty. When I add content to them, the content instead of being under the Toolbar is above it. How can I fix it?

Here is my code:

from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ObjectProperty

from kivymd.app import MDApp

KV = '''
<ContentNavigationDrawer>:

    ScrollView:

        MDList:

            OneLineListItem:
                text: "Screen 1"
                on_press:
                    root.nav_drawer.set_state("close")
                    root.screen_manager.current = "scr 1"

            OneLineListItem:
                text: "Screen 2"
                on_press:
                    root.nav_drawer.set_state("close")
                    root.screen_manager.current = "scr 2"


Screen:

    MDToolbar:
        id: toolbar
        pos_hint: {"top": 1}
        elevation: 10
        title: "Test"
        left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]

    NavigationLayout:
        x: toolbar.height

        ScreenManager:
            Screen:
                name: "scr 1"
                ScrollView:
                    BoxLayout:
                        orientation: "vertical"
                        Button:
                            text: "Hello"
                        Button:
                            text: "I wish"
                        Button:
                            text: "I could"
                        Button:
                            text: "Finally get"
                        Button:
                            text: "This to work"


            Screen:
                name: "scr 2"

                MDLabel:
                    text: "Screen 2"
                    halign: "center"

        MDNavigationDrawer:
            id: nav_drawer

            ContentNavigationDrawer:
                screen_manager: screen_manager
                nav_drawer: nav_drawer
'''


class ContentNavigationDrawer(BoxLayout):
    screen_manager = ObjectProperty()
    nav_drawer = ObjectProperty()


class TestNavigationDrawer(MDApp):
    def build(self):
        return Builder.load_string(KV)


TestNavigationDrawer().run()

Output of the following code:

Answer 1

The Screen class is a RelativeLayout, so you must position its children as you would any RelativeLayout. Every child of the Screen gets the default size_hint of (1,1) and the default pos of (0,0), so you must adjust it if that is not what you want. In your case, the NavigationLayout will completely cover the Screen based on those default values. You can fix that by just adding a size_hint_y, like this:

NavigationLayout:
    x: toolbar.height
    size_hint_y: 1.0 - toolbar.height/root.height

This sets the size of the NavigationLayout so that it just meets the bottom of the MDToolbar instead of overlpping it.