How do i make an MDBottomAppBar appear on top of a list view in KivyMD

Question

How do i make an MDBottomAppBar appear on top of a list view in KivyMD

from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivymd.app import MDApp
from kivymd.uix.tab import MDTabsBase
from kivy.uix.screenmanager import Screen, ScreenManager
from kivymd.uix.list import MDList, TwoLineAvatarListItem, OneLineIconListItem, ImageLeftWidget
from kivy.graphics import Canvas, Ellipse
from kivymd.uix.button import MDRaisedButton, MDFlatButton, MDRectangleFlatButton

KV = '''
Screen:
    BoxLayout:
        orientation : 'vertical'
        MDToolbar:
            id: toolbar
            md_bg_color: (41 / 255, 201 / 255, 108 / 255, 1)
            title: "WhatsApp"
            left_action_items: [['menu', lambda x: navdraw.set_state("open")]]
            right_action_items: [['magnify', lambda x: None], ['dots-vertical', lambda x: None]]
        Widget:
        
        MDBottomAppBar:
            md_bg_color: (41 / 255, 201 / 255, 108 / 255, 1)
            id : bottombar
            
            MDToolbar:
                icon: 'share-variant'
                type: 'bottom'
                left_action_items: [['home', lambda x: root.manager.current("HomeScreen")]]
                right_action_items: [['circle', lambda x: None], ['dots-vertical', lambda x: None]]
                mode : "center"
    
    MDNavigationLayout:
        size_hint_y : 1.0 - toolbar.height/root.height
        ScreenManager :
            id : screen_manager
            Screen:
                name : 'HomeScreen'
                BoxLayout:
                    orientation: "vertical"
                    MDTabs:
                        tab_hint_x: True
                        background_color: (41 / 255, 201 / 255, 108 / 255, 1)
                        text_color: (255 / 255, 255 / 255, 255 / 255, 1)
                        halign: 'center'

                        Tab:
                            title: 'CHATS'
                            ScrollView:
                                MDList:
                                    id: tabone

                        Tab:
                            title: 'CALLS'
                            ScrollView:
                                index : 1
                                MDList:
                                    OneLineAvatarListItem:
                                        text: 'Eric Douglas'
                                        ImageLeftWidget:
                                            canvas:
                                                Ellipse:
                                                    source: 'adana.png'
                                                    size: 10, 10
                                                    angle_start: 0
                                                    angle_end: 360

                        Tab:
                            text: 'CALLS'
            ScreenOne:
            
        MDNavigationDrawer:
            id : navdraw
            BoxLayout:
                orientation : 'vertical'
                MDRectangleFlatButton:
                    text: 'Click Me'
                    on_press : 
                        navdraw.set_state("close")
                        screen_manager.current = "firstscreen"
                ScrollView:
                    MDList:
                        id:navdrawer
        
<ScreenOne>:
    name : "firstscreen"
    BoxLayout:
        orientation : 'vertical'
        MDRectangleFlatButton:
            text : "Go to first Screen"
            on_press : root.manager.current = "HomeScreen"
        ScrollView:
            MDList :
                OneLineIconListItem:
                    text: 'FEDERAL GOVERNMENT KILL 300 BOKO HARAM'
                    IconLeftWidget : 
                        icon: 'clock'
'''

    class ScreenOne(Screen):
    pass


sm = ScreenManager()
sm.add_widget(ScreenOne(name="firstscreen"))


class Tab(FloatLayout, MDTabsBase):
    '''Class implementing content for a tab.'''


class Example(MDApp):
    def build(self):
        self.theme_cls.accent_palette = 'Green'
        return Builder.load_string(KV)

    def on_start(self):
        self.my_list()
        self.chat_list()

    def my_list(self):
        for i in range(20):
            list = TwoLineAvatarListItem(text="Hello world")
            list.add_widget(ImageLeftWidget(source='adana.png'))
            self.root.ids.navdrawer.add_widget(list)

    def chat_list(self):
        for i in range(20):
            list = TwoLineAvatarListItem(text="Hello world", on_release=self.printout)
            list.add_widget(ImageLeftWidget(source='adana.png'))
            self.root.ids.tabone.add_widget(list)

    def printout(self, hello):
        hello = "Hello world"
        print(hello)


Example().run()

example of problem encountered

Please How do i make the content of a page go behind an MDBottomAppBar, and i need to bind some parameter with a Label, so i could get the parameter when clicked, just like using get and post to fetch parameters binded with an anchor element in web design

Answer 1

For example:

from kivy.lang import Builder
from kivymd.app import MDApp

KV = '''
<CustomOneLineListItem@OneLineListItem>
    text: "Single-line item"
    
Screen:
    MDBoxLayout
        orientation: 'vertical'
        padding: 0,0,0,bar.height
        ScrollView:
            bar_width: 4
            MDList:
                CustomOneLineListItem:
                CustomOneLineListItem:
                CustomOneLineListItem:
                CustomOneLineListItem:
                CustomOneLineListItem:
                
    MDBottomAppBar:
        MDToolbar:
            id: bar
            title: "Title"
            icon: "git"
            type: "bottom"
            left_action_items: [["menu", lambda x: x]]
'''


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


Test().run()

And please, never attach such a huge amount of code, few people will want to read it, in your case it is not necessary at all, I advise you to attach no more than 100 lines of code