Python Transparent KivyMD Navigation Drawer

Question

I'm trying to apply some changes to my app (digital planner), one of which is being able to switch screens within MDNavigationDrawer, but I have two problems:

1. The nav. drawer is transparent. I tried setting its opacity equal to 1 - didn't work.
2. The nav. drawer seems to be "under" the screen. If positions of a button on the nav. drawer and a button on the screen match, button being pressed is the one that's one the screen, not the one that's on the nav. drawer.

Here's what the MDNavigationDrawer looks like

Here's a bit of my Kivy code:

BoxLayout:
    orientation: "vertical"

    manager: manager
    nav_drawer: nav_drawer

    MDToolbar:
        id: tb
        type: "top"
        title: "VPlanner"
        left_action_items: [["menu", lambda x: nav_drawer.set_state()]]
        right_action_items: [["settings", lambda x: app.open_settings()]]

    NavigationLayout:
        x: tb.height
    
        MDNavigationDrawer:
            id: nav_drawer

            ContentNavigationDrawer:    

        ScreenManager:
            id: manager

            menu_window: menu_window
            stats_window: stats_window
            history_window: history_window

            MenuWindow:
                id: menu_window

            StatsWindow:
                id: stats_window

            HistoryWindow:
                id: history_window


<ContentNavigationDrawer>:
    cols: 1
    orientation: "vertical"

    OneLineListItem:
        text: "Menu"

        size_hint: 1, None
        on_release: 
            app.root.nav_drawer.set_state("close")
            app.root.manager.current = "menu"

    OneLineListItem:
        text: "Statistics"

        size_hint: 1, None
        on_release: 
            app.root.nav_drawer.set_state("close")
            app.root.manager.current = "stats"

    OneLineListItem:
        text: "History"

        size_hint: 1, None
        on_release: 
            app.root.nav_drawer.set_state("close")
            app.root.manager.current = "history"

And here's a tiny bit of my Python code:

# there were lots of lines in each class representing screens,
# so I only left the ContentNavigationDrawer class, which is,
# as you already figured it out, supposed to represent content
# displayed in the MDNavigationDrawer.


class ContentNavigationDrawer(GridLayout):
    pass

Thanks in advance!

Answer 1

Problem

The Navigation Drawer appears transparent because it was placed before the ScreenManager.

Solution

Place MDNavigationDrawer: after ScreenManager:

Snippets

NavigationLayout:
    x: tb.height

    ScreenManager:
        id: manager

        ...
        HistoryWindow:
            id: history_window

    MDNavigationDrawer:
        id: nav_drawer

        ContentNavigationDrawer:

Output