How can I change layout of MDBoxLayout, id: body_box in MsgCard, remove MDLabel, id: msg_count then add Checkbox, id: flagged in place at runtime? Here's the kivy file...
<MsgCard#MDBoxLayout>:
id: msg_container
adaptive_height: True
spacing: dp(10)
padding: (dp(5),)*4
FitImage:
id: msg_image
source: root.avatar
size_hint: 0.09, None
height: dp(30)
pos_hint: {"top": 1}
radius: (10,)*4
MDBoxLayout:
orientation: "vertical"
MDBoxLayout:
MDLabel:
text: root.sender
font_style: "Subtitle2"
MDLabel:
text: root.received
font_size: "12sp"
halign: "right"
size_hint_x: 0.25
MDBoxLayout:
id: body_box
MDLabel:
text: root.body
shorten: True
shorten_from: "right"
font_style: "Caption"
MDLabel:
id: msg_count
text: root.count
size_hint: None, None
post_hint: {"center_y": 0.5}
size: (dp(17),)*2
font_size: "12sp"
halign: "center"
theme_text_color: "Custom"
text_color: 1,1,1,1
opacity: 1 if root.count != "0" else 0
canvas.before:
Color:
rgba: 1,0,0,1
RoundedRectangle:
size: self.size
pos: self.pos
radius: (dp(3),)*2
<Checkbox#MDCheckbox>
id: flagged
size_hint: None, None
size: (dp(17),)*2
I added KivyMD BottomNavigation to my App, I am able to switch screens with icon, but the issue is switching back to a screen containing the BottomNavigation
(let's say we in any of the screens containing Toolbar and BottomNavigation, we use the toolbar to switch to a entirely different screen, I am unable to go back to the previous screen or even navigate to any of thr screens containing the bottomnavigation and toolbar, it returns a blank white screen).
Despite naming the screen, so my question is; 1. am I refering (naming) the BottomNavigationItem wrongly, if yes please what should I change. (2) is there something am missing, please let me know.
Thank you.
here's my main.py file
from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager, NoTransition
from kivy.core.window import Window
Window.size = (300, 530)
class MainScreen(Screen):
pass
class IntroScreen(Screen):
pass
class WaysScreen(Screen):
pass
class To_DoScreen(Screen):
pass
class SuccessScreen(Screen):
pass
class GoalsScreen(Screen):
pass
class BellaBaron(Screen):
pass
class SearchScreen(Screen):
pass
class MenuScreen(Screen):
pass
class CalendarScreen(Screen):
pass
class ExtraScreen(Screen):
pass
class ArchiveScreen(Screen):
pass
class Contact_InfoScreen(Screen):
pass
class TenThousandApp(MDApp):
def build(self):
self.theme_cls.primary_palette = 'Green'
self.theme_cls.primary_hue = '200'
# self.theme_cls.theme_style = 'Light'
self.sm = ScreenManager(transition=NoTransition())
self.sm.add_widget(MainScreen(name="main_screen"))
self.sm.add_widget(IntroScreen(name="intro_screen"))
self.sm.add_widget(WaysScreen(name="ways_screen"))
self.sm.add_widget(To_DoScreen(name="to_do_screen"))
self.sm.add_widget(SuccessScreen(name="success_screen"))
self.sm.add_widget(GoalsScreen(name="goals_screen"))
self.sm.add_widget(BellaBaron(name="bella_baron"))
self.sm.add_widget(SearchScreen(name="search_screen"))
self.sm.add_widget(MenuScreen(name="menu_screen"))
self.sm.add_widget(CalendarScreen(name="calendar_screen"))
self.sm.add_widget(ExtraScreen(name="extra_screen"))
self.sm.add_widget(ArchiveScreen(name="archive_screen"))
self.sm.add_widget(Contact_InfoScreen(name="contact_info_screen"))
return self.sm
def change_screen(self, screen):
self.sm.current = screen
TenThousandApp().run()
and here's my .kv file
# ScreenManager:
#start of imagelist
<MyTile#SmartTileWithLabel>
size_hint_y: None
height: "240dp"
<MainScreen>:
MDBottomNavigation:
# panel_color: .2, .2, .2, 1
MDBottomNavigationItem:
name: "intro_screen"
text: 'home'
icon: 'home'
MDBoxLayout:
orientation: 'vertical'
# md_bg_color: app.theme_cls.bg_dark
MDToolbar:
id: intro_screen_toolbar
title: '[font=Gabriola][size=40][color=#FD0101]First[/color][/size][size=28]project[/size][/font]'
right_action_items: [["calendar-month", lambda x: app.change_screen('to_do_screen')]] #links to to-do listss screen
elevation: "8dp"
MDCard:
orientation: 'vertical'
padding: 16
size_hint: None, None
size: "280dp", "360dp"
pos_hint: {"center_x": .5, "center_y": .6}
height: root.height - intro_screen_toolbar.height - dp(55)
y: root.height - intro_screen_toolbar.height - dp(50)
elevation: "8dp"
orientation: 'vertical'
radius: 15
ScrollView:
MDLabel:
markup: True
size_hint_y: None
size: self.texture_size
text:
"""[b][i]“Your time is limited, so don’t waste it living someone else’s life. Don’t be trapped by dogma – which is living with the results of other people’s thinking. Don’t let the noise of other’s opinions drown out your own inner voice. And most important, have the courage to follow your heart and intuition. They somehow already know what you truly want to become. Everything else is secondary.”[/i][/b]
– Steve Jobs"""
MDBottomNavigationItem:
name: "success_screen"
text: 'home'
icon: 'account-group'
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: success_screen_toolbar
title: "Success Stories"
right_action_items: [["progress-clock", lambda x: app.change_screen('goals_screen')]] #links to goals and how screen
elevation: "8dp"
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
padding: dp(4), dp(4)
spacing: dp(4)
MyTile:
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
text: "[size=26]Cat 1[/size]\\n[size=14]cat-1.jpg[/size]"
on_release:
app.root.current = 'bella_baron'
MyTile:
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
text: "[size=26]Cat 2[/size]\\n[size=14]cat-2.jpg[/size]"
tile_text_color: app.theme_cls.accent_color
MyTile:
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
text: "[size=26][color=#ffffff]Cat 3[/color][/size]\\n[size=14]cat-3.jpg[/size]"
tile_text_color: app.theme_cls.accent_color
MDBottomNavigationItem:
name: "search_screen"
text: 'search'
icon: 'magnify'
FloatLayout:
MDTextField:
mode: 'fill'
hint_text: "Search"
pos_hint: {"center_x": .5,"center_y": .9}
size_hint_x: None
width: 280
MDBottomNavigationItem:
name: "menu_screen"
text: 'menu'
icon: 'menu'
BoxLayout:
orientation: "vertical"
md_bg_color: (240/255, 240/255, 240/255, 1)
MDToolbar:
id: menu_screen_toolbar
title: "Tools"
elevation: "8dp"
MDCard:
orientation: 'vertical'
padding: 16
size_hint: None, None
size: "280dp", "360dp"
pos_hint: {"center_x": .5, "center_y": .6}
height: root.height - menu_screen_toolbar.height - dp(55)
y: root.height - menu_screen_toolbar.height - dp(50)
elevation: 8
orientation: 'vertical'
radius: 15
ScrollView:
MDList:
OneLineIconListItem:
text: "Calendar"
on_release:
app.root.current = "calendar_screen"
IconLeftWidget:
icon: "calendar-month"
OneLineIconListItem:
text: "Extra"
on_release:
app.root.current = "extra_screen"
IconLeftWidget:
icon: "notebook-multiple"
OneLineIconListItem:
text: "Archive"
on_release:
app.root.current = "archive_screen"
IconLeftWidget:
icon: "archive"
OneLineIconListItem:
text: "contact Us"
on_release:
app.root.current = "contact_info_screen"
IconLeftWidget:
icon: "email-mark-as-unread"
<WaysScreen>
name: "ways_screen"
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: ways_screen_toolbar
title: "How-tos"
left_action_items: [['keyboard-backspace', lambda x: app.change_screen('intro_screen')]] # to add more list
left_action_items: [['keyboard-backspace', lambda x: app.change_screen('intro_screen')]]
elevation: "8dp"
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
spacing: 10
padding: 10
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
Image:
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello dear'
ScrollView:
MDLabel:
size_hint_y: None
size: self.texture_size
# halign: 'center'
text:
"""This screens contains a MDcard which where the image is placed, and a MDLabel and neccessary widgets used to tell the success story, under the MDCard."""
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello boss'
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello goodness'
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello hi'
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello yes?'
<To_DoScreen>
name: "to_do_screen"
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: to_do_screen_toolbar
title: 'To-Do-List'
right_action_items: [['plus', lambda x: x]] # to add more list
left_action_items: [['keyboard-backspace', lambda x: app.change_screen('intro_screen')]]
elevation: "8dp"
MDCard:
orientation: 'vertical'
padding: 16
elevation: 8
radius: 15
size_hint: None, None
size: '280', '360'
pos_hint: {"center_x": .5, "center_y": .6}
height: root.height - to_do_screen_toolbar.height + dp(10)
y: root.height - to_do_screen_toolbar.height - dp(20)
<GoalsScreen>
name: 'goals_screen'
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: goals_screen_toolbar
title: 'Goals'
left_action_items: [['keyboard-backspace', lambda x: app.change_screen('success_screen')]]
elevation: "8dp"
MDCard:
orientation: 'vertical'
padding: 16
size_hint: None, None
size: "280dp", "360dp"
pos_hint: {"center_x": .5, "center_y": .6}
height: root.height - goals_screen_toolbar.height + dp(10)
y: root.height - goals_screen_toolbar.height - dp(20)
elevation: "8dp"
orientation: 'vertical'
radius: 15
<BellaBaron>
name: 'bella_baron'
BoxLayout:
orientation: 'vertical'
md_bg_color: (240/255, 240/255, 240/255, 1)
MDToolbar:
id: bella_baron_toolbar
title: "Bella Baron"
left_action_items: [["keyboard-backspace", lambda x: app.change_screen('success_screen')]]
right_action_items: [["progress-check", lambda x: app.change_screen('goals_screen')]] #link to progress screen
elevation: "8dp"
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
spacing: 10
padding: 10
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
Image:
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello dear'
ScrollView:
MDLabel:
size_hint_y: None
size: self.texture_size
# halign: 'center'
text:
"""This screens contains a MDcard which where the image is placed, and a MDLabel and neccessary widgets used to tell the success story, under the MDCard."""
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello boss'
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello goodness'
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello hi'
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello yes?'
<CalendarScreen>
name: "calendar_screen"
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: calendar_screen_toolbar
title: 'Calendar'
left_action_items: [['keyboard-backspace', lambda x: app.change_screen('menu_screen')]]
right_action_items: [['calendar', lambda x: x]] # on press returns today's date
elevation: "8dp"
MDCard:
orientation: 'vertical'
padding: 16
elevation: 8
radius: 15
size_hint: None, None
size: '280', '360'
pos_hint: {"center_x": .5, "center_y": .6}
height: root.height - calendar_screen_toolbar.height + dp(10)
y: root.height - calendar_screen_toolbar.height - dp(20)
# I will remove this screen if there is no need for it.
<ExtraScreen>
name: "extra_screen"
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: extra_screen_toolbar
title: 'Extra'
left_action_items: [['keyboard-backspace', lambda x: app.change_screen('menu_screen')]]
elevation: "8dp"
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
spacing: 10
padding: 10
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
Image:
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello dear'
ScrollView:
MDLabel:
size_hint_y: None
size: self.texture_size
# halign: 'center'
text:
"""This screens contains a MDcard which where the image is placed, and a MDLabel and neccessary widgets used to tell the success story, under the MDCard."""
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello boss'
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello goodness'
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello hi'
MDCard:
size_hint: None, None
size: "280dp", "130dp"
radius: 15
caption: 'Hello yes?'
<ArchiveScreen>
name: "archive_screen"
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: archive_screen_toolbar
title: 'Archive'
left_action_items: [['keyboard-backspace', lambda x: app.change_screen('menu_screen')]]
elevation: "8dp"
MDCard:
orientation: 'vertical'
padding: 16
elevation: 8
radius: 15
size_hint: None, None
size: '280', '360'
pos_hint: {"center_x": .5, "center_y": .6}
height: root.height - archive_screen_toolbar.height + dp(10)
y: root.height - archive_screen_toolbar.height - dp(20)
<Contact_InfoScreen>
name: "contact_info_screen"
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: contact_info_screen_toolbar
title: 'Contact Info'
left_action_items: [['keyboard-backspace', lambda x: app.change_screen('menu_screen')]]
elevation: "8dp"
MDCard:
orientation: 'vertical'
padding: 16
elevation: 8
radius: 15
size_hint: None, None
size: '280', '360'
pos_hint: {"center_x": .5, "center_y": .6}
height: root.height - contact_info_screen_toolbar.height + dp(10)
y: root.height - contact_info_screen_toolbar.height - dp(20)
ScrollView:
MDLabel:
size_hint_y: None
size: self.texture_size
text:
"""feel free to reach us #"""
To change to a different MDBottomNavigationItem in a MDBottomNavigation, you should use the switch_tab() method of MDBottomNavigation. You can add a method to your TenThousandApp class:
def change_screen_item(self, nav_item):
# change to the MainScreen and switch to the spcified MDBottomNavigationItem
s = self.sm.get_screen('main_screen')
s.ids.bottom_nav.switch_tab(nav_item)
self.sm.current = 'main_screen'
In your kv, you must add an id for the MDBottomNavigation:
<MainScreen>:
MDBottomNavigation:
id: bottom_nav
# panel_color: .2, .2, .2, 1
That id is used to access the MDBottomNavigation instance.
Then in the kv, you can use the change_screen_item() to switch to the MainScreen and switch to the specified MDBottomNavigationItem, like this:
<CalendarScreen>
name: "calendar_screen"
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: calendar_screen_toolbar
title: 'Calendar'
left_action_items: [['keyboard-backspace', lambda x: app.change_screen_item('intro_screen')]]
right_action_items: [['calendar', lambda x: x]] # on press returns today's date
elevation: "8dp"
The above code will switch to the intro_screen item of the MainScreen.
Here I am trying to build a app having navigation bar.The navigation bar have OneLineListItem when I click those items the screen changes but label is not appearing.I also tried adding multiple buttons in the layout it works fine.But when I add Label it is not being displayed.
Following is the kv language code I used:-
#:import FadeTransition kivy.uix.screenmanager.FadeTransition
# Menu item in the DrawerList list.
<ItemDrawer>:
theme_text_color: "Custom"
on_release: self.parent.set_color_item(self)
IconLeftWidget:
id: icon
icon: root.icon
theme_text_color: "Custom"
text_color: root.text_color
<ContentNavigationDrawer>:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
AnchorLayout:
anchor_x: "left"
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:
text: "Voice Cloning Tool"
font_style: "Button"
size_hint_y: None
height: self.texture_size[1]
MDLabel:
text: "MENU"
font_style: "Caption"
size_hint_y: None
height: self.texture_size[1]
ScrollView:
DrawerList:
OneLineListItem:
text:'Home'
on_release:app.root.current='home_screen'
OneLineListItem:
text:'Record Voice'
on_release:app.root.current='rec_screen'
OneLineListItem:
text:'Help'
OneLineListItem:
text:'About'
OneLineListItem:
text:'Contact Us'
ScreenManagement:
transition:FadeTransition()
HomeScreen:
RecordScreen:
AboutScreen:
ContactUSScreen:
<HomeScreen>:
name:'home_screen'
NavigationLayout:
ScreenManager:
Screen:
SliderWin
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Explore Voice cloning Tool"
elevation: 10
left_action_items: [['menu', lambda x: nav_drawer.toggle_nav_drawer()]]
Widget:
MDNavigationDrawer:
id: nav_drawer
ContentNavigationDrawer:
id: content_drawer
<RecordScreen>:
name:'rec_screen'
NavigationLayout:
ScreenManager:
Screen:
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Explore Voice cloning Tool"
elevation: 10
left_action_items: [['menu', lambda x: nav_drawer.toggle_nav_drawer()]]
Button:
text:'Hello World'
size_hint:0.5,0.1
pos_hint:{'x':0.5,'y':0.5}
Button:
text:'Hello World'
size_hint:0.5,0.1
pos_hint:{'x':0.5,'y':0.5}
MDNavigationDrawer:
id: nav_drawer
ContentNavigationDrawer:
id: content_drawer
I was being idiot here.I forgot the fact that by default the label has white color.Here my background was white too that was the reason it was not being displayed.
I changed the color of the label to some other color and it displayed.Below is the changed code:-
#:import FadeTransition kivy.uix.screenmanager.FadeTransition
# Menu item in the DrawerList list.
<ItemDrawer>:
theme_text_color: "Custom"
on_release: self.parent.set_color_item(self)
IconLeftWidget:
id: icon
icon: root.icon
theme_text_color: "Custom"
text_color: root.text_color
<ContentNavigationDrawer>:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
AnchorLayout:
anchor_x: "left"
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:
text: "Voice Cloning Tool"
font_style: "Button"
size_hint_y: None
height: self.texture_size[1]
MDLabel:
text: "MENU"
font_style: "Caption"
size_hint_y: None
height: self.texture_size[1]
ScrollView:
DrawerList:
OneLineListItem:
text:'Home'
on_release:app.root.current='home_screen'
OneLineListItem:
text:'Record Voice'
on_release:app.root.current='rec_screen'
OneLineListItem:
text:'Help'
OneLineListItem:
text:'About'
OneLineListItem:
text:'Contact Us'
ScreenManagement:
transition:FadeTransition()
HomeScreen:
RecordScreen:
AboutScreen:
ContactUSScreen:
<HomeScreen>:
name:'home_screen'
NavigationLayout:
ScreenManager:
Screen:
SliderWin
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Explore Voice cloning Tool"
elevation: 10
left_action_items: [['menu', lambda x: nav_drawer.toggle_nav_drawer()]]
Widget:
MDNavigationDrawer:
id: nav_drawer
ContentNavigationDrawer:
id: content_drawer
<RecordScreen>:
name:'rec_screen'
NavigationLayout:
ScreenManager:
Screen:
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: "Explore Voice cloning Tool"
elevation: 10
left_action_items: [['menu', lambda x: nav_drawer.toggle_nav_drawer()]]
Label:
text:'Hello World'
size_hint:0.5,0.1
pos_hint:{'x':0.5,'y':0.5}
color:1,0,1,1
Button:
text:'Hello World'
size_hint:0.5,0.1
pos_hint:{'x':0.5,'y':0.5}
MDNavigationDrawer:
id: nav_drawer
ContentNavigationDrawer:
id: content_drawer
I am new to Kivy, so I have a question that I want to develop two screen in Kivy, the first one is about entering user details and passwords (no authentication, at this moment) and then second screen displays the user name (entered at the previous screen) and displays user name along with other widgets.
The basic idea is to get the value of a user form userlogin screen and display it to another screen.
Here is my code,
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.properties import StringProperty # #UnresolvedImport
class LoginScreen(Screen):
text = StringProperty()
def change_text(self):
self.text = ''
self.manager.current = 'StocksGUIScreen'
class StocksGUIScreen(Screen):
label_text = StringProperty('')
#pass
class PortfolioUIApp(App):
#user_name = StringProperty()
pass
PortfolioUIApp().run()
Here is my .kv file:
ScreenManager:
id: screen_manager
LoginScreen:
id: login_screen
name: 'LoginScreen'
manager: screen_manager
StocksGUIScreen:
id: stocks_gui
name: 'StocksGUIScreen'
manager: screen_manager
label_text: login_screen.text
<LoginScreen>:
BoxLayout:
orientation: 'vertical'
BoxLayout:
Label:
text: "User Name"
size_hint: 0.3,0.2
#pos: root.x, root.top-self.height
color: 0,1,0,1
TextInput:
id: user_name
size_hint: 0.3,0.2
#on_text: root.user_name
BoxLayout:
Label:
text: "Password"
size_hint: 0.3,0.2
TextInput:
id: pass_word
password: True
size_hint: 0.3,0.2
BoxLayout:
Button:
text: 'Log In'
size_hint: 0.3,0.2
on_press:
#root.manager.current = 'StocksGUIScreen'
root.label_text: user_name
root.change_text()
Button:
text: 'Cancel'
size_hint: 0.3,0.2
on_release: app.stop()
<StocksGUIScreen>:
BoxLayout:
orientation: 'vertical'
BoxLayout:
orientation: 'horizontal'
TextInput:
size_hint_x: 50
id: ticker_search
Button:
text: "Go"
size_hint_x: 25
on_press: root.search_stock()
id: search_box
Label:
text: root.label_text
size_hint_x: 25
BoxLayout:
height: "10dp"
size_hint_y: 5
Label:
size_hint_x: .2
size_hint_y: .1
text: "Advice"
color: [1,0,0,1]
text_size: self.size
halign: 'left'
valign: 'top'
ScrollView:
size: self.size
GridLayout:
id: layout_content
size_hint_y: None
cols: 1
row_default_height: '20dp'
row_force_default: True
spacing: 0, 0
padding: 0, 0
color: [1,0,0,1]
Label:
text: "Lorem ipsum dolor sit amet"*10
id: advice_message
text_size: self.size
halign: 'left'
valign: 'top'
BoxLayout:
height: "10dp"
size_hint_y: 10
Label:
size_hint_x: .2
size_hint_y: .1
text: "Graphical Stuff"
id: graphical_stuff
text_size: self.size
halign: 'left'
valign: 'top'
AsyncImage:
source: "abc.png"
id: graphical_stuff
allow_stretch: True
keep_ratio: False
pos: 200,300
size: root.width*0.5,root.height*0.2
BoxLayout:
orientation: 'horizontal'
Button:
text: 'My settings button'
Button:
text: 'Back to Log in screen'
on_press: root.manager.current = 'LoginScreen'
What is wrong in this code, any help/guidance would be highly appreciated plz
If you want this setup, you can set an attribute on the first screen. Access it by id in your second screen.
from kivy.app import App
from kivy.uix.screenmanager import Screen
from kivy.lang import Builder
from kivy.properties import StringProperty
class Screen1(Screen):
username = StringProperty("")
class Screen2(Screen):
username = StringProperty("")
root = Builder.load_string('''
<Screen1>:
BoxLayout:
orientation: "vertical"
TextInput:
id: username
Button:
text: "Login"
on_release: root.username = username.text; root.manager.current = "screen2"
<Screen2>:
name: "screen2"
Label:
text: root.username
ScreenManager:
Screen1:
id: loginscreen
Screen2:
username: loginscreen.username
''')
class MyApp(App):
def build(self):
return root
I am trying to create screen with some menu toggle buttons and then a nested screen manager that I can switch screen manager only inside the container and leave the menu outside of the container intact. When I used a combination of Boxlayouts and Gridlayouts everything gets in top of each other.
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.label import Label
from kivy.graphics.context_instructions import Color
from kivy.uix.screenmanager import Screen, ScreenManager
class ScreenManagement(FloatLayout):
pass
class IomApp(App):
def build(self):
return ScreenManagement()
if __name__ == '__main__':
IomApp().run()
Kivy file:
<LabelCases#Label>:
height: '40dp'
font_size: 18
<TextInputCases#TextInput>:
height: '40dp'
size_hint_y: None
font_size: 18
write_tab: False
multiline: False
on_text_validate: root.foo()
<ScreenManagement>:
BoxLayout:
orientation: "vertical"
BoxLayout:
height: "80dp"
size_hint_y: None
Label:
text: 'Patient info Label'
BoxLayout:
orientation: 'horizontal'
BoxLayout:
orientation: 'vertical'
size_hint_x: 20
ToggleButton:
text: 'Case Info'
group: 'g1'
on_screen:
ToggleButton:
text: 'Modalities'
group: 'g1'
ToggleButton:
text: 'Report Editing'
group: 'g1'
ToggleButton:
text: 'Printing/Exporting'
group: 'g1'
ToggleButton:
text: 'Settings'
group: 'g1'
BoxLayout:
orientation: 'vertical'
size_hint_x: 80
ScreenManager:
id: "Screen1"
Screen:
name: "Case_info_screen"
BoxLayout:
orientation: 'vertical'
spacing: 20
orientation: 'vertical'
size_hint: (.5, .5)
pos_hint: {'center_x':.5, 'center_y':.5}
Label:
text: "Case Info"
size_hint_y: 25
GridLayout:
cols: 2
padding: 50
spacing: 15
size_hint_y: 50
LabelCases:
text: 'First Name: '
TextInputCases:
LabelCases:
text: 'Last Name: '
TextInputCases:
LabelCases:
text: 'MRN: '
TextInputCases:
LabelCases:
text: 'Date of Birth: '
TextInputCases:
LabelCases:
text: 'Hospital: '
TextInputCases:
LabelCases:
text: 'Diagnosis: '
TextInputCases:
Label:
text: "Surgical and Techical Staff"
size_hint_y: 25
BoxLayout:
Button:
height: "40dp"
size_hint_y: None
text: "Back"
Button:
height: "40dp"
size_hint_y: None
text: "Next"
You've used a layout, yet even if you made the layout's size relative the sizes of its children were fixed/static (height: '40dp'). If you remove size_hint_y: None from TextInputCases, you'll see what's hapenning.
You kv code
<LabelCases#Label>:
font_size: 18
<TextInputCases#TextInput>:
font_size: 18
write_tab: False
multiline: False
on_text_validate: root.foo()
<ScreenManagement>:
BoxLayout:
orientation: "vertical"
BoxLayout:
height: "80dp"
size_hint_y: None
Label:
text: 'Patient info Label'
BoxLayout:
orientation: 'horizontal'
BoxLayout:
orientation: 'vertical'
size_hint_x: .20
ToggleButton:
text: 'Case Info'
group: 'g1'
on_screen:
ToggleButton:
text: 'Modalities'
group: 'g1'
ToggleButton:
text: 'Report Editing'
group: 'g1'
ToggleButton:
text: 'Printing/Exporting'
group: 'g1'
ToggleButton:
text: 'Settings'
group: 'g1'
BoxLayout:
orientation: 'vertical'
size_hint_x: .80
ScreenManager:
id: "Screen1"
Screen:
name: "Case_info_screen"
BoxLayout:
orientation: 'vertical'
spacing: 20
orientation: 'vertical'
size_hint: (.5, .8)
pos_hint: {'center_x':.5, 'center_y':.5}
Label:
text: "Case Info"
size_hint_y: .25
GridLayout:
cols: 2
padding: 50
spacing: 15
size_hint_y: .70
LabelCases:
text: 'First Name: '
TextInputCases:
LabelCases:
text: 'Last Name: '
TextInputCases:
LabelCases:
text: 'MRN: '
TextInputCases:
LabelCases:
text: 'Date of Birth: '
TextInputCases:
LabelCases:
text: 'Hospital: '
TextInputCases:
LabelCases:
text: 'Diagnosis: '
TextInputCases:
Label:
text: "Surgical and Techical Staff"
BoxLayout:
height: "40dp"
size_hint_y: None
Button:
text: "Back"
Button:
text: "Next"
But I'd rather recommend to make something like ScrollView -> GridLayout -> all children, so that you can have content with a fixed size (with an ability to scroll) and preserve the "iframe"-like layout. ^^