Iam trying to learn coding with Python and iam making an application that tracks session times from users using KivyMD. At the moment iam trying to display the total amount of time by fetching json data trough an api call from my database. I wrote a function to fetch and process the json data to calculate the total time. The function must fire automatically to show the data (variable:total_minutes) in the MDLabel time_label when the Mijn sessie Tab loads. This is where iam getting very confused.
I found the on_pre_enter function in Kivy which fires the function when the screen loads but it only works in the Screen Class and not in the Tabs Class. I have no idea how i can use the python variable in the Tabs class if i do the python logic in the Screen class. I have tried many things with Objectproperty and Stringproperty but none where succesfull. I think iam missing something bigger here.
I will post the code to make things more clearly when you will see the application for yourself. For safety reasons i replaced the api request function with a small function which produces the same outcome (float).
Many thanks in advance!
main.py file
from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.core.window import Window
from kivy.uix.screenmanager import ScreenManager, Screen
from kivymd.uix.tab import MDTabsBase
from kivymd.font_definitions import fonts
from kivymd.icon_definitions import md_icons
from kivy.uix.floatlayout import FloatLayout
from kivy.properties import ObjectProperty, StringProperty
from kivy.uix.widget import Widget
from kivymd.uix.label import MDLabel
import requests
import json
from datetime import datetime
Window.size = (300, 500) # voor develop doeleinden mobielscherm
class Screen1(Screen):
pass
def on_pre_enter(self, *args):
def func(a, b):
total_minutes = a - b
return total_minutes
print(func(3000,1500))
class Screen2(Screen):
pass
class Screen3(Screen):
pass
class Screen4(Screen):
pass
class Tab_mijn_sessie(FloatLayout, MDTabsBase):
pass
class Tab_alarm(FloatLayout, MDTabsBase):
pass
class Tab_actieve_drinkers(FloatLayout, MDTabsBase):
pass
class Tab_score(FloatLayout, MDTabsBase):
pass
class Tab_achievments(FloatLayout, MDTabsBase):
pass
class Tab_historie(FloatLayout, MDTabsBase):
pass
class DemoApp(MDApp):
def build(self):
self.theme_cls.primary_palette = 'Red'
self.theme_cls.theme_style = 'Dark'
screen = Builder.load_file('demo_file.kv')
return screen
DemoApp().run()
demo_file.kv file
Screen:
NavigationLayout:
ScreenManager:
id:screen_manager
Screen1:
name: 'home_screen'
BoxLayout:
name: 'home_layout'
orientation: 'vertical'
MDToolbar:
title: 'Huidige sessie'
left_action_items: [['menu', lambda x: nav_drawer.set_state("open")]]
specific_text_color: 1,1,1,1
MDTabs:
id:home_tabs
tab_bar_height: '35dp'
text_color_active: 1,1,0,1
text_color_normal: 0,0,0,1
color_indicator: 0.95, 0.95, 0.1, 1
tab_indicator_anim: True
anim_duration: 0.2
tab_indicator_height: '3dp'
Tab_mijn_sessie:
text: 'Mijn sessie'
Tab_alarm:
text: 'Alarm'
Tab_actieve_drinkers:
text: 'Actieve drinkers'
MDToolbar:
id: bottom_toolbar_scr1
name: 'bottom_toolbar'
specific_text_color: 1,1,1,1
title: ' Sessie inactief..'
Screen2:
name: 'statistieken_screen'
BoxLayout:
name: 'statistieken_layout'
orientation: 'vertical'
MDToolbar:
title: 'Statistieken'
left_action_items: [['menu', lambda x: nav_drawer.set_state("open")]]
specific_text_color: 1,1,1,1
MDTabs:
id:home_tabs
tab_bar_height: '35dp'
text_color_active: 1,1,0,1
text_color_normal: 0,0,0,1
color_indicator: 0.95, 0.95, 0.1, 1
tab_indicator_anim: True
anim_duration: 0.2
tab_indicator_height: '3dp'
Tab_score:
text: 'Scorebord'
Tab_achievments:
text: 'Achievements'
Tab_historie:
text: 'Historie'
MDToolbar:
id: bottom_toolbar_scr2
name: 'bottom_toolbar'
specific_text_color: 1,1,1,1
title: ' Sessie inactief..'
Screen3:
name: 'logout_screen'
BoxLayout:
name: 'logout_layout'
orientation: 'vertical'
MDToolbar:
title: 'Uitloggen'
left_action_items: [['menu', lambda x: nav_drawer.set_state("open")]]
specific_text_color: 1,1,1,1
Widget:
Screen4:
name: 'profile_screen'
BoxLayout:
name: 'profile_layout'
orientation: 'vertical'
MDToolbar:
title: 'Profiel'
left_action_items: [['menu', lambda x: nav_drawer.set_state("open")]]
specific_text_color: 1,1,1,1
Widget:
MDToolbar:
id: bottom_toolbar_scr4
name: 'bottom_toolbar'
specific_text_color: 1,1,1,1
title: ' Sessie inactief..'
MDNavigationDrawer:
id:nav_drawer
BoxLayout:
orientation: 'vertical'
spacing: '8dp'
padding: '8dp'
Image:
source: 'avatar.jpg'
MDLabel:
text: ' Name'
front_style: 'Subtitle1'
size_hint_y: None
height: self.texture_size[1]
MDLabel:
text: ' email#hotmail.com'
front_style: 'Caption'
size_hint_y: None
height: self.texture_size[1]
ScrollView:
MDList:
OneLineIconListItem:
theme_text_color: 'Custom'
text_color: 244/255, 67/255, 54/255, 1
text: 'Huidige sessie'
on_press:
screen_manager.current = 'home_screen'
nav_drawer.set_state("close")
IconLeftWidget:
theme_text_color: 'Custom'
text_color: 0.95, 0.95, 0.1, 1
icon: 'beer'
on_press:
screen_manager.current = 'home_screen'
nav_drawer.set_state("close")
OneLineIconListItem:
theme_text_color: 'Custom'
text_color: 244/255, 67/255, 54/255, 1
text: 'Statistieken'
on_press:
screen_manager.current = 'statistieken_screen'
nav_drawer.set_state("close")
IconLeftWidget:
icon: 'history'
theme_text_color: 'Custom'
text_color: 0.95, 0.95, 0.1, 1
on_press:
screen_manager.current = 'historie_screen'
nav_drawer.set_state("close")
OneLineIconListItem:
theme_text_color: 'Custom'
text_color: 244/255, 67/255, 54/255, 1
text: 'Profiel'
on_press:
screen_manager.current = 'profile_screen'
nav_drawer.set_state("close")
IconLeftWidget:
icon: 'face-profile'
theme_text_color: 'Custom'
text_color: 0.95, 0.95, 0.1, 1
on_press:
screen_manager.current = 'profile_screen'
nav_drawer.set_state("close")
OneLineIconListItem:
theme_text_color: 'Custom'
text_color: 244/255, 67/255, 54/255, 1
text: 'Uitloggen'
on_press:
screen_manager.current = 'logout_screen'
nav_drawer.set_state("close")
IconLeftWidget:
icon: 'logout'
theme_text_color: 'Custom'
text_color: 0.95, 0.95, 0.1, 1
on_press:
screen_manager.current = 'logout_screen'
nav_drawer.set_state("close")
<Tab_mijn_sessie>:
MDLabel:
text: 'Total time'
font_style: 'H6'
halign: 'center'
pos_hint: {"center_x": .5, "center_y": .4}
MDLabel:
id : time_label
text: '(this has to display the total amount of time)'
font_style: 'Body2'
halign: 'center'
pos_hint: {"center_x": .5, "center_y": .3}
MDFlatButton:
theme_text_color: 'Custom'
text_color: 1,1,1,1
halign: 'center'
text:'Activate session'
user_font_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .7}
on_press:
app.root.ids.bottom_toolbar_scr1.title = ' Sessie actief!'
app.root.ids.bottom_toolbar_scr1.specific_text_color = 0,1,0,1
app.root.ids.bottom_toolbar_scr2.title = ' Sessie actief!'
app.root.ids.bottom_toolbar_scr2.specific_text_color = 0,1,0,1
app.root.ids.bottom_toolbar_scr4.title = ' Sessie actief!'
app.root.ids.bottom_toolbar_scr4.specific_text_color = 0,1,0,1
<Tab_alarm>:
MDLabel:
halign: 'center'
text:'Alarm'
user_font_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .5}
<Tab_actieve_drinkers>:
MDLabel:
halign: 'center'
text:'Actieve drinkers'
user_font_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .5}
<Tab_score>:
MDLabel:
halign: 'center'
text:'Scorebord'
user_font_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .5}
<Tab_achievments>:
MDLabel:
halign: 'center'
text:'Achievments'
user_font_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .5}
<Tab_historie>:
FloatLayout:
MDLabel:
halign: 'center'
text:'Historie'
user_font_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .5}
MDFlatButton:
id: flat
text: 'druk hier'
pos_hint: {"center_x": .5, "center_y": 0.4}
from kivy.lang import Builder
from kivy.uix.floatlayout import FloatLayout
from kivymd.app import MDApp
from kivymd.uix.tab import MDTabsBase
from kivymd.icon_definitions import md_icons
KV = '''
BoxLayout:
orientation: "vertical"
MDToolbar:
title: "Example Tabs"
MDTabs:
id: tabs
on_tab_switch: app.on_tab_switch(*args)
<Tab>:
MDIconButton:
id: icon
icon: app.icons[0]
user_font_size: "48sp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class Tab(FloatLayout, MDTabsBase):
'''Class implementing content for a tab.'''
class Example(MDApp):
icons = list(md_icons.keys())[15:30]
def build(self):
return Builder.load_string(KV)
def on_start(self):
for name_tab in self.icons:
self.root.ids.tabs.add_widget(Tab(text=name_tab))
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;
'''
count_icon = [k for k, v in md_icons.items() if v == tab_text]
instance_tab.ids.icon.icon = count_icon[0]
Example().run()
https://kivymd.readthedocs.io/en/latest/components/tabs/index.html#kivymd.uix.tab.MDTabs.on_tab_switch
Related
I created an app with a NavigationDrawer and everything work correctely, but the problem is to return to the first screen. I want to go back to the first screen (the Screen with name: 'Screen_*principal') when I click in the arrow-left in the MDTopAppBar in Login_*screen but nothing that I did worked.
KV file:
#: import RiseInTransition kivy.uix.screenmanager.RiseInTransition
#: import SlideTransition kivy.uix.screenmanager.SlideTransition
<CustomizeScreen#MDBoxLayout>
orientation: 'vertical'
text: ''
padding: 100
MDLabel:
text: root.text
halign: 'center'
pos_hint: {'center_x': .5}
MDFillRoundFlatButton:
text: 'Regresar'
pos_hint: {'center_x': .5}
on_release:
app.root.current = 'screen_principal'
app.root.transition = SlideTransition(direction= 'left' )
<DrawerClickableItem#MDNavigationDrawerItem>
focus_color: "#e7e4c0"
text_color: "#4a4939"
icon_color: "#4a4939"
ripple_color: "#c5bdd2"
selected_color: "#0c6c4d"
<DrawerLabelItem#MDNavigationDrawerItem>
text_color: "#4a4939"
icon_color: "#4a4939"
focus_behavior: False
selected_color: "#4a4939"
_no_ripple_effect: True
<Screen_principal>:
MDNavigationLayout:
MDScreen:
MDTopAppBar:
title: "Navigation Drawer"
elevation: 4
pos_hint: {"top": 1}
md_bg_color: "#e7e4c0"
specific_text_color: "#4a4939"
left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]
MDNavigationDrawer:
id: nav_drawer
radius: (0, 16, 16, 0)
MDNavigationDrawerMenu:
MDNavigationDrawerHeader:
title: "LOCATE YOU"
source: "icono.png"
spacing: "4dp"
padding: "12dp", 0, 0, "56dp"
DrawerClickableItem:
icon: "login"
text_right_color: "#4a4939"
text: "Iniciar Sesion"
on_press:
root.manager.current = "Login_screen"
DrawerClickableItem:
icon: "new-box"
text: "Registrarse"
text_right_color: "#4a4939"
on_press:
root.current = "screen_register"
DrawerClickableItem:
icon: "information-outline"
text: "Informacion"
text_right_color: "#4a4939"
on_press:
root.current = "scr1"
DrawerClickableItem:
icon: "microsoft-teams"
text: "Equipo"
text_right_color: "#4a4939"
on_press:
root.current = "scr1"
<Login_screen>:
MDBoxLayout:
orientation: 'vertical'
MDTopAppBar:
title: "Login"
md_bg_color: "#e7e4c0"
left_action_items: [["arrow-left", lambda *args : setattr(screen_manager, "current", "Screen_principal")]]
MDBoxLayout:
orientation: 'vertical'
size_hint_y: 0.3
Image:
source: 'usuario.png'
pos_hint: {'center_x': 0.5}
MDLabel:
text: 'Iniciar Sesion'
halign: 'center'
color: '#FF5A1E'
font_size: '35dp'
bold: True
pos_hint: {'center_y': .5}
MDBoxLayout:
orientation: 'vertical'
size_hint_y: 0.3
spacing: '12dp'
MDTextField:
id: user
hint_text: "Nombre de usuario"
icon_right: "account"
font_size: '25dp'
icon_right_color: '#FF5A1E'
pos_hint: {'center_x': 0.5}
MDTextField:
id: password
password:True
icon_right: "key-variant"
font_size: '25dp'
icon_right_color: '#FF5A1E'
hint_text: "Contrasena"
pos_hint: {'center_x': 0.5}
MDLabel:
id: signal_login
text: ''
halign: 'center'
color: '#FF5A1E'
font_size: '15dp'
MDBoxLayout:
orientation: 'vertical'
size_hint_y:0.4
spacing: '25dp'
MDFillRoundFlatButton:
id: bt_ingresar
text: 'Ingresar'
pos_hint: {'center_x':0.5}
on_release:
x = app.login_data()
root.current = 'open_screen' if x == True else None
MDFillRoundFlatButton:
md_bg_color: 1,1,1,1
Python file:
from kivymd.app import MDApp
from kivy.uix.screenmanager import ScreenManager
from kivy.lang import Builder
from kivy.uix.gridlayout import GridLayout
from kivy.core.window import Window
import requests
from kivy.uix.screenmanager import Screen, ScreenManager
from kivy.properties import BooleanProperty, ObjectProperty
Builder.load_file('diseno.kv')
class Screen_principal(Screen):
pass
class Login_screen(Screen):
pass
class TestApp(MDApp):
def build(self):
# Create the screen manager
sm = ScreenManager()
sm.add_widget(Screen_principal(name='Screen_principal'))
sm.add_widget(Login_screen(name='Login_screen'))
return sm
if __name__ == '__main__':
TestApp().run()
I tried a lot of things but nothing work, if someone could fix it I would be very grateful
In your kv, change:
left_action_items: [["arrow-left", lambda *args : setattr(screen_manager, "current", "Screen_principal")]]
to:
left_action_items: [["arrow-left", lambda *args : setattr(root.manager, "current", "Screen_principal")]]
This change accesses the ScreenManager by referencing root.manager, and the root in that context is the Login_screen.
I want to be able to click on MDFlatButton that says Štart and i want it to let's say for an example to call get_user_input(self) which would print whatever is inside text field. And I have been struggling with this for 2 whole days and i have no idea what to do, I am just a beginner and I have no clue what am I doing so sorry if it's messy. Ty for help, those are my files:
main.py file:
from kivy.core.window import Window
from kivy.lang import Builder
from kivy.properties import ObjectProperty
from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager
from kivymd.uix.menu import MDDropdownMenu
from kivymd.uix.textfield import MDTextField
from kivy.properties import StringProperty
class testy(Screen):
novy_test = ObjectProperty()
class Test(MDApp):
Window.size = (1170 / 3, 2532 / 3)
# input_number = ObjectProperty()
def build(self):
self.theme_cls.material_style = "M3"
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = 'Gray'
return testy()
def get_user_input(self):
print(self.root.ids.my_textfield_1.ids.user.text)
def callback(self, button):
pass
class CustomOverFlowMenu(MDDropdownMenu):
# In this class you can set custom properties for the overflow menu.
pass
Test().run()
test.kv file:
#:import Factory kivy.factory.Factory
#:import CustomOverFlowMenu __main__.CustomOverFlowMenu
<testy>:
name:'testy'
id: testy
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "MDTopAppBar"
use_overflow: True
overflow_cls: CustomOverFlowMenu()
specific_text_color: .51,.51,.51,1
md_bg_color: 0, 0, 0, 1
left_action_items: [["car", lambda x: Factory.novy_test().open(), '',"Nový test"]]
MDBottomNavigation:
panel_color: "black"
selected_color_background: "white"
text_color_active: "lightgray"
selected_color_background: 1, 1, 1, .4
MDBottomNavigationItem:
name: 'screen 1'
text: 'Testy'
icon: 'road-variant'
MDLabel:
text: 'Test'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 2'
text: 'chyby'
icon: 'alert-circle'
MDLabel:
text: 'Chyby'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 3'
text: 'Settings'
icon: 'cog'
MDLabel:
text: 'LinkedIN'
halign: 'center'
<novy_test#Popup>:
id:my_textfield_1
size_hint: .8, .45
title: 'Nový test'
separator_color: 'black'
title_align: 'center'
BoxLayout:
id: layout
spacing: 10
orientation:'vertical'
MDTextField:
id: user
hint_text: "Číslo testu"
mode: "round"
pos_hint: {"top": 1}
MDFlatButton:
text: 'Štart'
pos_hint: {'center_x': .5}
on_press: app.get_user_input()
MDFlatButton:
pos_hint: {'center_x': .5}
text:'test z nesprávnych'
MDFlatButton:
text:'test z neurobených'
pos_hint: {'center_x': .5}
MDFlatButton:
text:'test z neurobených'
pos_hint: {'center_x': .5}
MDFlatButton:
text:'test z neurobených'
pos_hint: {'center_x': .5}
I didn't perfectly understand all that you wanted to do, but in this example, the text a person types into the box will print. I moved the .kv language into a string just for convenience of creating a one-file runnable project. I tested it.
The main point is this code, inside the .kv file/kivy language you can use the id property to get a reference to the objects, and then the .text property of that object is sent as an argument to the function.
on_press: app.get_user_input(user.text)
runnable:
from kivy.core.window import Window
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.uix.screenmanager import Screen, ScreenManager
from kivymd.uix.menu import MDDropdownMenu
from kivy.uix.popup import Popup
from kivymd.uix.textfield import MDTextField
from kivy.properties import StringProperty
Builder.load_string('''
#:import Factory kivy.factory.Factory
<testy>:
name:'testy'
id: testy
MDBoxLayout:
orientation: "vertical"
MDTopAppBar:
title: "MDTopAppBar"
use_overflow: True
# overflow_cls: CustomOverFlowMenu()
specific_text_color: .51,.51,.51,1
md_bg_color: 0, 0, 0, 1
left_action_items: [["car", lambda x: Factory.NovyTest().open(), '',"Nový test"]]
MDBottomNavigation:
panel_color: "black"
selected_color_background: "white"
text_color_active: "lightgray"
selected_color_background: 1, 1, 1, .4
MDBottomNavigationItem:
name: 'screen 1'
text: 'Testy'
icon: 'road-variant'
MDLabel:
text: 'Test'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 2'
text: 'chyby'
icon: 'alert-circle'
MDLabel:
text: 'Chyby'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 3'
text: 'Settings'
icon: 'cog'
MDLabel:
text: 'LinkedIN'
halign: 'center'
<NovyTest#Popup>:
id:my_textfield_1
size_hint: .8, .45
title: 'Nový test'
separator_color: 'black'
title_align: 'center'
BoxLayout:
id: layout
spacing: 10
orientation:'vertical'
MDTextField:
id: user
hint_text: "Číslo testu"
mode: "round"
pos_hint: {"top": 1}
MDFlatButton:
text: 'Štart'
pos_hint: {'center_x': .5}
# inside .kv/kivy language you can use the id property
on_press: app.get_user_input(user.text)
MDFlatButton:
pos_hint: {'center_x': .5}
text:'test z nesprávnych'
MDFlatButton:
text:'test z neurobených'
pos_hint: {'center_x': .5}
MDFlatButton:
text:'test z neurobených'
pos_hint: {'center_x': .5}
MDFlatButton:
text:'test z neurobených'
pos_hint: {'center_x': .5}
'''
)
class NovyTest(Popup):
# just an example, not used in this code
def __init__(self, **kw):
super().__init__(**kw)
class testy(Screen):
# can list objects defined in .kv file and give them a type hint corresponding to object type
novy_test: NovyTest
def __init__(self, **kw):
super().__init__(**kw)
print("creating screen testy")
# novy_test = ObjectProperty()
class Test(MDApp):
Window.size = (1170 / 3, 2532 / 3)
# input_number = ObjectProperty()
def build(self) -> testy:
self.theme_cls.material_style = "M3"
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = 'Gray'
return testy()
def get_user_input(self, input_text, *args):
print(f"{self} user input: {input_text}")
# print(self.root.ids.my_textfield_1.ids.user.text)
def callback(self, button):
pass
class CustomOverFlowMenu(MDDropdownMenu):
# In this class you can set custom properties for the overflow menu.
pass
Test().run()
end
I created this widget in a .kv file that inherits from MDCard:
<ElementCard#MDCard>:
radius: '10dp'
spacing: '10dp'
padding: '10dp'
image: ''
text: ''
sub_text: ''
orientation: 'vertical'
md_bg_color: 0.87, 0, 0.49
ripple_behavior: True # effect
on_release:
app.root.transition = RiseInTransition()
Image:
source: root.image
halign: 'center'
MDBoxLayout:
orientation: 'vertical'
md_bg_color: 'green'
MDLabel:
text: root.text
color: 'white'
halign: 'center'
MDLabel:
text: root.sub_text
halign: 'center'
and I use it:
<ui>:
...
ElementCard:
text: 'IA'
sub_text: 'Inteligencia artificial'
image: 'images/image1.jpg'
on_release:
root.current = 'screen1'
...
The problem is that the ElementCard widget doesn't show the content:
ElementCard is the purple block and it covers all its content.
When I set the transparency in 0.5 the program looks like this:
50% transparency
The versions are these:
Kivy==2.1.0
kivymd==1.1.1
I've tried rebooting the machine, restarting the virtual environment, reinstalling kivy and kivymd but nothing works.
I think the problem is the inheritance because when I use directly the MDCard like in this code:
MDCard:
radius: '10dp'
spacing: '10dp'
padding: '10dp'
orientation: 'vertical'
md_bg_color: 0.87, 0, 0.49,0.6
ripple_behavior: True # effect
on_release:
app.root.transition = RiseInTransition()
Image:
source: 'images/image1.jpg'
halign: 'center'
MDBoxLayout:
orientation: 'vertical'
md_bg_color: 'green'
MDLabel:
text: 'IA'.
color: 'white'
halign: 'center'
MDLabel:
text: 'Inteligencia artificial'
halign: 'center'
With the last code the program works fine:
MDCard works normally.
main.py full code:
from kivy.lang import Builder
from kivy.uix.screenmanager import ScreenManager
from kivymd.app import MDApp
class Ui(ScreenManager):
pass
class MainApp(MDApp):
def build(self):
self.theme_cls.theme_style ='Dark'
self.theme_cls.primary_palette ='Teal'
Builder.load_file("design.kv")
return Ui()
def change_style(self, checked, value):
if value:
self.theme_cls.theme_style ='Dark'
pass
else:
self.theme_cls.theme_style ='Light'
pass
if __name__ == "__main__":
MainApp().run()
design.kv full code:
#:kivy 2.1.0
#:import RiseInTransition kivy.uix.screenmanager.RiseInTransition
#:import SlideTransition kivy.uix.screenmanager.SlideTransition
<CustomizeScreen#MDBoxLayout>:
orientation: 'vertical'
text: ''
padding: 100
MDLabel:
text: root.text
halign: 'center'
pos_hint:{'center_x': 0.5}
MDFillRoundFlatButton:
text: 'REGRESAR'
pos_hint: {'center_x': 0.5}
on_release:
app.root.current = 'screen_principal'
app.root.transition = SlideTransition(direction = 'left')
<ElementCard#MDCard>:
radius: '10dp'
spacing: '10dp'
padding: '10dp'
image: ''
text: ''
sub_text: ''
orientation: 'vertical'
md_bg_color: 0.87, 0, 0.49
ripple_behavior: True # effect
on_release:
app.root.transition = RiseInTransition()
Image:
source: root.image
halign: 'center'
MDBoxLayout:
orientation: 'vertical'
md_bg_color: 'green'
MDLabel:
text: root.text
color: 'white'
halign: 'center'
MDLabel:
text: root.sub_text
halign: 'center'
<ui>:
MDScreen:
name: 'screen_principal'
md_bg_color: "black"
MDBoxLayout:
orientation: "vertical"
MDBoxLayout:
size_hint: 1, 0.2 # x=1 ocupa todo, y=0.2 ocupa 20%
orientation: "horizontal"
padding: '10dp'
MDCard:
radius: '10dp'
padding: '10dp'
line_color: 1,0,1,1
MDLabel:
text: 'APLICACIÓN DE TECNOLOGÍA'
halign: 'center'
pos_hint: {'center_y': 0.5}
MDSwitch:
pos_hint: {'center_y': 0.5}
on_active:
app.change_style(*args)
MDGridLayout:
cols: 3
size_hint: 0.8, 0.8 # x=1 ocupa todo, y=0.8 ocupa 80%
pos_hint: {'center_x': 0.5}
padding: ['10dp','10dp','10dp','10dp']
spacing: '10dp'
ElementCard:
text: 'IA'
sub_text: 'Inteligencia artificial'
image: 'images/image1.jpg'
on_release:
root.current = 'screen1'
I commented this problem in the github kivyMD project, they marked as a bug and give me a couple of options to implement, link to github
Edit:
Thanks for pointing out my mistake with my link.
This is the first option:
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.card import MDCard
KV = """
<ElementCard>
MDLabel:
text: "HELLO WORLD"
MDScreen:
ElementCard:
size_hint: 0.5, 0.8
pos_hint: {"center_x": .5, "center_y": .5}
md_bg_color: 0.87, 0, 0.49, 1
"""
class ElementCard(MDCard):
pass
class MainApp(MDApp):
def build(self):
return Builder.load_string(KV)
MainApp().run()
and the 2nd:
from kivy.lang import Builder
from kivymd.app import MDApp
from kivymd.uix.card import MDCard
KV = """
<ElementCard#MDCard>
MDLabel:
text: "HELLO WORLD"
MDScreen:
ElementCard:
size_hint: 0.5, 0.8
pos_hint: {"center_x": .5, "center_y": .5}
md_bg_color: 0.87, 0, 0.49, 1
"""
class MainApp(MDApp):
def build(self):
return Builder.load_string(KV)
MainApp().run()
I guess that the kivymd developers will repair this bug in the future.
I am using kivymd framework and want to insert lines between each bottom item of the Bottom Navigation.
The code is from https://kivymd.readthedocs.io/en/latest/components/bottom-navigation/index.html.
Thanks!
from kivymd.app import MDApp
from kivy.lang import Builder
class Test(MDApp):
def build(self):
self.theme_cls.primary_palette = "Gray"
return Builder.load_string(
'''
BoxLayout:
orientation:'vertical'
MDToolbar:
title: 'Bottom navigation'
md_bg_color: .2, .2, .2, 1
specific_text_color: 1, 1, 1, 1
MDBottomNavigation:
panel_color: .2, .2, .2, 1
MDBottomNavigationItem:
name: 'screen 1'
text: 'Python'
icon: 'language-python'
MDLabel:
text: 'Python'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 2'
text: 'C++'
icon: 'language-cpp'
MDLabel:
text: 'I programming of C++'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 3'
text: 'JS'
icon: 'language-javascript'
MDLabel:
text: 'JS'
halign: 'center'
'''
)
Test().run()
you can use MDSeparator in your KV file:
MDLabel:
text: "Chips with check:"
MDSeparator: <-----------##
StackLayout:
size_hint_y: None
height: self.minimum_height
spacing: dp(5)
MDChip:
label: "Check"
icon: ""
check: True
callback: app.callback
I don't think there is any easy way to do that, but here is an approach that adds a Separator Widget between the items in the MDBottomNavigation:
from kivy.clock import Clock
from kivy.properties import ListProperty
from kivy.uix.widget import Widget
from kivymd.app import MDApp
from kivy.lang import Builder
class Separator(Widget):
sep_color = ListProperty([1,0,0,1])
class Test(MDApp):
def add_seps(self, dt):
tab_bar = self.root.ids.mdbn.ids.tab_bar
for i in range(len(tab_bar.children)-1, 0, -1):
tab_bar.add_widget(Separator(size_hint=(None, 1), width=4, sep_color=[0,1,0,1]), index=i)
def build(self):
self.theme_cls.primary_palette = "Gray"
Clock.schedule_once(self.add_seps)
return Builder.load_string(
'''
<Separator>:
canvas:
Color:
rgba: self.sep_color
Rectangle:
pos: self.pos
size: self.size
BoxLayout:
orientation:'vertical'
MDToolbar:
title: 'Bottom navigation'
md_bg_color: .2, .2, .2, 1
specific_text_color: 1, 1, 1, 1
MDBottomNavigation:
id: mdbn
panel_color: .2, .2, .2, 1
MDBottomNavigationItem:
name: 'screen 1'
text: 'Python'
icon: 'language-python'
MDLabel:
text: 'Python'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 2'
text: 'C++'
icon: 'language-cpp'
MDLabel:
text: 'I programming of C++'
halign: 'center'
MDBottomNavigationItem:
name: 'screen 3'
text: 'JS'
icon: 'language-javascript'
MDLabel:
text: 'JS'
halign: 'center'
'''
)
Test().run()
The Separator is just a Rectangle of the sep_color, and the add_seps() method inserts them between the items in the MDBottomNavigation. Those items are in a BoxLayout that has the id "tab_bar".
The Clock.schedule_once() calls the add_seps() method after the App is complete.
I have added the id "mdbn" on the MDBottomNavigation in your kv to make it easier to access that Widget.
On display screen of my code i have used accordions, I have done every thing as instructed and the code for TextInput in that page is right but accordions are not working as intended and the textInput is not taking any inputs. I am new to kivy and as far as I know every thing seems right to me.
Heres my code:
import kivy
kivy.require('1.10.0')
from kivy.uix.stacklayout import StackLayout
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.label import Label
from kivy.app import App
from kivy.uix.popup import Popup
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.lang import Builder
from kivy.properties import ObjectProperty
from kivy.uix.textinput import TextInput
from kivy.properties import StringProperty
import json
Builder.load_file('VocabularyJournal.kv')
class MenuPage(Screen):
pass
class DisplayPage(Screen): # here is the display page[![enter image description here][1]][1]
search_box= ObjectProperty()
label_maening=StringProperty()
label_synonym=StringProperty()
label_ant=StringProperty()
label_sentence=StringProperty()
def search_function(self):
with open('vocab_words.json') as rfile:
data=json.load(rfile)
word=self.search_box.text
for value in data:
if value['word']==word:
self.label_maening=value['meaning']
self.label_synonym=value['synonym']
self.label_ant=value['antonyms']
self.label_sentence=value['sentence']
class WordInsertPage(Screen):
pass
class NewWordPage(Screen):
word_box = ObjectProperty()
meaning_box = ObjectProperty()
synonym_box = ObjectProperty()
ant_box = ObjectProperty()
sentence_box = ObjectProperty()
def saving_data(self):
with open('vocab_words.json') as rfile:
data=json.load(rfile)
entry={'word': self.word_box.text, 'meaning': self.meaning_box.text, 'synonym': self.synonym_box.text, 'antonyms': self.ant_box.text, 'sentence': self.sentence_box.text}
data.append(entry)
with open('vocab_words.json','w') as wfile:
json.dump(data,wfile,indent=4)
class FlashCard(Screen):
pass
class WordGroups(Screen):
pass
class Manager(ScreenManager):
pass
class VocabularyJournalApp(App):
def build(self):
return Manager()
object = VocabularyJournalApp()
object.run()
heres the kivy code-
<Manager>:
MenuPage:
name: 'menu'
WordInsertPage:
name: 'insertword'
NewWordPage:
name: 'newword'
FlashCard:
name: 'flashcard'
WordGroups:
name: 'wordgroup'
DisplayPage:
name: 'display'
<MenuPage>:
Label:
text: "Vocabulary Journal"
size_hint: .90,.10
StackLayout:
orientation: 'tb-rl'
spacing: 10
padding: 10
Button:
text: 'Search'
size_hint: None,.20
width: 130
background_down:'darkgrey.png'
on_press: root.manager.current='insertword'
Button:
text: 'New Word'
size_hint: None,.20
width: 130
background_down:'darkgrey.png'
on_press: root.manager.current='insertword'
Button:
text: 'Flash Cards'
size_hint: None,.20
width: 130
background_down:'darkgrey.png'
on_press: root.manager.current='flashcard'
Button:
text: 'Word Groups'
size_hint: None,.20
width: 130
background_down:'darkgrey.png'
on_press: root.manager.current='wordgroup'
<WordInsertPage>:
FloatLayout:
Button:
text: "New Word"
on_press: root.manager.current='newword'
font_size: 30
color: 0,0,0,1
size_hint: .2, .1
pos_hint: {"center_x": .5, "center_y": 0.3}
background_down: 'darkgrey.png'
Button:
text: "search word"
on_press: root.manager.current='display'
font_size: 30
color: 0,0,0,1
size_hint: .2, .1
pos_hint: {"center_x": .5, "center_y": 0.5}
background_down: 'darkgrey.png'
Button:
text: 'Flash Cards'
on_press: root.manager.current="flashcard"
font_size: 30
color: 0,0,0,1
size_hint: .2, .1
pos_hint: {"center_x": .5, "center_y": 0.7}
background_down: 'darkgrey.png'
<NewWordPage>:
id: refer_to_it
word_box: word_input
meaning_box: meaning_input
synonym_box: Synonym_input
ant_box: ant_input
sentence_box: sentence_input
StackLayout:
orientation: 'tb-rl'
spacing: 10
padding: 90
TextInput:
text: "write your word here"
color: 1,1,1,1
id: word_input
width: 300
size_hint: None, .10
TextInput:
text: "write meaning of your word here"
color: 1,1,1,1
id: meaning_input
width: 600
size_hint: None, .20
TextInput:
text: "write Synonyms of your word here"
color: 1,1,1,1
id: Synonym_input
width: 600
size_hint: None, .20
TextInput:
text: "write antonyms of your text here"
color: 1,1,1,1
id: ant_input
width: 600
size_hint: None, .20
TextInput:
text: "write a sentence based on your word here"
color: 1,1,1,1
id: sentence_input
width: 600
size_hint: None, .20
Button:
text: 'Save'
size_hint: None,.10
width: 130
background_down:'darkgrey.png'
on_press: refer_to_it.saving_data()
<DisplayPage>: # here is the display page
search_box: search_text
BoxLayout:
size_hint_y: None
height: '48dp'
TextInput:
text:'enter the word you wanna search here'
id: search_text
on_text_validate: root.search_function()
Accordion:
orientation: 'vertical'
AccordionItem:
title:'meaning'
Label:
text: root.label_maening
text_size: self.width, None
AccordionItem:
title:'Synonym'
Label:
text: root.label_synonym
text_size: self.width, None
AccordionItem:
title:'Antonym'
Label:
text: root.label_ant
text_size: self.width, None
AccordionItem:
title:'Sentence'
Label:
text: root.label_sentence
text_size: self.width, None
In principle I see three problems:
on_text_validate isn't fired in multiline inputs. You should set multiline property to False.
Use hint_text property to set the suggestion text.
The weird behavior of your accordion is probably caused because you are loading your kv file twice (Your "Multiple screens named ..." warnings are indicative of that.). I recommend renaming your kv to vocabularyjournal.kv and not using Builder.load_file (). You can look at this related answer.
main.py:
import kivy
kivy.require('1.10.0')
from kivy.app import App
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.properties import ObjectProperty
from kivy.properties import StringProperty
import json
class MenuPage(Screen):
pass
class DisplayPage(Screen):
search_box= ObjectProperty()
label_maening=StringProperty()
label_synonym=StringProperty()
label_ant=StringProperty()
label_sentence=StringProperty()
def search_function(self):
with open('vocab_words.json') as rfile:
data=json.load(rfile)
word=self.search_box.text
for value in data:
if value['word']==word:
self.label_maening=value['meaning']
self.label_synonym=value['synonym']
self.label_ant=value['antonyms']
self.label_sentence=value['sentence']
class WordInsertPage(Screen):
pass
class NewWordPage(Screen):
word_box = ObjectProperty()
meaning_box = ObjectProperty()
synonym_box = ObjectProperty()
ant_box = ObjectProperty()
sentence_box = ObjectProperty()
def saving_data(self):
with open('vocab_words.json') as rfile:
data=json.load(rfile)
entry={'word': self.word_box.text, 'meaning': self.meaning_box.text, 'synonym': self.synonym_box.text, 'antonyms': self.ant_box.text, 'sentence': self.sentence_box.text}
data.append(entry)
with open('vocab_words.json','w') as wfile:
json.dump(data,wfile,indent=4)
class FlashCard(Screen):
pass
class WordGroups(Screen):
pass
class Manager(ScreenManager):
pass
class VocabularyJournalApp(App):
def build(self):
return Manager()
obj = VocabularyJournalApp()
obj.run()
vocabularyjournal.kv:
<Manager>:
MenuPage:
name: 'menu'
WordInsertPage:
name: 'insertword'
NewWordPage:
name: 'newword'
FlashCard:
name: 'flashcard'
WordGroups:
name: 'wordgroup'
DisplayPage:
name: 'display'
<MenuPage>:
Label:
text: "Vocabulary Journal"
size_hint: .90,.10
StackLayout:
orientation: 'tb-rl'
spacing: 10
padding: 10
Button:
text: 'Search'
size_hint: None,.20
width: 130
background_down:'darkgrey.png'
on_press: root.manager.current='insertword'
Button:
text: 'New Word'
size_hint: None,.20
width: 130
background_down:'darkgrey.png'
on_press: root.manager.current='insertword'
Button:
text: 'Flash Cards'
size_hint: None,.20
width: 130
background_down:'darkgrey.png'
on_press: root.manager.current='flashcard'
Button:
text: 'Word Groups'
size_hint: None,.20
width: 130
background_down:'darkgrey.png'
on_press: root.manager.current='wordgroup'
<WordInsertPage>:
FloatLayout:
Button:
text: "New Word"
on_press: root.manager.current='newword'
font_size: 30
color: 0,0,0,1
size_hint: .2, .1
pos_hint: {"center_x": .5, "center_y": 0.3}
background_down: 'darkgrey.png'
Button:
text: "search word"
on_press: root.manager.current='display'
font_size: 30
color: 0,0,0,1
size_hint: .2, .1
pos_hint: {"center_x": .5, "center_y": 0.5}
background_down: 'darkgrey.png'
Button:
text: 'Flash Cards'
on_press: root.manager.current="flashcard"
font_size: 30
color: 0,0,0,1
size_hint: .2, .1
pos_hint: {"center_x": .5, "center_y": 0.7}
background_down: 'darkgrey.png'
<NewWordPage>:
id: refer_to_it
word_box: word_input
meaning_box: meaning_input
synonym_box: Synonym_input
ant_box: ant_input
sentence_box: sentence_input
StackLayout:
orientation: 'tb-rl'
spacing: 10
padding: 90
TextInput:
hint_text: "write your word here"
color: 1,1,1,1
id: word_input
width: 300
size_hint: None, .10
TextInput:
hint_text: "write meaning of your word here"
color: 1,1,1,1
id: meaning_input
width: 600
size_hint: None, .20
TextInput:
hint_text: "write Synonyms of your word here"
color: 1,1,1,1
id: Synonym_input
width: 600
size_hint: None, .20
TextInput:
hint_text: "write antonyms of your text here"
color: 1,1,1,1
id: ant_input
width: 600
size_hint: None, .20
TextInput:
hint_text: "write a sentence based on your word here"
color: 1,1,1,1
id: sentence_input
width: 600
size_hint: None, .20
Button:
hint_text: 'Save'
size_hint: None,.10
width: 130
background_down:'darkgrey.png'
on_press: refer_to_it.saving_data()
<DisplayPage>: # here is the display page
search_box: search_text
BoxLayout:
size_hint_y: None
height: '48dp'
TextInput:
hint_text:'enter the word you wanna search here'
id: search_text
multiline: False
on_text_validate: root.search_function()
Accordion:
orientation: 'vertical'
AccordionItem:
title:'meaning'
Label:
text: root.label_maening
text_size: self.width, None
AccordionItem:
title:'Synonym'
Label:
text: root.label_synonym
text_size: self.width, None
AccordionItem:
title:'Antonym'
Label:
text: root.label_ant
text_size: self.width, None
AccordionItem:
title:'Sentence'
Label:
text: root.label_sentence
text_size: self.width, None
Note: You shouldn't use object as variable name. It is a built-in function.