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
Related
MDScreen:
MDNavigationLayout:
ScreenManager:
MDScreen:
MDBoxLayout:
orientation:'vertical'
MDToolbar:
title:"Teacher Section"
left_action_items:[["menu",lambda x:nav_drawer.set_state("open")]]
right_action_items:[["magnify",lambda x:None]]
elevation:5
MDScreen:
ScreenManager:
id:nestedsm
MDScreen:
name:"Screen1"
MDLabel:
text:"Screen1"
MDScreen:
name:"Screen2"
MDLabel:
text:"Screen2"
Widget:
MDNavigationDrawer:
id: nav_drawer
ContentNavigationDrawer:
orientation: 'vertical'
padding: "8dp"
spacing: "8dp"
Image:
id: avatar
size_hint: (1,1)
source: "images/kitten.png"
MDLabel:
text: "Bhushan Ghevde"
font_style: "Subtitle1"
size_hint_y: None
height: self.texture_size[1]
MDLabel:
text: "bhushanghevde15#gmail.com"
size_hint_y: None
font_style: "Caption"
height: self.texture_size[1]
ScrollView:
DrawerList:
id: md_list
MDList:
OneLineIconListItem:
text: "Add Teacher"
on_release:
nestedsm.current = 'Screen1'
IconLeftWidget:
icon: "face-profile"
OneLineIconListItem:
text: "Upload"
on_release:
nestedsm.current = 'Screen2'
IconLeftWidget:
icon: "upload"
I am creating a collage level app for manageing student details . The Normal Screenmanager works perfectly fine . while i was trying nested Screen manager i am facing problems . the problem is , when i try to change screen from navigation drawer , it changes screen but doesnt hide automatically , i have to click back again to hide. any help is appreciated . Thank you in advanced..
i have provided video of issue
Welcome, you can add the line:
root.ids.nav_drawer.set_state(new_state='toggle', animation=True)
Under the "on_release" of every list item, if you are adding those using the "for loop", you should add them like:
self.root.ids.content_drawer.ids.md_list.add_widget(OneLineIconListItem(icon=icon_name, text="Item number 1", on_release=lamda x:(self.root.ids.nav_drawer.set_state(new_state='toggle', animation=True))))
Or you can just implement it inside of the kivy lang:
Screen:
#MDNavigationLayout: #unknown class
ScreenManager:
Screen:
MDBoxLayout:
orientation:'vertical'
MDToolbar:
title:"Teacher Section"
left_action_items:[["menu",lambda x:nav_drawer.set_state("open")]]
right_action_items:[["magnify",lambda x:None]]
elevation:5
MDScreen:
ScreenManager:
id:nestedsm
MDScreen:
name:"Screen1"
MDLabel:
text:"Screen1"
MDScreen:
name:"Screen2"
MDLabel:
text:"Screen2 jbsidis"
Widget:
MDNavigationDrawer:
id: nav_drawer
BoxLayout:
orientation: 'vertical'
padding: "8dp"
spacing: "8dp"
Image:
id: avatar
size_hint: (1,1)
source: "images/pro.jpg" #"images/kitten.png"
MDLabel:
text: "Bhushan Ghevde"
font_style: "Subtitle1"
size_hint_y: None
height: self.texture_size[1]
MDLabel:
text: "bhushanghevde15#gmail.com"
size_hint_y: None
font_style: "Caption"
height: self.texture_size[1]
ScrollView:
MDList:
id: md_list
OneLineIconListItem:
text: "Add Teacher"
on_release:
nestedsm.current = 'Screen1'
root.ids.nav_drawer.set_state(new_state='toggle', animation=True)
IconLeftWidget:
icon: "face-profile"
OneLineIconListItem:
text: "Upload"
on_release:
nestedsm.current = 'Screen2'
root.ids.nav_drawer.set_state(new_state='toggle', animation=True)
IconLeftWidget:
icon: "upload"
Picture:
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.
I am practicing KivyMD ImageList, and the imagelist is been overlayed by a blank space coming from MDBottomAppbar.
Here's what it looks like:
Please how do I remove the white blank space that is above MDBottomAppbar and overlapping Imagelist. Here's my code.. Thanks in Advance!
from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivy.core.window import Window
Window.size = (330, 500)
kv = '''
<MyTile#SmartTileWithLabel>
size_hint_y: None
height: "240dp"
BoxLayout:
orientation: "vertical"
md_bg_color: (240/255, 240/255, 240/255, 1)
MDToolbar:
id: success_screen_toolbar
title: "Project"
right_action_items: [["progress-check", lambda x: x]]
ScrollView:
size_hint_y: None
size: "280dp", "360dp"
pos_hint: {"center_x": .5, "center_y": .6}
height: root.height - success_screen_toolbar.height - dp(90)
y: root.height - success_screen_toolbar.height - dp(50)
elevation: 8
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]"
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
MDBottomAppBar:
MDToolbar:
id: success_screen_bottomappbar
icon: "magnify"
on_action_button: x
type: 'bottom'
mode: 'center'
elevation: '8dp'
left_action_items: [["calendar-text", lambda x: x], ["account-group", lambda x: x]]
right_action_items: [["magnify", lambda x: x], ["menu", lambda x: x]]
'''
class Main(MDApp):
def build(self):
return Builder.load_string(kv)
Main().run()
Use the following please, I have changed a few things and a few main widgets in your code because they added additional space that was not being used and that caused the white space in the body of the app, so here is the code by jbsidis:
from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivy.core.window import Window
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.floatlayout import FloatLayout
Window.size = (330, 500)
kv = '''
#:import MDTextField kivymd.uix.textfield.MDTextField
<MyTile#SmartTileWithLabel>
size_hint_y: None
height: "240dp"
<S>:
MDTextFieldRound:
pos_hint: {"center_x": .5, "center_y": .95}
normal_color : [1,1,1,.1]
color_active : [1,1,1,1]
size_hint: .8, .07
hint_text : 'Search a product...'
icon_left : 'magnify'
Screen:
FloatLayout:
BoxLayout:
id: m5
pos_hint: {"center_x": .5, "center_y": .371} #this will change if you change this Window.size = (330, 500)
orientation: "vertical"
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
padding: dp(4), dp(4)
spacing: dp(4)
MyTile:
source: "Photos/pro.jpg"
text: "[size=26]jbsidis[/size]\\n[size=14]cat-1.jpg[/size]"
MyTile:
source: "Photos/pro.jpg"
text: "[size=26]jbsidis[/size]\\n[size=14]cat-2.jpg[/size]"
tile_text_color: app.theme_cls.accent_color
MyTile:
source: "Photos/pro.jpg"
text: "[size=26][color=#ffffff]jbsidis[/color][/size]\\n[size=14]cat-3.jpg[/size]"
tile_text_color: app.theme_cls.accent_color
MyTile:
source: "a11.png"
text: ""
tile_text_color: [0,0,0,0]
FloatLayout:
AnchorLayout:
pos_hint: {"center_x": .5, "center_y": .9}
MDTextButton:
halign: "center"
text: "\\n\\n\\n\\n\\n\\n\\nLoading more...\\n\\n"
MDSpinner:
size_hint: .1,.1
MDToolbar:
id: success_screen_toolbar
title: "Project"
pos_hint: {"top": 1}
right_action_items: [["progress-check", lambda: print(6)]]
MDBottomAppBar:
MDToolbar:
id: success_screen_bottomappbar
icon: "magnify"
on_action_button: root.add_widget(app.sbar())
type: 'bottom'
mode: 'center'
#elevation: '8dp'
left_action_items: [["calendar-text", lambda: print(6)], ["account-group", lambda: print(6)]]
right_action_items: [["magnify", lambda: print(6)], ["menu", lambda: print(6)]]
'''
class blanks1(BoxLayout):
pass
class S(FloatLayout):
pass
class Main(MDApp):
def build(self):
return Builder.load_string(kv)
def sbar(self):
self.root.ids.success_screen_toolbar.md_bg_color=[1,1,1,1]
return S()
Main().run()
I also added the function to add the search bar on top when we press the magnified glass icon at the bottom bar, I added an empty image at the bottom of the pictures so you can show your app is loading more results, hope this is helpful for you and everybody, greetings from El Salvador, picture (something else, the a11.png image is a blank transparent png image, the last should be an empty image to extend the scroll area otherwise the bottom bar will hide it, this is something that most operating systems implement but we cannot know because we don't see the source code, watch my youtube channel: https://www.youtube.com/channel/UCIMmPyY7XjWHk1AHlR_UdWQ ):
I am trying to use kivyMD list as a button, i.e when KivyMD list is clicked it takes users to another screen, but I keep getting an "Invalid data after declaration" error.
Please observe my code for any anomaly, that may be causing this..
here's my main.py file
from kivymd.app import MDApp
from kivy.uix.screenmanager import ScreenManager, Screen, NoTransition
from kivy.core.window import Window
Window.size = (300, 500)
class IntroScreen(Screen):
pass
class SuccessScreen(Screen):
pass
class SearchScreen(Screen):
pass
class MenuScreen(Screen):
pass
class GettingStartedScreen(Screen):
pass
class ProjectApp(MDApp):
def build(self):
self.sm = ScreenManager(transition=NoTransition())
self.sm.add_widget(IntroScreen(name="intro_screen"))
self.sm.add_widget(GettingStartedScreen(name="getting_started_screen"))
self.sm.add_widget(SuccessScreen(name="success_screen"))
self.sm.add_widget(SearchScreen(name='search_screen'))
self.sm.add_widget(MenuScreen(name="menu_screen"))
return self.sm
def change_screen(self, screen, *kwargs):
self.sm.current = "intro_screen"
self.sm.current = "getting_started_screen"
self.sm.current = "success_screen"
self.sm.current = "search_screen"
self.sm.current = "menu_screen"
self.sm.current = screen
ProjectApp().run()
And Here's my .kv file
ScreenManager:
<IntroScreen>
name: "intro_screen"
FloatLayout:
# """Secondly, please is there a way to make MDCard auto
# resize automatically on any screen"""
MDCard:
orientation: 'vertical'
padding: 16
size_hint: None, None
size: "280dp", "360dp"
pos_hint: {"center_x": .5, "center_y": .6}
elevation: 8
orientation: 'vertical'
radius: 15
ScrollView:
MDList:
OneLineIconListItem:
text: "WHAT IS KETO DIET"
IconLeftWidget:
icon: "cash-multiple"
OneLineIconListItem:
text: "WHY TRY KETO DIET"
IconLeftWidget:
icon: "cash-100"
OneLineIconListItem:
text: "IS KETO RIGHT FOR YOU"
IconLeftWidget:
icon: "cash-marker"
OneLineIconListItem:
text: "GETTING STARTED"
IconLeftWidget:
icon: "cash"
on_touch_down: app.root.current = "getting_started_screen" #I THINK THIS IS WHERE THE INVALID DATA ERROR OCCURS
MDBottomAppBar:
MDToolbar:
icon: "arm-flex-outline"
type: 'bottom'
mode: 'center'
left_action_items: [["calendar-text", lambda x: x], ["account-group", lambda x: app.change_screen("success_screen")]]
right_action_items: [["magnify", lambda x: app.change_screen("search_screen")], ["menu", lambda x: app.change_screen("menu_screen")]]
<GettingStartedScreen>
name: "getting_started_screen"
FloatLayout:
MDCard:
orientation: "vertical"
elevation: 10
radius: 10
OneLineIconListItem:
text: "WHAT TO KNOW BEFORE STARTING"
IconLeftWidget:
icon: "cash"
OneLineIconListItem:
text: "WHAT TO DO BEFORE STARTING"
IconLeftWidget:
icon: "cash"
OneLineIconListItem:
text: "HOW TO START THE KETO DIET"
IconLeftWidget:
icon: "cash"
OneLineIconListItem:
text: "FREQUENTLY ASKED QUESTIONS"
IconLeftWidget:
icon: "cash"
<SuccessScreen>
name: "success_screen"
BoxLayout:
orientation: "vertical"
MDBottomAppBar:
MDToolbar:
icon: "magnify"
on_action_button: app.change_screen("search_screen")
type: 'bottom'
mode: 'center'
left_action_items: [["calendar-text", lambda x: app.change_screen("intro_screen")], ["account-group", lambda x: x]]
right_action_items: [["magnify", lambda x: app.change_screen("search_screen")], ["menu", lambda x: app.change_screen("menu_screen")]]
<SearchScreen>
name: 'search_screen'
BoxLayout:
orientation: 'vertical'
MDBottomAppBar:
MDToolbar:
icon: "window-close"
type: "bottom"
mode: "center"
left_action_items: [["calendar-text", lambda x: app.change_screen("intro_screen")], ["account-group", lambda x: app.change_screen("success_screen")]]
right_action_items: [["magnify", lambda x: x], ["menu", lambda x: app.change_screen("menu_screen")]]
<MenuScreen>
name: "menu_screen"
BoxLayout:
orientation: "vertical"
MDBottomAppBar:
MDToolbar:
icon: "reload"
type: "bottom"
mode: "center"
left_action_items: [["calendar-text", lambda x: app.change_screen("intro_screen")], ["account-group", lambda x: app.change_screen("success_screen")]]
right_action_items: [["magnify", lambda x: app.change_screen("search_screen")], ["menu", lambda x: x]]
Thanks a lot in advance... Please I left a comment where I think occurs this error.. And secondly, how do I make MDCard, in the .kv file automatically resize on only screen size.. Again Thanks in Advance..
The OneLineIconListItem is a type of Button, so you can just add an on_release attribute.:
MDList:
OneLineIconListItem:
text: "WHAT IS KETO DIET"
IconLeftWidget:
icon: "cash-multiple"
OneLineIconListItem:
text: "WHY TRY KETO DIET"
IconLeftWidget:
icon: "cash-100"
OneLineIconListItem:
text: "IS KETO RIGHT FOR YOU"
IconLeftWidget:
icon: "cash-marker"
OneLineIconListItem:
text: "GETTING STARTED"
on_release:
app.root.current = "getting_started_screen"
IconLeftWidget:
icon: "cash"
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