Button on click do not change screen in kivymd

Question

I'm new to kivy and don't getting why my button in navigation drawer do not changing to another class in kivymd there is a button in class ContentNavigationDrawer on click I want it to change to another screen I dont get why it is not changing I already read the documentation about ScreenManager but still not able to understand

this is my code main.py

from kivy.clock import Clock
from kivy.properties import StringProperty
from kivy.uix.screenmanager import Screen, ScreenManager
from kivymd.app import MDApp
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.floatlayout import FloatLayout


class AboutUs(Screen):
    pass


class Share(FloatLayout):
    data = {
        "facebook": "Facebook",
        "whatsapp": "WhatsApp",
        "instagram": "Instagram",
    }

    def callback(self, instance):
        print('Hello')
        print(instance.icon)



class ContentNavigationDrawer(BoxLayout):
    def hllo(self):
        print('Hello though')


class MainScreen(FloatLayout):

    def quote(self, *args):
        self.quote_text = 'I often think that the night is more alive and more richly colored than  
                                    the day. -Vincent van Gogh '
    quote_text = StringProperty()


class TtApp(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)
        self.title = "Story A Day"
        self.theme_cls.theme_style = "Light"

    def build(self):
        self.theme_cls.primary_palette = "Blue"  # "Purple", "Red"
        main = MainScreen()
        Clock.schedule_once(main.quote, 5)


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

and this my main.kv file

Screen:
    AboutUs:

    MainScreen:

    NavigationLayout:

        ScreenManager:

            Screen:

                BoxLayout:
                    orientation: 'vertical'

                    MDToolbar:
                        title: "Quote"
                        anchor_title: 'left'
                        elevation: 10
                        left_action_items: [['menu', lambda x: nav_drawer.set_state()]]
                        mode: "free-center"

                    Widget:



        MDNavigationDrawer:
            title: 'Quote'
            id: nav_drawer
            swipe_distance: 10

            ContentNavigationDrawer:
                id: content_drawer


<ContentNavigationDrawer>
    name: 'main'
    background_color: 2, 3, 4, 5
    orientation: "vertical"
    padding: "8dp"
    spacing: "8dp"

    AnchorLayout:
        anchor_x: "right"
        size_hint_y: None
        height: avatar.height

        Image:
            id: avatar
            size_hint: None, None
            size: "56dp", "56dp"
            source: "data/logo/kivy-icon-256.png"

        MDLabel:
            anchor_y: 'left'
            text: "[b]Story A Day[/b]"
            theme_text_color: "Custom"
            text_color: 0, 0, 0, 1
            markup: True
            font_style: "H4"
            size_hint_y: None
            height: self.texture_size[1]

    MDRaisedButton:
        md_bg_color: 0, 0, 0, 1
        text: 'You Can'
        on_release: root.hllo()

    MDRaisedButton:
        text: 'Click Me'
        on_release: print('Hell')

    MDLabel:
        text: 'Story A Day' 
        font_style: "Button"
        size_hint_y: None
        height: self.texture_size[1]

    OneLineAvatarListItem:
        text: "About Us"

        IconLeftWidget:
            icon: "information"

    Button:
        text: 'hello'
        on_release: app.root.manager.current = 'Abt'


    ScrollView:


<MainScreen>:
    canvas:
        Color:
            rgba: 0, 0, 0, 1 
        Rectangle:
            pos: self.pos
            size: self.size

    Label:
        id: quote
        text: root.quote_text
        font_size: '20sp'
        size: self.texture_size
        pos_hint: {'x': -0.2, 'y': 0.27}


<AboutUs>:
    name: 'Abt'
    Label:
        text: 'Hellooo'

Answer 1

You have to put ScreenManger as rule widget and put your MainScreen at first and in the last put your AboutUs class.