Hello,
What I am actually trying to do is the following:
I want to create this login screen where if you have the correct mail (which in this case is only test#test.com) to trigger the inapp screen from the KV file and this is my actual problem.
I cannot trigger the "inapp" screen
The reason why I don't have my screenmanager and my screens classes in the PY file is because it gets bugged and when I switch screens it overlaps
Here is an example of the buggy UI
What am I doing wrong in my case?
This is my PY file:
class mytest(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.accent_palette = 'Blue'
self.theme_cls.accent_hue = '300'
self.theme_cls.primary_palette = "Green"
self.theme_cls.primary_hue = "400"
self.icon = 'testphoto.png'
self.title = "coolapp"
def login_checker(self, mail, psswrd):
hismail = mail
hispass = psswrd
print(themail)
print(thepass)
access_screen = self.root.ids.inapp
if themail == "test#test.com":
print("Corect")
access_screen
else:
toast("Invalid E-mail")
And this is the KV file:
BoxLayout:
ScreenManager:
id: scrin_meneger
Screen: #LOGIN
name: "login"
id: loginn
FloatLayout:
orientation: 'vertical'
Image: #Login Background Image
source: "./pictures/whitebg.jpg"
allow_stretch: True
keep_ratio: False
MDTextField: #mail-input
id: emadress
pos_hint: {'center_x': .5, 'center_y': .6}
size_hint: 0.60, 0.06
hint_text: "Email: "
current_hint_text_size: 0.5, 1
current_hint_text_color: 0, 0, 0, .60
helper_text: "No input provided"
helper_text_mode: "on_error"
color_mode: 'custom'
line_color_focus: 0, 0, 0, 1
required: True
max_text_lenght: 20
#min_text_lenght: 5
MDTextField: #pass-input
id: psswd
pos_hint: {'center_x': .5, 'center_y': .5}
size_hint: 0.60, 0.06
password: True
hint_text: "Password: "
current_hint_text_color: 0, 0, 0, .60
helper_text: "No input provided"
helper_text_mode: "on_error"
color_mode: 'custom'
line_color_focus: 0, 0, 0, 1
required: True
max_text_lenght: 20
#min_text_lenght: 5
MDFlatButton: #Login Button
text: "Login"
text_color: 0, 0, 0, .80
pos_hint: {'center_x': .3, 'y': .2}
size_hint: 0.4, 0.1
on_release:
app.login_checker(emadress.text, psswd.text)
Screen: #Application
name: 'inapp'
id: inapp
BoxLayout:
orientation: 'vertical'
MDBottomNavigation:
#Screen 1
MDBottomNavigationItem:
id: main_screen
name: "main_menu"
text: "Main Menu"
icon: "air-humidifier"
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: toolbar
title: "This is my MDToooolbar"
You just need to access the ScreenManager to set the current Screen, like this:
if themail == "test#test.com":
print("Corect")
self.root.ids.scrin_meneger.current = 'inapp'
else:
toast("Invalid E-mail")
Related
I'm stuck in this problem, I'm using a dialog so that the user can change his password but i cant access the textfield text from the DashboardGerente class...
main.py
class Content(BoxLayout):
old_pass_tf = ObjectProperty()
new_pass_tf = ObjectProperty()
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.app = MDApp.get_running_app()
def show_passnew(self,widget):
if widget.state == "normal":
self.ids.new_pass.password = True
else:
self.ids.new_pass.password = False
def show_passold(self,widget):
if widget.state == "normal":
self.ids.old_pass.password = True
else:
self.ids.old_pass.password = False
class DashboardGerente(Screen):
dialog = None
cont = Content()
def Logout(self):
wm = MDApp.get_running_app().root
wm.current = "Login"
def teste(self):
print(Login.username)
def show_alert_dialog(self):
if not self.dialog:
self.dialog = MDDialog(
title = "Alterar palavra-passe",
text = "Palavra-passe antiga",
content_cls=Content(),
type="custom",
buttons=[
MDFlatButton(
text="Cancelar",
text_color=rgba(0,0,0,1),
on_release = self.cancelar
),
MDFlatButton(
text="Alterar",
text_color = rgba(0,0,0,1),
on_release = self.change_pass
),
],
)
self.dialog.open()
def cancelar(self,obj):
self.dialog.dismiss()
def change_pass(self, obj):
#i want to access the textfield text here
pass
.kv file
<Content>:
orientation: "vertical"
spacing: "12dp"
size_hint_y: None
height: "120dp"
id: content_dialog_change_pass
MDTextField:
id: old_pass
hint_text: "Palavra-passe antiga"
mode: "rectangle"
required: False
color: 1, 0, 1, 1
line_color_focus: 0.5, 0, 1, 1
icon_right: "shield-key"
size_hint: .9, None
password: True
GridLayout:
cols:2
MDCheckbox:
on_press: root.show_passold(self)
size_hint: None, None
height: 5
width: 20
MDLabel:
text: "Mostrar Palavra-passe"
font_size: "13px"
color: 0,0,0,.4
MDTextField:
id: new_pass
hint_text: "Palavra-passe nova"
mode: "rectangle"
required: False
color: 1, 0, 1, 1
line_color_focus: 0.5, 0, 1, 1
icon_right: "shield-key"
size_hint: .9, None
password: True
GridLayout:
cols:2
MDCheckbox:
on_press: root.show_passnew(self)
size_hint: None, None
height: 10
width: 20
MDLabel:
text: "Mostrar Palavra-passe"
font_size: "13px"
color: 0,0,0,.4
<DashboardGerente#FloatLayout>:
name: "DashboardGerente"
MDBottomNavigation:
panel_color: get_color_from_hex("#c300ff")
text_color: 0,0,0,1
MDBottomNavigationItem: ## Perfil do utilizador
name: 'Profile'
text: 'Perfil'
icon: 'account'
badge_icon: "numeric-10"
MDCard:
border_radius: 20
radius: [15]
size_hint:None, None
size: 300, 400
pos_hint: {"center_x": 0.5, "center_y": 0.5}
elevation: 10
orientation: "vertical"
AnchorLayout:
anchor_x: "left"
anchor_y: "top"
MDIconButton:
id:logout
text_color: 0,0,0,1
on_release: root.Logout(), root.teste()
icon: "account-arrow-left"
GridLayout:
cols: 2
padding: 40,0,0,0
MDLabel:
text: "ID: "
MDLabel:
text: "5000"
MDLabel:
text: "Nome: "
MDLabel:
text: "nome"
MDLabel:
text: "Cargo: "
MDLabel:
text: "cargo"
MDLabel:
text: "Salário: "
MDLabel:
text: "1000"
MDLabel:
text: "Secção: "
MDLabel:
text: "Frutaria"
MDRaisedButton:
text: "Mudar palavra-passe"
md_bg_color: 0.5, 0, 1, 1
on_press: root.teste()
pos_hint: {"center_x": 0.5, "center_y": 0.5}
on_release: root.show_alert_dialog()
MDBottomNavigationItem:
name: 'Providers'
text: 'Fornecedores'
icon: 'truck'
MDLabel:
text: 'Mail'
halign: 'center'
MDBottomNavigationItem:
name: 'Products'
text: 'Produtos'
icon: 'shopping'
badge_icon: "numeric-10"
MDLabel:
text: 'Mail'
halign: 'center'
MDBottomNavigationItem:
name: 'Employes'
text: 'Empregados'
icon: 'account-multiple'
badge_icon: "numeric-10"
MDRaisedButton:
text: "Adicionar funcionários"
md_bg_color: 0.5, 0, 1, 1
pos_hint: {"center_x": 0.5, "center_y": 0.5}
MDBottomNavigationItem:
name: 'Sections'
text: 'Secções'
icon: 'storefront'
badge_icon: "numeric-10"
MDLabel:
text: 'Mail'
halign: 'center'
This are my project files that matter for now, how can i get the .text value from the old_pass textfield in the DashboardGerente class?
I would suggest as follows,
Create a property, say, user_input = StringProperty("") in your App's subclass. then in kv lang of Content class,
MDTextField:
id: old_pass
on_text: app.user_input = self.text
Now use this in any method of DashboardGerente as MDApp.get_running_app().user_input
I have custom class in main.kv file, and with command I can add to another screen in createRecipe.kv file. But how can I read names.text(from Label), unit.text(from Label) and qtyRe.text(from TextInput) to main.py file?
screen_manager.get_screen('createRecipe').ingredientforRecipe.add_widget(AddIngToRecipe(names=names, unit=unit))
main.kv
<AddIngToRecipe>
id: addIngToRecipe
names: names
unit: unit
MDLabel:
id: names
text: str(root.names)
markup: True
font_size: '20sp'
size_hint_x: .8
pos_hint: {"center_x": .4, "center_y": .4}
MDLabel:
id: unit
text: str(root.unit)
markup: True
font_size: '18sp'
size_hint_x: .8
theme_text_color: "Custom"
text_color: 1, 1, 1, 1
pos_hint: {"center_x": .73, "center_y": .4}
TextInput:
id: qtyRe
hint_text: 'Qty:'
size_hint: 1, None
input_filter: 'int'
pos_hint: {"center_x": .5, "center_y": .5}
height: 55
cursor_color: 75/255, 0/255, 130/255, 1
background_color: 0, 0, 0, 0
multiline: False
createRecipe.kv
MDScreen:
name: 'createRecipe'
ingredientforRecipe: ingredientforRecipe
MDFloatLayout:
id: create_recipe
ScrollView:
do_scroll_y: True
do_scroll_x: False
size_hint_y: .41
pos_hint: {"center_x": .55, "y": 0.41}
bar_width: 0
GridLayout:
id: ingredientforRecipe
cols: 1
height: self.minimum_height
row_default_height: 70
size_hint_y: None
main.py
class AddIngToRecipe(FakeRectangularElevationBehavior, FloatLayout, TouchBehavior):
names = ObjectProperty()
unit = ObjectProperty()
def get_from(self):
names1 = self.ids.qtyRe.text
print(names1)
class PieceofCake(MDApp, Screen):
def create_recipe(self, Renames, Recomment):
self.get_from_addIngToRecipe = AddIngToRecipe()
self.get_from_addIngToRecipe.get_from()
names = self.ids.ingredientforRecipe.qtyRe.text
print(names)
print(Renames)
print(Recomment)
names = self.ids.names.text
unit = self.ids.unit.text
qtyRe = self.ids.qtyRe.text
Further more, if you want to access values of a widget from a different class from the one you are working with by any chance, you can use:
MDApp.get_running_app().root.ids.idOfTheClass.ids.idOfTheWidget.valueToGet
MDApp.get_running_app().root.ids.idOfTheClass acts the same as self for the targeted class
I'm new to Kivy, I'm working on a tracking app for vehicle repair and I've got a list of appointments and I'm trying to go to a different screen when you press an item on the list and I I have no clue on why it isn't working for me as it says that it is on a different screen but it isn't on the app
from kivymd.app import MDApp
from kivy.lang.builder import Builder
from kivymd.uix.list import ThreeLineAvatarIconListItem
from kivymd.uix.list import ImageLeftWidget
from kivy.uix.screenmanager import Screen, ScreenManager, SwapTransition, CardTransition
from kivy.core.window import Window
import sqlite3
DatabaseConnection = sqlite3.connect('CarWorkshopDB.db')
cursor = DatabaseConnection.cursor()
Window.size= (400, 650)
class MainScreen(Screen):
pass
class AddScreen(Screen):
pass
class DetailsScreen(Screen):
pass
class WorkApp(MDApp):
def build(self):
self.screen_manager = ScreenManager(transition=CardTransition())
self.screen_manager.add_widget(MainScreen(name='MainScreen'))
self.screen_manager.add_widget(AddScreen(name='AddScreen'))
self.screen_manager.add_widget(DetailsScreen(name='DetailsScreen'))
screen = Builder.load_file("test2.kv")
return screen
def on_start(self):
client = 'John smith'
cursor.execute("SELECT TrackingNumber, Plate, Status FROM Appointments WHERE Customer =?", (client,))
for i in cursor:
self.new_message(i[0], i[1], i[2])
def new_message(self, TrackingNumber, Vehicle, Process):
new_message = ThreeLineAvatarIconListItem(text=TrackingNumber, secondary_text=Vehicle, tertiary_text=Process)
new_message.add_widget(ImageLeftWidget(source='RepairIMG.jpg'))
new_message.bind(on_release=self.on_touch_down)
self.root.ids.list.add_widget(new_message)
def on_touch_down(self, x):
print(self.screen_manager.current)
self.screen_manager.current = "DetailsScreen"
self.screen_manager.transition.direction = 'right'
print(self.screen_manager.current)
WorkApp().run()
this is the list code in the kv file
NavigationLayout:
ScreenManager:
id: screen_manager
MainScreen:
name : "MainScreen"
BoxLayout:
orientation:'vertical'
MDBottomNavigation:
panel_color: 1, .643, 0, 1
MDBottomNavigationItem:
name: 'screen 1'
text: 'Home'
icon: 'alpha-h-circle'
MDToolbar:
title: 'Add Repair'
md_bg_color: 1, .643, 0, 1
elevation: 6
pos_hint: {'top':1}
Widget:
MDBottomNavigationItem:
name: 'screen 2'
text: 'Track'
icon: 'alpha-t-circle'
MDToolbar:
id: toolbar
title: 'Track History'
md_bg_color: 1, .643, 0, 1
elevation: 6
pos_hint: {'top':1}
NavigationLayout:
x: toolbar.height
size_hint_y: 1.0 - toolbar.height/root.height
ScreenManager:
Screen:
name: 'ScrollViewScreen'
ScrollView:
MDList:
id: list
MDFloatingActionButton:
icon: 'plus'
md_bg_color: 1, .643, 0, 1
on_release:
screen_manager.current = 'AddScreen'
screen_manager.transition = CardTransition()
screen_manager.transition.direction = "down"
pos_hint: {'x': .84, 'y': .02}
MDBottomNavigationItem:
name: 'screen 4'
text: 'More'
icon: 'dots-horizontal'
MDToolbar:
title: 'More'
md_bg_color: 1, .643, 0, 1
elevation: 6
pos_hint: {'top':1}
Widget:
MDLabel:
text: 'dfsfdsf'
halign: 'center'
AddScreen:
name: 'AddScreen'
id: Add
FloatLayout:
orientation: 'vertical'
MDToolbar:
id: toolbar2
title: 'Add Tracking Number'
md_bg_color: 1, .643, 0, 1
elevation: 6
pos_hint: {'top':1}
MDIconButton:
icon : 'close'
pos_hint : {'top':0.98, 'x':0.85}
on_release :
screen_manager.current = "Main"
screen_manager.transition = CardTransition()
screen_manager.transition.direction = "up"
FloatLayout:
x: toolbar2.height
size_hint_y: 1.0 - toolbar.height/root.height
ScatterLayout:
MDLabel:
text: 'Track Repair'
font_style: 'H4'
valign: 'top'
pos_hint: {'top':1}
text_size: self.size
size_hint: None, None
MDTextFieldRound:
icon_left: 'alpha-t-circle'
hint_text: 'Tracking Number'
normal_color: 1, .643, 0, 1
pos_hint: {'y':.7}
text_size: self.size
MDTextFieldRound:
icon_left: 'alpha-p-circle'
hint_text: 'Postcode'
normal_color: 1, .643, 0, 1
pos_hint: {'y':.6}
text_size: self.size
MDTextButton:
text: "Cant find your tracking number?"
custom_color: 1, .643, 0, 1
pos_hint: {'y':.5}
halign: 'center'
MDRectangleFlatButton:
text: 'confirm'
pos_hint: {'y':.4}
valign: 'middle'
text_size: self.size
DetailsScreen:
name: 'DetailsScreen'
id: Details
BoxLayout:
orientation: 'vertical'
MDLabel:
text: 'details Screen?'
The problem is that in your build() method you are building a widget tree in the lines:
self.screen_manager = ScreenManager(transition=CardTransition())
self.screen_manager.add_widget(MainScreen(name='MainScreen'))
self.screen_manager.add_widget(AddScreen(name='AddScreen'))
self.screen_manager.add_widget(DetailsScreen(name='DetailsScreen'))
But this widget tree is not used in your GUI. The widget tree in your GUI is built from the kv file by:
screen = Builder.load_file("test2.kv")
When your code tries to change the current Screen by using:
self.screen_manager.current = "DetailsScreen"
it is changing the current Screen of a ScreenManager that is not in your GUI.
A fix is to assign the correct value to self.screen_manager, like this:
class WorkApp(MDApp):
def build(self):
screen = Builder.load_file("test2.kv")
self.screen_manager = screen.ids.screen_manager
return screen
I am trying to build an App using Python and kivy.
In my kv file I wanted to create a custom widget (MenuFloatLayout)
which can be referenced by the other screens. It is basically a Menu bar that is on every screen. This bar consists of several toggle buttons that are in their down state and disabled if you are currently on the screen this button is linked to.
This is referenced by:
state: "down" if root.manager.current == 'Screenname' else "normal"
The Problem is:
root.manager.current is not linked to the usual screen manager anymore,
because my custom widget is the root now.
Is there a work around?
Or is there a easier way to link the toggle buttons state to the screen the user is on?
I am new to programming and Python, I'm glad for any help or tips you can give me! Thanks!
The Python file:
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen, ScreenManager
class StartWindow(Screen):
pass
class PortfolioOverview(Screen):
pass
class Portfolio(Screen):
pass
class Market(Screen):
pass
class Economics(Screen):
pass
class PortfolioTools(Screen):
pass
class WindowManager(ScreenManager):
pass
kv = Builder.load_file("vigiles.kv")
class VigilesApp(App):
def build(self):
return kv
if __name__ == "__main__":
VigilesApp().run()
And the kv file:
WindowManager:
StartWindow:
PortfolioOverview:
Portfolio:
Market:
Economics:
PortfolioTools:
<MenuFloatLayout#FloatLayout>:
Label:
text: "Portfolio"
markup: True
size_hint: 0.5, None
height: 30
pos_hint:{"top":1, "left":1}
TextInput:
text: "Search"
multiline: False
size_hint: 0.5, None
height: 30
pos_hint:{"top":1, "right":1}
ScrollView:
size_hint: None, None
do_scroll_y: False
do_scroll_x: True
size: 500, 150
GridLayout:
rows: 1
size_hint_y: None
ToggleButton:
group: "pmenu"
text: 'Overview'
state: "down" if root.manager.current == 'poverview' else "normal"
disabled: True if root.manager.current == 'poverview' else False
background_disabled_down: "atlas://data/images/defaulttheme/button_pressed"
disabled_color: 1, 1, 1, 1
on_release: app.root.current = "poverview"
ToggleButton:
group: "pmenu"
text: 'Portfolio'
state: "down" if root.manager.current == 'portfolio' else "normal"
disabled: True if root.manager.current == 'portfolio' else False
background_disabled_down: "atlas://data/images/defaulttheme/button_pressed"
disabled_color: 1, 1, 1, 1
on_release: app.root.current = "portfolio"
ToggleButton:
group: "pmenu"
text: 'Market'
state: "down" if root.manager.current == 'market' else "normal"
disabled: True if root.manager.current == 'market' else False
background_disabled_down: "atlas://data/images/defaulttheme/button_pressed"
disabled_color: 1, 1, 1, 1
on_release: app.root.current = "market"
ToggleButton:
group: "pmenu"
text: 'Economics'
state: "down" if root.manager.current == 'economics' else "normal"
disabled: True if root.manager.current == 'economics' else False
background_disabled_down: "atlas://data/images/defaulttheme/button_pressed"
disabled_color: 1, 1, 1, 1
on_release: app.root.current = "economics"
ToggleButton:
group: "pmenu"
text: 'Tools'
state: "down" if root.manager.current == 'ptools' else "normal"
disabled: True if root.manager.current == 'ptools' else False
background_disabled_down: "atlas://data/images/defaulttheme/button_pressed"
disabled_color: 1, 1, 1, 1
on_release: app.root.current = "ptools"
<StartWindow>:
name: "start"
BoxLayout:
canvas:
Rectangle:
size: self.size
color: 1, 1, 1, 0
id: login_layout
orientation: 'vertical'
padding: [10,10,10,10]
spacing: 30
Label:
text: 'some text'
font_size: 32
color: 0, 0, 0, 1
BoxLayout:
orientation: 'vertical'
Label:
text: 'Login'
font_size: 18
halign: 'left'
text_size: root.width-20, 20
color: 0, 0, 0, 1
TextInput:
id: login
multiline:False
font_size: 28
BoxLayout:
orientation: 'vertical'
Label:
text: 'Password'
halign: 'left'
font_size: 18
text_size: root.width-20, 20
color: 0, 0, 0, 1
TextInput:
id: password
multiline:False
password:True
font_size: 28
Button:
text: 'Connect'
font_size: 24
on_release: app.root.current = "poverview"
<PortfolioOverview>:
name: "poverview"
MenuFloatLayout:
<Portfolio>:
name: "portfolio"
MenuFloatLayout:
<Market>:
name: "market"
MenuFloatLayout:
<Economics>:
name: "economics"
MenuFloatLayout:
<PortfolioTools>:
name: "ptools"
MenuFloatLayout:
Goal is to either link my custom widget back to my screen manager or find an easier solution to link the toggle buttons state to the current screen.
AttributeError: 'MenuFloatLayout' object has no attribute 'manager'
I would make your root widget a Layout widget (GridLayout, BoxLayout, or FloatLayout), and have your screen manager take up only part of the actual screen. Try changing
WindowManager:
StartWindow:
PortfolioOverview:
Portfolio:
to:
GridLayout:
# Play with using a FloatLayout or BoxLayout instead of GridLayout if you want
cols: 1
MenuFloatLayout:
id: the_menu_id
WindowManager:
StartWindow:
PortfolioOverview:
Portfolio:
That way your menu will persist and the screen manager is only changing part of the actual screen.
By giving the MenuFloatLayout an id you are able to reference it. To reference it from the Python side, use self.root.ids.the_menu_id if you're referencing it from your App object. If you're in some other kind of object, you can do the same by first importing App (import App) and then using App.get_running_app().root.ids.the_menu_id
To reference it from your screens, you can use the app keyword. For example: app.root.ids.the_menu_id
All three ways of referencing the menu's id are essentially identical.
Problems
Too many instances of MenuFloatLayout
Use lots of resources e.g. memory, this makes the app big and poor performance
Solution
Create one instance of MenuFloatLayout
Each screen reference the one and only one instance of MenuFloatLayout
Use nested ScreenManager. This first ScreenManager for controlling the authentication / login screen. The second ScreenManager for navigation between different screens.
Create a dynamic class for ToggleButton
Example
main.py
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.screenmanager import Screen, ScreenManager
class StartWindow(Screen):
pass
class PortfolioOverview(Screen):
pass
class Portfolio(Screen):
pass
class Market(Screen):
pass
class Economics(Screen):
pass
class PortfolioTools(Screen):
pass
class WindowManager(ScreenManager):
pass
Builder.load_file("main.kv")
class TestApp(App):
def build(self):
return WindowManager()
if __name__ == "__main__":
TestApp().run()
main.kv - kv file
<WindowManager>:
sm2: sm2
StartWindow:
Screen:
name: 'connect'
ScreenManager:
id: sm2
PortfolioOverview:
Portfolio:
Market:
Economics:
PortfolioTools:
MenuFloatLayout:
<CustomToggleButton#ToggleButton>: # dynamic class
group: "pmenu"
state: "normal" if app.root is None else "down" if app.root.sm2.current == self.text.lower() else "normal"
background_disabled_down: "atlas://data/images/defaulttheme/button_pressed"
disabled_color: 1, 1, 1, 1
on_state:
if self.state == "down": self.disabled = True
else: self.disabled = False
on_release:
app.root.sm2.current = self.text.lower()
<MenuFloatLayout#FloatLayout>: # dynamic class
Label:
text: "Portfolio"
markup: True
size_hint: 0.5, None
height: 30
pos_hint:{"top":1, "left":1}
TextInput:
hint_text: "Search"
multiline: False
size_hint: 0.5, None
height: 30
pos_hint:{"top":1, "right":1}
ScrollView:
size_hint: None, None
do_scroll_y: False
do_scroll_x: True
size: 500, 150
GridLayout:
rows: 1
size_hint_y: None
CustomToggleButton:
text: 'Overview'
state: 'down' # default
CustomToggleButton:
text: 'Portfolio'
CustomToggleButton:
text: 'Market'
CustomToggleButton:
text: 'Economics'
CustomToggleButton:
text: 'Tools'
<StartWindow>:
name: "start"
BoxLayout:
canvas:
Rectangle:
size: self.size
color: 1, 1, 1, 0
id: login_layout
orientation: 'vertical'
padding: [10,10,10,10]
spacing: 30
Label:
text: 'some text'
font_size: 32
color: 0, 0, 0, 1
BoxLayout:
orientation: 'vertical'
Label:
text: 'Login'
font_size: 18
halign: 'left'
text_size: root.width-20, 20
color: 0, 0, 0, 1
TextInput:
id: login
multiline:False
font_size: 28
BoxLayout:
orientation: 'vertical'
Label:
text: 'Password'
halign: 'left'
font_size: 18
text_size: root.width-20, 20
color: 0, 0, 0, 1
TextInput:
id: password
multiline:False
password:True
font_size: 28
Button:
text: 'Connect'
font_size: 24
on_release:
root.manager.current = 'connect'
<PortfolioOverview>:
name: "overview"
Label:
text: 'Screen - Overview'
<Portfolio>:
name: "portfolio"
Label:
text: 'Screen - Portfolio'
<Market>:
name: "market"
Label:
text: 'Screen - Market'
<Economics>:
name: "economics"
Label:
text: 'Screen - Economics'
<PortfolioTools>:
name: "tools"
Label:
text: 'Screen - Portfolio Tools'
Output
I am trying to restructure the kivymd project file but I am not able to place the navigation bar at the place at which it is normally. I cannot see why this is happening (see pictures and code below).
This is how it looks like
and this is how it should look like
I am using the three files app.py, app.kv and labels.py (for injecting labels from a *.py file).
# app.kv
# -*- coding: utf-8 -*-
import os
import kivy.app
from kivy.lang import Builder
from application.kivymd.list import BaseListItem
from application.kivymd.material_resources import DEVICE_TYPE
from application.kivymd.navigationdrawer import MDNavigationDrawer, NavigationDrawerHeaderBase
from application.kivymd.theming import ThemeManager
# User defined imports
from kivy.core.window import Window
Window.fullscreen = "auto"
class HackedDemoNavDrawer(MDNavigationDrawer):
# DO NOT USE
def add_widget(self, widget, index=0):
if issubclass(widget.__class__, BaseListItem):
self._list.add_widget(widget, index)
if len(self._list.children) == 1:
widget._active = True
self.active_item = widget
# widget.bind(on_release=lambda x: self.panel.toggle_state())
widget.bind(on_release=lambda x: x._set_active(True, list=self))
elif issubclass(widget.__class__, NavigationDrawerHeaderBase):
self._header_container.add_widget(widget)
else:
super(MDNavigationDrawer, self).add_widget(widget, index)
class MainApp(kivy.app.App):
theme_cls = ThemeManager()
title = "Application"
def build(self):
main_widget = Builder.load_file(
os.path.join(os.path.dirname(__file__), "./app.kv")
)
# self.theme_cls.theme_style = 'Dark'
main_widget.ids.text_field_error.bind(
on_text_validate=self.set_error_message,
on_focus=self.set_error_message)
self.bottom_navigation_remove_mobile(main_widget)
return main_widget
def bottom_navigation_remove_mobile(self, widget):
# Removes some items from bottom-navigation demo when on mobile
if DEVICE_TYPE == 'mobile':
widget.ids.bottom_navigation_demo.remove_widget(widget.ids.bottom_navigation_desktop_2)
if DEVICE_TYPE == 'mobile' or DEVICE_TYPE == 'tablet':
widget.ids.bottom_navigation_demo.remove_widget(widget.ids.bottom_navigation_desktop_1)
def set_error_message(self, *args):
if len(self.root.ids.text_field_error.text) == 2:
self.root.ids.text_field_error.error = True
else:
self.root.ids.text_field_error.error = False
def on_pause(self):
return True
def on_stop(self):
pass
if __name__ == '__main__':
MainApp().run()
This is the app.kv file which is injected into the app.py file
# app.kv
#:import Toolbar application.kivymd.toolbar.Toolbar
#:import MDNavigationDrawer application.kivymd.navigationdrawer.MDNavigationDrawer
#:import NavigationLayout application.kivymd.navigationdrawer.NavigationLayout
#:import NavigationDrawerDivider application.kivymd.navigationdrawer.NavigationDrawerDivider
#:import NavigationDrawerToolbar application.kivymd.navigationdrawer.NavigationDrawerToolbar
#:import NavigationDrawerSubheader application.kivymd.navigationdrawer.NavigationDrawerSubheader
#:import MDCheckbox application.kivymd.selectioncontrols.MDCheckbox
#:import MDSwitch application.kivymd.selectioncontrols.MDSwitch
#:import MDTextField application.kivymd.textfields.MDTextField
#:import MDThemePicker application.kivymd.theme_picker.MDThemePicker
#:import labels application.labels
NavigationLayout:
id: nav_layout
MDNavigationDrawer:
id: nav_drawer
NavigationDrawerToolbar:
title: labels.NAVIGATION
NavigationDrawerIconButton:
icon: 'checkbox-blank-circle'
text: labels.DASHBOARD
on_release: app.root.ids.scr_mngr.current = 'dashboard'
NavigationDrawerIconButton:
icon: 'checkbox-blank-circle'
text: labels.SYSTEM_INSPECTOR
on_release: app.root.ids.scr_mngr.current = 'system_inspector'
NavigationDrawerIconButton:
icon: 'checkbox-blank-circle'
text: labels.SYSTEM_PARAMETERS
on_release: app.root.ids.scr_mngr.current = 'system_parameters'
BoxLayout:
orientation: 'vertical'
halign: "center"
Toolbar:
id: toolbar
title: labels.APPLICATION_NAME
md_bg_color: app.theme_cls.primary_color
background_palette: 'Primary'
background_hue: '500'
left_action_items: [['menu', lambda x: app.root.toggle_nav_drawer()]]
#right_action_items: [['dots-vertical', lambda x: app.root.toggle_nav_drawer()]]
ScreenManager:
id: scr_mngr
Screen:
name: 'dashboard'
MDLabel:
font_style: 'Body1'
theme_text_color: 'Primary'
text: "This is the dashboard!"
size_hint_x:None
width: '250dp'
halign: "center"
pos_hint: {"center_x": 0.50, "center_y": 0.75}
MDCheckbox:
id: grp_chkbox_1
group: 'test'
size_hint: None, None
size: dp(48), dp(48)
pos_hint: {'center_x': 0.25, 'center_y': 0.5}
MDCheckbox:
id: grp_chkbox_2
group: 'test'
size_hint: None, None
size: dp(48), dp(48)
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
MDSwitch:
size_hint: None, None
size: dp(36), dp(48)
pos_hint: {'center_x': 0.75, 'center_y': 0.5}
_active: False
Screen:
name: 'system_inspector'
MDLabel:
font_style: 'Body1'
theme_text_color: 'Primary'
text: "This is the system_inspector page!"
size_hint_x:None
width: '250dp'
halign: "center"
pos_hint: {"center_x": 0.50, "center_y": 0.75}
MDCheckbox:
id: grp_chkbox_1
group: 'test'
size_hint: None, None
size: dp(48), dp(48)
pos_hint: {'center_x': 0.25, 'center_y': 0.5}
MDCheckbox:
id: grp_chkbox_2
group: 'test'
size_hint: None, None
size: dp(48), dp(48)
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
MDSwitch:
size_hint: None, None
size: dp(36), dp(48)
pos_hint: {'center_x': 0.75, 'center_y': 0.5}
_active: False
Screen:
name: 'system_parameters'
BoxLayout:
orientation: "horizontal"
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
padding: dp(48)
spacing: 10
MDTextField:
hint_text: "No helper text"
input_filter: "float"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
input_filter: "int"
MDTextField:
hint_text: "No helper text"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
padding: dp(48)
spacing: 10
MDTextField:
hint_text: "No helper text"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
MDTextField:
hint_text: "No helper text"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
Screen:
name: 'textfields'
ScrollView:
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
padding: dp(48)
spacing: 10
MDTextField:
hint_text: "No helper text"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
MDTextField:
hint_text: "Persistent helper text"
helper_text: "Text is always here"
helper_text_mode: "persistent"
MDTextField:
id: text_field_error
hint_text: "Helper text on error (Hit Enter with two characters here)"
helper_text: "Two is my least favorite number"
helper_text_mode: "on_error"
MDTextField:
hint_text: "Max text length = 10"
max_text_length: 10
MDTextField:
hint_text: "required = True"
required: True
helper_text_mode: "on_error"
MDTextField:
multiline: True
hint_text: "Multi-line text"
helper_text: "Messages are also supported here"
helper_text_mode: "persistent"
MDTextField:
hint_text: "color_mode = \'accent\'"
color_mode: 'accent'
MDTextField:
hint_text: "color_mode = \'custom\'"
color_mode: 'custom'
helper_text_mode: "on_focus"
helper_text: "Color is defined by \'line_color_focus\' property"
line_color_focus: self.theme_cls.opposite_bg_normal # This is the color used by the textfield
MDTextField:
hint_text: "disabled = True"
disabled: True
Screen:
name: 'nav_drawer'
HackedDemoNavDrawer:
# NavigationDrawerToolbar:
# title: "Navigation Drawer Widgets"
NavigationDrawerIconButton:
icon: 'checkbox-blank-circle'
text: "Badge text ---->"
badge_text: "99+"
NavigationDrawerIconButton:
active_color_type: 'accent'
text: "Accent active color"
NavigationDrawerIconButton:
active_color_type: 'custom'
text: "Custom active color"
active_color: [1, 0, 1, 1]
NavigationDrawerIconButton:
use_active: False
text: "Use active = False"
NavigationDrawerIconButton:
text: "Different icon"
icon: 'alarm'
NavigationDrawerDivider:
NavigationDrawerSubheader:
text: "NavigationDrawerSubheader"
NavigationDrawerIconButton:
text: "NavigationDrawerDivider \/"
NavigationDrawerDivider:
Here is the labels.py file for injecting the labels into the kv file.
# labels.py
APPLICATION_NAME = "Application"
NAVIGATION = "Navigation"
DASHBOARD = "Dashboard"
SYSTEM_INSPECTOR = "System Inspector"
SYSTEM_PARAMETERS = "System Parameters"
Solution
You might have a kv file with a name, main.kv
With KivyMD installed on my machine, and some minor changes, the KivyMD App ran fine.
Example
app.py
# app.py
# -*- coding: utf-8 -*-
import os
from kivy.app import App
from kivy.lang import Builder
from kivymd.list import BaseListItem
from kivymd.material_resources import DEVICE_TYPE
from kivymd.navigationdrawer import MDNavigationDrawer, NavigationDrawerHeaderBase
from kivymd.theming import ThemeManager
# User defined imports
from kivy.core.window import Window
# Window.fullscreen = "auto"
class HackedDemoNavDrawer(MDNavigationDrawer):
# DO NOT USE
def add_widget(self, widget, index=0):
if issubclass(widget.__class__, BaseListItem):
self._list.add_widget(widget, index)
if len(self._list.children) == 1:
widget._active = True
self.active_item = widget
# widget.bind(on_release=lambda x: self.panel.toggle_state())
widget.bind(on_release=lambda x: x._set_active(True, list=self))
elif issubclass(widget.__class__, NavigationDrawerHeaderBase):
self._header_container.add_widget(widget)
else:
super(MDNavigationDrawer, self).add_widget(widget, index)
class MainApp(App):
theme_cls = ThemeManager()
title = "Application"
def build(self):
main_widget = Builder.load_file(
os.path.join(os.path.dirname(__file__), "./app.kv")
)
# self.theme_cls.theme_style = 'Dark'
main_widget.ids.text_field_error.bind(
on_text_validate=self.set_error_message,
on_focus=self.set_error_message)
self.bottom_navigation_remove_mobile(main_widget)
return main_widget
def bottom_navigation_remove_mobile(self, widget):
# Removes some items from bottom-navigation demo when on mobile
if DEVICE_TYPE == 'mobile':
widget.ids.bottom_navigation_demo.remove_widget(widget.ids.bottom_navigation_desktop_2)
if DEVICE_TYPE == 'mobile' or DEVICE_TYPE == 'tablet':
widget.ids.bottom_navigation_demo.remove_widget(widget.ids.bottom_navigation_desktop_1)
def set_error_message(self, *args):
if len(self.root.ids.text_field_error.text) == 2:
self.root.ids.text_field_error.error = True
else:
self.root.ids.text_field_error.error = False
def on_pause(self):
return True
def on_stop(self):
pass
if __name__ == '__main__':
MainApp().run()
labels.py
# labels.py
APPLICATION_NAME = "Application"
NAVIGATION = "Navigation"
DASHBOARD = "Dashboard"
SYSTEM_INSPECTOR = "System Inspector"
SYSTEM_PARAMETERS = "System Parameters"
app.kv
# app.kv
#:kivy 1.11.0
#:import Toolbar kivymd.toolbar.Toolbar
#:import MDNavigationDrawer kivymd.navigationdrawer.MDNavigationDrawer
#:import NavigationLayout kivymd.navigationdrawer.NavigationLayout
#:import NavigationDrawerDivider kivymd.navigationdrawer.NavigationDrawerDivider
#:import NavigationDrawerToolbar kivymd.navigationdrawer.NavigationDrawerToolbar
#:import NavigationDrawerSubheader kivymd.navigationdrawer.NavigationDrawerSubheader
#:import MDCheckbox kivymd.selectioncontrols.MDCheckbox
#:import MDSwitch kivymd.selectioncontrols.MDSwitch
#:import MDTextField kivymd.textfields.MDTextField
#:import MDThemePicker kivymd.theme_picker.MDThemePicker
#:import labels labels
NavigationLayout:
id: nav_layout
MDNavigationDrawer:
id: nav_drawer
NavigationDrawerToolbar:
title: labels.NAVIGATION
NavigationDrawerIconButton:
icon: 'checkbox-blank-circle'
text: labels.DASHBOARD
on_release: app.root.ids.scr_mngr.current = 'dashboard'
NavigationDrawerIconButton:
icon: 'checkbox-blank-circle'
text: labels.SYSTEM_INSPECTOR
on_release: app.root.ids.scr_mngr.current = 'system_inspector'
NavigationDrawerIconButton:
icon: 'checkbox-blank-circle'
text: labels.SYSTEM_PARAMETERS
on_release: app.root.ids.scr_mngr.current = 'system_parameters'
BoxLayout:
orientation: 'vertical'
halign: "center"
Toolbar:
id: toolbar
title: labels.APPLICATION_NAME
md_bg_color: app.theme_cls.primary_color
background_palette: 'Primary'
background_hue: '500'
left_action_items: [['menu', lambda x: app.root.toggle_nav_drawer()]]
#right_action_items: [['dots-vertical', lambda x: app.root.toggle_nav_drawer()]]
ScreenManager:
id: scr_mngr
Screen:
name: 'dashboard'
MDLabel:
font_style: 'Body1'
theme_text_color: 'Primary'
text: "This is the dashboard!"
size_hint_x:None
width: '250dp'
halign: "center"
pos_hint: {"center_x": 0.50, "center_y": 0.75}
MDCheckbox:
id: grp_chkbox_1
group: 'test'
size_hint: None, None
size: dp(48), dp(48)
pos_hint: {'center_x': 0.25, 'center_y': 0.5}
MDCheckbox:
id: grp_chkbox_2
group: 'test'
size_hint: None, None
size: dp(48), dp(48)
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
MDSwitch:
size_hint: None, None
size: dp(36), dp(48)
pos_hint: {'center_x': 0.75, 'center_y': 0.5}
_active: False
Screen:
name: 'system_inspector'
MDLabel:
font_style: 'Body1'
theme_text_color: 'Primary'
text: "This is the system_inspector page!"
size_hint_x:None
width: '250dp'
halign: "center"
pos_hint: {"center_x": 0.50, "center_y": 0.75}
MDCheckbox:
id: grp_chkbox_1
group: 'test'
size_hint: None, None
size: dp(48), dp(48)
pos_hint: {'center_x': 0.25, 'center_y': 0.5}
MDCheckbox:
id: grp_chkbox_2
group: 'test'
size_hint: None, None
size: dp(48), dp(48)
pos_hint: {'center_x': 0.5, 'center_y': 0.5}
MDSwitch:
size_hint: None, None
size: dp(36), dp(48)
pos_hint: {'center_x': 0.75, 'center_y': 0.5}
_active: False
Screen:
name: 'system_parameters'
BoxLayout:
orientation: "horizontal"
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
padding: dp(48)
spacing: 10
MDTextField:
hint_text: "No helper text"
input_filter: "float"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
input_filter: "int"
MDTextField:
hint_text: "No helper text"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
padding: dp(48)
spacing: 10
MDTextField:
hint_text: "No helper text"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
MDTextField:
hint_text: "No helper text"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
Screen:
name: 'textfields'
ScrollView:
BoxLayout:
orientation: 'vertical'
size_hint_y: None
height: self.minimum_height
padding: dp(48)
spacing: 10
MDTextField:
hint_text: "No helper text"
MDTextField:
hint_text: "Helper text on focus"
helper_text: "This will disappear when you click off"
helper_text_mode: "on_focus"
MDTextField:
hint_text: "Persistent helper text"
helper_text: "Text is always here"
helper_text_mode: "persistent"
MDTextField:
id: text_field_error
hint_text: "Helper text on error (Hit Enter with two characters here)"
helper_text: "Two is my least favorite number"
helper_text_mode: "on_error"
MDTextField:
hint_text: "Max text length = 10"
max_text_length: 10
MDTextField:
hint_text: "required = True"
required: True
helper_text_mode: "on_error"
MDTextField:
multiline: True
hint_text: "Multi-line text"
helper_text: "Messages are also supported here"
helper_text_mode: "persistent"
MDTextField:
hint_text: "color_mode = \'accent\'"
color_mode: 'accent'
MDTextField:
hint_text: "color_mode = \'custom\'"
color_mode: 'custom'
helper_text_mode: "on_focus"
helper_text: "Color is defined by \'line_color_focus\' property"
line_color_focus: self.theme_cls.opposite_bg_normal # This is the color used by the textfield
MDTextField:
hint_text: "disabled = True"
disabled: True
Screen:
name: 'nav_drawer'
HackedDemoNavDrawer:
# NavigationDrawerToolbar:
# title: "Navigation Drawer Widgets"
NavigationDrawerIconButton:
icon: 'checkbox-blank-circle'
text: "Badge text ---->"
badge_text: "99+"
NavigationDrawerIconButton:
active_color_type: 'accent'
text: "Accent active color"
NavigationDrawerIconButton:
active_color_type: 'custom'
text: "Custom active color"
active_color: [1, 0, 1, 1]
NavigationDrawerIconButton:
use_active: False
text: "Use active = False"
NavigationDrawerIconButton:
text: "Different icon"
icon: 'alarm'
NavigationDrawerDivider:
NavigationDrawerSubheader:
text: "NavigationDrawerSubheader"
NavigationDrawerIconButton:
text: "NavigationDrawerDivider \/"
NavigationDrawerDivider:
Output