How can I use one MDTopAppBar across multiple Screens in MDScreenManager?

Question

I am developing an app in KivyMD for Python and I'm having trouble implementing a single MDTopAppBar for multiple screens.

Here's my current code:

from kivymd.app import MDApp
from kivy.lang import Builder
from kivymd.uix.screenmanager import MDScreenManager
from kivymd.uix.screen import MDScreen

c = '''
<BuildApp>:

    MDNavigationLayout:
            
        MDScreenManager:
            id: screener
            FirstScreen:
                
            SecondScreen:
                    
        MDNavigationDrawer:
            id: nav_drawer
            radius: (0, 16, 16, 0)

            MDNavigationDrawerMenu:
                
                MDNavigationDrawerItem:
                    icon: "android"
                    text: "Phone"
                    on_press: screener.current = "page2"

                MDNavigationDrawerItem:
                    icon: "home"
                    text: "Home"
                    on_press: screener.current = "page1"
<FirstScreen>:
    name: "page1"
    MDBoxLayout:
        orientation: 'vertical'
        pos_hint: {"top": 1}
        
        MDTopAppBar:
            title: "Title"
            elevation: 4
            pos_hint: {"top": 1}
            left_action_items: [["menu", lambda x: app.root.ids.nav_drawer.set_state("open")]]
            
        MDFloatingActionButton:
            icon: "home"
            md_bg_color: app.theme_cls.primary_color
            pos_hint: {"center_x":.5}
                    
        Widget:

<SecondScreen>:
    name: "page2"
    MDBoxLayout:
        orientation: 'vertical'
        pos_hint: {"top": 1}
        MDTopAppBar:
            title: "Title"
            elevation: 4
            pos_hint: {"top": 1}
            left_action_items: [["menu", lambda x: app.root.ids.nav_drawer.set_state("open")]]
        ScrollView:
            MDList:
                id: "stuffs"
                OneLineListItem:
                    text: "Hi"
'''

class FirstScreen(MDScreen):
    pass

class SecondScreen(MDScreen):
    pass

sm= MDScreenManager()
sm.add_widget(FirstScreen(name="page1"))

class BuildApp(MDScreen):
    pass


class DemoApp(MDApp):

    def build(self):
        global root_app
        # self.theme_cls.theme_style = "Light"
        self.theme_cls.primary_palette = "Yellow"
        Builder.load_string(c)
        root_app=BuildApp()
        return root_app


DemoApp().run()

Since I can't accomplish the task, I manually coded a new MDTopAppBar for each MDScreen - It sucks, I know - but it's the only way I can implement my ideas given my limited knowledge of KivyMD. I hope you guys can help me. Thanks.

score 0 · Answer 1 · answered Mar 13 '23 at 14:58

Some easy steps:

1) declare your topappbar design in kv file like this
Screenmanager:
    Screen1:
    Screen2:

MDTopAppBar:
    title: hi
    left_action_items: [[customize as needed]]
    right_action_items:[['']]


2)just add Topappbar tag within the screen design in kv file

<Screen1>:
    MDTopAppBar:

How can I use one MDTopAppBar across multiple Screens in MDScreenManager?

1 Answers1