I am very new in kivy and working on a simple application using python. I want to create an application in kivy which comprises of constant menu items on left pane and their respective screens on right big pane or screen. But I am unable to find the solution in kivy examples and also in youtube video tutorials and also in google. Please check my simple code and refer to some solution.
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.base import runTouchApp
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.properties import NumericProperty
#Code Starts here
Builder.load_string("""
#:import random random.random
#:import NoTransition kivy.uix.screenmanager.NoTransition
<MenuScreen>:
hue: random()
canvas:
Color:
hsv: self.hue, .5, .12
Rectangle:
size: self.size
Button:
text: 'Home'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.95}
size: 150, 50
on_release: root.manager.current = 'home'
on_release: root.manager.transition = NoTransition(duration=0)
Button:
text: 'Login History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.88}
size: 150, 50
on_release: root.manager.current = 'loginhistory'
on_release: root.manager.transition = NoTransition(duration=0)
Button:
text: 'Alarm History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.81}
size: 150, 50
on_release: root.manager.current = 'alarmhistory'
on_release: root.manager.transition = NoTransition(duration=0)
Button:
text: 'User Management'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.74}
size: 150, 50
on_release: root.manager.current = 'usermanagement'
on_release: root.manager.transition = NoTransition(duration=0)
Button:
text: 'Call SoS'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.67}
size: 150, 50
on_release: root.manager.current = 'callsos'
on_release: root.manager.transition = NoTransition(duration=0)
Button:
text: 'Settings'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.60}
size: 150, 50
on_release: root.manager.current = 'settings'
on_release: root.manager.transition = NoTransition(duration=0)
Button:
text: 'Call RealTec'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.53}
size: 150, 50
on_release: root.manager.current = 'callrealtec'
on_release: root.manager.transition = NoTransition(duration=0)
BoxLayout:
size_hint: .5, None
height: 250
pos_hint: {'center_x': .5}
orientation: 'vertical'
<HomeScreen>:
hue: random()
canvas:
Color:
hsv: self.hue, .5, .2
Rectangle:
size: self.size
Button:
background_color: [1, 2, 1, 2]
text: 'Home'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.95}
size: 150, 50
Button:
text: 'Login History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.88}
size: 150, 50
on_release: root.manager.current = 'loginhistory'
Button:
text: 'Alarm History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.81}
size: 150, 50
on_release: root.manager.current = 'alarmhistory'
Button:
text: 'User Management'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.74}
size: 150, 50
on_release: root.manager.current = 'usermanagement'
Button:
text: 'Call SoS'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.67}
size: 150, 50
on_release: root.manager.current = 'callsos'
Button:
text: 'Settings'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.60}
size: 150, 50
on_release: root.manager.current = 'settings'
Button:
text: 'Call RealTec'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.53}
size: 150, 50
on_release: root.manager.current = 'callrealtec'
Button:
text: 'Main Menu'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.46}
size: 150, 50
on_release: root.manager.current = 'menu'
BoxLayout:
size_hint: .5, None
height: 250
pos_hint: {'center_x': .5}
orientation: 'vertical'
<LoginHistoryScreen>:
hue: random()
canvas:
Color:
hsv: self.hue, .5, .9
Rectangle:
size: self.size
Button:
text: 'Home'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.95}
size: 150, 50
on_release: root.manager.current = 'home'
Button:
text: 'Login History'
background_color: [1, 2, 1, 2]
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.88}
size: 150, 50
Button:
text: 'Alarm History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.81}
size: 150, 50
on_release: root.manager.current = 'alarmhistory'
Button:
text: 'User Management'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.74}
size: 150, 50
on_release: root.manager.current = 'usermanagement'
Button:
text: 'Call SoS'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.67}
size: 150, 50
on_release: root.manager.current = 'callsos'
Button:
text: 'Settings'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.60}
size: 150, 50
on_release: root.manager.current = 'settings'
Button:
text: 'Call RealTec'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.53}
size: 150, 50
on_release: root.manager.current = 'callrealtec'
Button:
text: 'Main Menu'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.46}
size: 150, 50
on_release: root.manager.current = 'menu'
BoxLayout:
size_hint: .5, None
height: 250
pos_hint: {'center_x': .5}
orientation: 'vertical'
<AlarmHistoryScreen>:
hue: random()
canvas:
Color:
hsv: self.hue, .5, .6
Rectangle:
size: self.size
Button:
text: 'Home'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.95}
size: 150, 50
on_release: root.manager.current = 'home'
Button:
text: 'Login History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.88}
size: 150, 50
on_release: root.manager.current = 'loginhistory'
Button:
text: 'Alarm History'
background_color: [1, 2, 1, 2]
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.81}
size: 150, 50
Button:
text: 'User Management'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.74}
size: 150, 50
on_release: root.manager.current = 'usermanagement'
Button:
text: 'Call SoS'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.67}
size: 150, 50
on_release: root.manager.current = 'callsos'
Button:
text: 'Settings'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.60}
size: 150, 50
on_release: root.manager.current = 'settings'
Button:
text: 'Call RealTec'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.53}
size: 150, 50
on_release: root.manager.current = 'callrealtec'
Button:
text: 'Main Menu'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.46}
size: 150, 50
on_release: root.manager.current = 'menu'
BoxLayout:
size_hint: .5, None
height: 250
pos_hint: {'center_x': .5}
orientation: 'vertical'
<UserManagementScreen>:
hue: random()
canvas:
Color:
hsv: self.hue, .5, .8
Rectangle:
size: self.size
Button:
text: 'Home'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.95}
size: 150, 50
on_release: root.manager.current = 'home'
Button:
text: 'Login History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.88}
size: 150, 50
on_release: root.manager.current = 'loginhistory'
Button:
text: 'Alarm History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.81}
size: 150, 50
on_release: root.manager.current = 'alarmhistory'
Button:
text: 'User Management'
background_color: [1, 2, 1, 2]
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.74}
size: 150, 50
Button:
text: 'Call SoS'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.67}
size: 150, 50
on_release: root.manager.current = 'callsos'
Button:
text: 'Settings'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.60}
size: 150, 50
on_release: root.manager.current = 'settings'
Button:
text: 'Call RealTec'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.53}
size: 150, 50
on_release: root.manager.current = 'callrealtec'
Button:
text: 'Main Menu'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.46}
size: 150, 50
on_release: root.manager.current = 'menu'
BoxLayout:
size_hint: .5, None
height: 250
pos_hint: {'center_x': .5}
orientation: 'vertical'
<CallSoSScreen>:
hue: random()
canvas:
Color:
hsv: self.hue, .5, .7
Rectangle:
size: self.size
Button:
text: 'Home'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.95}
size: 150, 50
on_release: root.manager.current = 'home'
Button:
text: 'Login History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.88}
size: 150, 50
on_release: root.manager.current = 'loginhistory'
Button:
text: 'Alarm History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.81}
size: 150, 50
on_release: root.manager.current = 'alarmhistory'
Button:
text: 'User Management'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.74}
size: 150, 50
on_release: root.manager.current = 'usermanagement'
Button:
text: 'Call SoS'
background_color: [1, 2, 1, 2]
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.67}
size: 150, 50
Button:
text: 'Settings'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.60}
size: 150, 50
on_release: root.manager.current = 'settings'
Button:
text: 'Call RealTec'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.53}
size: 150, 50
on_release: root.manager.current = 'callrealtec'
Button:
text: 'Main Menu'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.46}
size: 150, 50
on_release: root.manager.current = 'menu'
BoxLayout:
size_hint: .5, None
height: 250
pos_hint: {'center_x': .5}
orientation: 'vertical'
<SettingsScreen>:
hue: random()
canvas:
Color:
hsv: self.hue, .5, .5
Rectangle:
size: self.size
Button:
text: 'Home'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.95}
size: 150, 50
on_release: root.manager.current = 'home'
Button:
text: 'Login History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.88}
size: 150, 50
on_release: root.manager.current = 'loginhistory'
Button:
text: 'Alarm History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.81}
size: 150, 50
on_release: root.manager.current = 'alarmhistory'
Button:
text: 'User Management'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.74}
size: 150, 50
on_release: root.manager.current = 'usermanagement'
Button:
text: 'Call SoS'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.67}
size: 150, 50
on_release: root.manager.current = 'callsos'
Button:
text: 'Settings'
background_color: [1, 2, 1, 2]
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.60}
size: 150, 50
Button:
text: 'Call RealTec'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.53}
size: 150, 50
on_release: root.manager.current = 'callrealtec'
Button:
text: 'Main Menu'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.46}
size: 150, 50
on_release: root.manager.current = 'menu'
BoxLayout:
size_hint: .5, None
height: 250
pos_hint: {'center_x': .5}
orientation: 'vertical'
<CallRealTecScreen>:
hue: random()
canvas:
Color:
hsv: self.hue, .5, .4
Rectangle:
size: self.size
Button:
text: 'Home'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.95}
size: 150, 50
on_release: root.manager.current = 'home'
Button:
text: 'Login History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.88}
size: 150, 50
on_release: root.manager.current = 'loginhistory'
Button:
text: 'Alarm History'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.81}
size: 150, 50
on_release: root.manager.current = 'alarmhistory'
Button:
text: 'User Management'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.74}
size: 150, 50
on_release: root.manager.current = 'usermanagement'
Button:
text: 'Call SoS'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.67}
size: 150, 50
on_release: root.manager.current = 'callsos'
Button:
text: 'Settings'
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.60}
size: 150, 50
on_release: root.manager.current = 'settings'
Button:
text: 'Call RealTec'
background_color: [1, 2, 1, 2]
size_hint: None, None
pos_hint: {'center_x':.05, 'center_y':.53}
size: 150, 50
Button:
text: 'Main Menu'
size_hint: None, None
pos_hint: {'center_x':0.05, 'center_y':0.46}
size: 150, 50
on_release: root.manager.current = 'menu'
BoxLayout:
size_hint: .5, None
height: 250
pos_hint: {'center_x': .5}
orientation: 'vertical'
""")
# Declare both screens
class MenuScreen(Screen):
hue = NumericProperty(0)
pass
class HomeScreen(Screen):
hue = NumericProperty(0)
pass
class LoginHistoryScreen(Screen):
hue = NumericProperty(0)
pass
class AlarmHistoryScreen(Screen):
hue = NumericProperty(0)
pass
class UserManagementScreen(Screen):
hue = NumericProperty(0)
pass
class CallSosScreen(Screen):
hue = NumericProperty(0)
pass
class SettingsScreen(Screen):
hue = NumericProperty(0)
pass
class CallRealTecScreen(Screen):
hue = NumericProperty(0)
pass
sm = ScreenManager()
sm.add_widget(MenuScreen(name='menu'))
sm.add_widget(HomeScreen(name='home'))
sm.add_widget(LoginHistoryScreen(name='loginhistory'))
sm.add_widget(AlarmHistoryScreen(name='alarmhistory'))
sm.add_widget(UserManagementScreen(name='usermanagement'))
sm.add_widget(CallSosScreen(name='callsos'))
sm.add_widget(CallRealTecScreen(name='callrealtec'))
sm.add_widget(SettingsScreen(name='settings'))
class TestApp(App):
def build(self):
return sm
if __name__ == '__main__':
TestApp().run()
I didn't read through your code. You should be providing a Minimal, Complete, and Verifiable example. That said here's a short example that you can build upon. The main take away from the example, is that you don't have to add ScreenManager as a top level widget.
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
class Manager(ScreenManager):
def __init__(self, *args, **kwargs):
super(Manager, self).__init__(*args, **kwargs)
for i in range(4):
txt = 'Screen {}'.format(i)
lbl = Label(text=txt)
screen = Screen(name=txt)
screen.add_widget(lbl)
self.add_widget(screen)
class Nav(GridLayout):
def __init__(self, sm=None, *args, **kwargs):
super(Nav, self).__init__(*args, **kwargs)
self.sm = sm
self.rows = 4
self.size_hint = (.2, 1)
for i in range(4):
self.add_widget(Button(text="Screen {}".format(i), on_release=self.change))
def change(self, btn):
self.sm.current = btn.text
class Root(BoxLayout):
def __init__(self, *args, **kwargs):
super(Root, self).__init__(*args, **kwargs)
self.orientation = "horizontal"
sm = Manager()
self.add_widget(Nav(sm=sm))
self.add_widget(sm)
class TestApp(App):
def build(App):
return Root()
if __name__ == '__main__':
TestApp().run()