How to achieve a tabbed panel to be under the header (KivyMD/Python)?

Question

I get this error: kivy.factory.FactoryException: Unknown class

Maybe my tabs.kv is a bit wrong but I dunno in my case where or how to put TabbedPanel class.

My header.kv

<Header>
    name: 'header'
    orientation: 'vertical'

    BoxLayout:
        orientation: 'vertical'

        MDTopAppBar:
            title: "Demo"
            left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]
            elevation: 4  # shadow
            font_size: 14
            md_bg_color: 0.21, 0.34, 0.43, 1     # 0,0 100/255, 1

        Widget:

    MDNavigationDrawer:
        id: nav_drawer
        BoxLayout:  # for the navigation drawer content
            orientation: 'vertical'
            spacing: '8dp'
            padding: '8dp'

            Image:
                source: 'byard.png'
            MDLabel:
                text: 'Alejandro'
                font_style: 'Subtitle1'
                size_hint_y: None
                height: self.texture_size[1]

            MDLabel:
                text: 'test'
                font_style: 'Caption'
                size_hint_y: None
                height: self.texture_size[1]

            ScrollView:
                MDList:
                    OneLineIconListItem:
                        text: 'Profile'
                    IconLeftWidget:
                        icon: 'account'
                    OneLineIconListItem:
                        text: 'Email'
                    IconLeftWidget:
                        icon: 'email'

And my tabs.kv

<Tabs>
    name: 'tabs'
    orientation: 'vertical'

    Tabbedpanel
        do_default: False

    TabbedPanelItem:
        text: "Start here"
        Label:
            text: "Hello"

    TabbedPanelItem:
        text: "Benefits"
        BoxLayout:
            Button:
                text: "Mental"
            Button:
                text: "Physical"
            Button:
                text: "Emotional"
            Button:
                text: "Spiritual"

    TabbedPanelItem:
        text: "Quotes"
        Image:
            source: "byard.png"

Lastly my main.kv

ScreenManager:
    Header:
    Tabs:

My main.py file


from kivy.core.window import Window  # keeps it mobile size when testing
Window.size = (360,600)  # remove this when the app is done
from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager
from kivy.lang import Builder
from kivymd.uix.textfield import MDTextFieldRect


class Header(Screen):
    pass

class Tabs(Screen):
    pass

sm = ScreenManager()
sm.add_widget(Header(name='header'))
sm.add_widget(Tabs(name='tabs'))

class MainApp(MDApp):
    def build(self):
        self.theme_cls.theme_style = "Light"
        self.theme_cls.primary_palette = "Blue"
        sm = Builder.load_file("Main.kv")

        return sm

MainApp().run()

What I am trying to do is like the photo shows, to have my TabbedPanel and its tabs under the header (MDTopAppBar). I have separate kv files and its all interconnected but I'm missing something with TabbedPanel as that is causing error. Partially it could be bad syntax or indentation i guess but i think i dont know where to assign Tabbed panel or how

maybe this helps https://stackoverflow.com/questions/46125196/kivy-error-raise-factoryexceptionunknown-class-s-name — Amin Etesamian, Jan 02 '23 at 17:17

score 0 · Accepted Answer · answered Jan 02 '23 at 18:01

You have too much code and it is unreadable, but I made an application template for you, as in the picture, using the MDTabs of the KivyMD module. What you want to do should be implemented this way.

from kivymd.app import MDApp
from kivymd.uix.tab import MDTabsBase
from kivymd.uix.floatlayout import MDFloatLayout

from kivy.lang.builder import Builder

KV = """
<Tab>
    MDLabel:
        text: root.title
        halign: 'center'
        font_style: 'H2'


MDBoxLayout:
    orientation: "vertical"
    
    MDTopAppBar:
        id: top_bar
        pos_hint: {'top': 1}
        title: 'Page title'
        left_action_items: [['menu', lambda x: print(x)]]
        right_action_items: [['magnify', lambda x: print(x)], ['dots-vertical', lambda x: print(x)]]
        
    MDTabs:
        id: tabs
        on_tab_switch: app.on_tab_switch(*args)
        tab_hint_x: True
        
"""


class Tab(MDFloatLayout, MDTabsBase):
    """
    Class implementing content for a tab
    """


class TestApp(MDApp):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

    def build(self):
        return Builder.load_string(KV)

    def on_start(self):
        for i in range(3):
            self.root.ids.tabs.add_widget(Tab(title=f'Item: {i + 1}'))

    def on_tab_switch(
            self, instance_tabs, instance_tab, instance_tab_label, tab_text
    ):
        """
        Called when switching tabs.

        :type instance_tabs: <kivymd.uix.tab.MDTabs object>;
        :param instance_tab: <__main__.Tab object>;
        :param instance_tab_label: <kivymd.uix.tab.MDTabsLabel object>;
        :param tab_text: text or name icon of tab;
        """

        print(f"Welcome to {instance_tab.title}' tab'")


TestApp().run()

How to achieve a tabbed panel to be under the header (KivyMD/Python)?

1 Answers1