CODEWITHSUNDEEP
pythonkivy
Olive Yew
Olive Yew

Reputation: 371

Adding Bottom Navigation to scroll between multiple screens

I'm trying to add bottom navigation so i can scroll between different screens. However i'm not sure where to add it in my kv file, since when i'm adding it now, it overrides the rest of the screen. When i'm, trying to add it before the other elements i get the error invalid position.

My python file:

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen,ScreenManager
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen
from kivy.core.window import Window
from kivymd.app import MDApp
from kivy.uix.image import Image
from kivy.animation import Animation
from kivy.clock import Clock
from kivy.properties import ColorProperty
from kivy.uix.popup import Popup
from kivy.uix.floatlayout import FloatLayout

Window.clearcolor = (1,1,1,1)
Window.size = (360,600)


kv = Builder.load_file("Editor.kv")

class MainWindow(Screen):
    pass

class SecondWindow(Screen):
    pass

class OutputWindow(Screen):
    pass

class WindowManager(ScreenManager):
    pass

class EditorApp(MDApp):
    def build(self):
        return WindowManager()


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

and my kv file

#:import utils kivy.utils
<WindowManager>:
    MainWindow:
    SecondWindow:
    OutputWindow:

<MainWindow>
    name:"main"
    FloatLayout:
        size: root.width, root.height
        TextInput:
            id: user_input
            pos_hint:{"x" : 0.05, "top" : 0.9}
            size_hint: 0.9, 0.37
        Label:
            markup: True
            id:input_label
            pos_hint:{"x" : 0, "top":1}
            size_hint: 1 ,0.08
            text: "[font=Roboto] TEST"
            font_size : 32
            bold: True
            canvas.before:
                Color:
                    rgb: utils.get_color_from_hex("01121c")
                Rectangle:
                    size: self.size
                    pos: self.pos
        Button:
            pos_hint:{"top" : 0.51, "x" : 0.05}
            size_hint: (None,None)
            width : 150
            height : 40
            font_size : 23
            text:'Summarize'
            on_release: app.root.current = "output"
        Button:
            pos_hint:{"top":0.47, "x":0.8}
            size_hint: (None,None)
            width : 50
            height : 22
            font_size : 23
            text:'i'
    MDBottomNavigation:
        panel_color: rgba('262626')
        MDBottomNavigationItem:
            icon: 'home'
            text: 'home'

<SecondWindow>:
    name: "second"
    FloatLayout:
        size: root.width, root.height
        TextInput:
            id: user_input
            pos_hint:{"x" : 0.05, "top" : 0.9}
            size_hint: 0.9, 0.37
        Button:
            pos_hint:{"top":0.42, "x":0.05}
            size_hint: (None,None)
            width : 150
            height : 40
            font_size : 23
            text:'Upload'
        Button:
            pos_hint:{"top":0.47, "x":0.8}
            size_hint: (None,None)
            width : 50
            height : 22
            font_size : 23
            text:'i'

<OutputWindow>:
    name: "output"
    Button:
        text :"Go Back"
        on_release: app.root.current = "main"

I would like the Navigation bar to appear in all three windowws, so i am able to scroll between them. Thanks.

Upvotes: 0

Views: 503

Answers (1)

NameKhan72
NameKhan72

Reputation: 717

the trick with BottomNavigation is, that it functions as kind of a Screenmanager of its own. In Kotlin you would use fragments for this.

I have corrected your code to make it function the way you intended. Let me know, if you have any more questions.

main.py

from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen,ScreenManager
from kivy.uix.widget import Widget
from kivy.properties import ObjectProperty
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen
from kivy.core.window import Window
from kivymd.app import MDApp
from kivy.uix.image import Image
from kivy.animation import Animation
from kivy.clock import Clock
from kivy.properties import ColorProperty
from kivy.uix.popup import Popup
from kivy.uix.floatlayout import FloatLayout

Window.clearcolor = (1,1,1,1)
Window.size = (360,600)


class MainWindow(Screen):
    pass

class SecondWindow(Screen):
    pass

class OutputWindow(Screen):
    pass

class WindowManager(ScreenManager):
    pass


class EditorApp(MDApp):
    def build(self):
        kv = Builder.load_file("main.kv")
        return WindowManager()


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

main.kv

#:import utils kivy.utils
<WindowManager>:
    MainWindow:

<MainWindow>
    BoxLayout:
        orientation:'vertical'

        MDBottomNavigation:
            panel_color: .2, .2, .2, 1

            MDBottomNavigationItem:
                name: 'main'
                text: 'main'
                icon: 'account-circle'

                FloatLayout:
                    size: root.width, root.height
                    TextInput:
                        id: user_input
                        pos_hint:{"x" : 0.05, "top" : 0.9}
                        size_hint: 0.9, 0.37
                    Label:
                        markup: True
                        id:input_label
                        pos_hint:{"x" : 0, "top":1}
                        size_hint: 1 ,0.08
                        text: "[font=Roboto] TEST"
                        font_size : 32
                        bold: True
                        canvas.before:
                            Color:
                                rgb: utils.get_color_from_hex("01121c")
                            Rectangle:
                                size: self.size
                                pos: self.pos
                    Button:
                        pos_hint:{"top" : 0.51, "x" : 0.05}
                        size_hint: (None,None)
                        width : 150
                        height : 40
                        font_size : 23
                        text:'Summarize'
                        on_release: app.root.current = "output"
                    Button:
                        pos_hint:{"top":0.47, "x":0.8}
                        size_hint: (None,None)
                        width : 50
                        height : 22
                        font_size : 23
                        text:'i'

            MDBottomNavigationItem:
                name: 'second'
                text: 'second'
                icon: 'account-circle'

                FloatLayout:
                    size: root.width, root.height
                    TextInput:
                        id: user_input
                        pos_hint:{"x" : 0.05, "top" : 0.9}
                        size_hint: 0.9, 0.37
                    Button:
                        pos_hint:{"top":0.42, "x":0.05}
                        size_hint: (None,None)
                        width : 150
                        height : 40
                        font_size : 23
                        text:'Upload'
                    Button:
                        pos_hint:{"top":0.47, "x":0.8}
                        size_hint: (None,None)
                        width : 50
                        height : 22
                        font_size : 23
                        text:'i'

            MDBottomNavigationItem:
                name: 'output'
                text: 'output'
                icon: 'account-circle'

                Button:
                    text :"Go Back"
                    on_release: app.root.current = "main"

Have a nice day!

Upvotes: 1

Related Questions