Unknown class <DrawerClickableItem>" - kivy

i want to add items to NavigationDrawer but i get this "Unknown class " errors instead.
i tried defining a Class "DrawerClickableItem" but it wouldn't work instead i get errors. i have tried several options that seem to work but "DrawerClickableItem" always gives an error. the codes are below.
python code
from kivymd.app import MDApp
from kivy.core.window import Window
from kivy.lang.builder import Builder
from kivymd.uix.screenmanager import ScreenManager
from kivy.uix.boxlayout import BoxLayout
Window.size = [320, 600]
class ShopApp(MDApp):
def build(self):
global screen_manager
screen_manager = ScreenManager()
screen_manager.add_widget(Builder.load_file('home.kv'))
screen_manager.add_widget(Builder.load_file('Sign_up.kv'))
screen_manager.add_widget(Builder.load_file('login.kv'))
return screen_manager
ShopApp().run()
kv file
MDScreen:
name: 'home'
md_bg_color: 1, 1, 1, 1
background_normal: ''
MDNavigationLayout:
ScreenManager:
Screen:
BoxLayout:
orientation: 'vertical'
MDTopAppBar:
md_bg_color: [0, 0, 0, 1]
elevation: 2.5
title: "Home"
left_action_items: [['menu', lambda x: nav_drawer.set_state("open")]]
Widget:
MDNavigationDrawer:
id: nav_drawer
size_hint: .3, .9
radius: (0, 30, 30, 0)
md_bg_color: 0, 0, 0, 1
pos_hint: {'y': .1}
scrim_color: 0, 0, 0, 0
MDNavigationDrawerMenu:
MDNavigationDrawerHeader:
title: "Header title"
title_color: "#4a4939"
text: "Header text"
spacing: "4dp"
padding: "12dp", 0, 0, "56dp"
MDNavigationDrawerLabel:
text: "Mail"
DrawerClickableItem:
icon: "gmail"
right_text: "+99"
text_right_color: "#4a4939"
text: "Inbox"
DrawerClickableItem:
icon: "send"
text: "Outbox"
MDNavigationDrawerDivider:
MDNavigationDrawerLabel:
text: "Labels"
DrawerLabelItem:
icon: "information-outline"

the new class needs to be defined and inherit one that exists.
this can be done in a .kv file that you load with Builder.loadfile("filename.kv") or put this code in a .kv file that you already have. properties can be defined such as the size hint that I placed as an example.
<DrawerClickableItem#MDNavigationDrawer>:
size_hint_x: 5

Related

Based on the docs why can't I use MDSmartTile?

I'm using kivymd and in this code I get this error:
raise FactoryException('Unknown class <%s>' % name) kivy.factory.FactoryException: Unknown class
I used MDSmartTile: inside of the MDBottomNavigationItem:.
This is the code:
from kivy.lang import Builder
from kivymd.app import MDApp
KV = '''
Screen:
MDBoxLayout:
orientation:"vertical"
MDToolbar:
left_action_items:[["menu",lambda x:None,]]
right_action_items:[["bell-ring-outline", lambda x: None,]]
md_bg_color: 255/255, 255/255,255/255, 1
specific_text_color: 0, 0, 0, 1
MDBottomNavigation:
panel_color:1,1,1,1
text_color_active:245/255,111/255,58/255,1
text_color_normal: 0, 0, 0, 1
MDBottomNavigationItem:
name: "s1"
icon:"wallet"
MDSmartTile:
radius: 24
box_radius: [0, 0, 24, 24]
box_color: 1, 1, 1, .2
source: "1.png"
pos_hint: {"center_x": .5, "center_y": .5}
size_hint: None, None
size: "320dp", "320dp"
MDBottomNavigationItem:
name: "s2"
icon:"chat"
MDBottomNavigationItem:
name: "s3"
icon:"youtube"
MDBottomNavigationItem:
name: "s4"
icon:"face"
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
Based on the docs why can't I use MDSmartTile?

Positioning a text field inside a toolbar in Kivy

I'm trying to put a textfield inside a toolbar with KivyMD, but the textfield is always directly against the right side of the window. I tried to adjust it with pos_hint, but none of the values I put for the x-coordinates moved it.
Screen:
canvas.before:
Rectangle:
pos: self.pos
size: self.size
source: 'assets/bg.png'
BoxLayout:
orientation: 'vertical'
MDToolbar:
id: toolbar
title: 'Placeholder'
elevation: 10
pos_hint: {"top": 1}
left_action_items: [['menu', lambda x: app.menu.open()]]
MDTextFieldRound:
id: textinput
icon_left: 'magnify'
pos_hint: {'x': 0.1 ,'center_y': 0.5, 'right': 0.3}
size_hint: {.6, .4}
text_color: 'white'
hint_text: 'Search'**strong text**
MDLabel:
text: 'Placeholder'
color: 'white'
halign: 'center'
Screenshot of toolbar
Any help is appreciated, thanks.
You can insert your widgets wherever you want, for this you can specify a position in the widget tree - add_widget(widget, index). I wrote a special get_widgets function for your solution, which goes through all the widgets in the class. In the example below, you can place the text field on the left, right, and center. Also examine the MDToolbar source code
from kivy.lang.builder import Builder
from kivy.metrics import dp
from kivy.clock import Clock
from kivy.weakproxy import WeakProxy
from kivymd.app import MDApp
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.textfield import MDTextField
KV = """
MDScreen:
MDBoxLayout:
orientation: 'vertical'
MDToolbar:
id: toolbar
title: 'Placeholder'
pos_hint: {"top": 1}
MDLabel:
text: 'Placeholder'
color: 'white'
halign: 'center'
"""
class TestApp(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.search_content = None
def build(self):
return Builder.load_string(KV)
def on_start(self):
Clock.schedule_once(lambda dt: self.add_search('left'))
#staticmethod
def get_widgets(root: WeakProxy, class_: str):
"""
:param root: root widget
:param class_: which subclass are we looking for
:return:
"""
widgets = []
for widget in root.walk():
if widget.__class__.__name__ == class_:
widgets.append(widget)
print(widget)
return widgets
def add_search(self, side: str):
"""
:param side: left/right/center
:return:
"""
box = self.get_widgets(self.root.ids.toolbar, 'MDBoxLayout')[0] # get root `MDBoxLayout`
if side == 'left':
index = 2
elif side == 'right':
index = 1
else:
index = 0
self.root.ids.toolbar.ids.label_title.size_hint = None, None
self.root.ids.toolbar.ids.label_title.opacity = 0
# NOTE: If you remove this `MDLabel`, you cant change `self.theme_cls.material_style`
# box.remove_widget(self.root.ids.toolbar.ids.label_title)
boxlayout = MDBoxLayout(padding=[dp(18), dp(0), dp(18), dp(18)])
self.search_content = MDTextField(icon_left='magnify',
mode='round',
color_mode="custom",
line_color_normal=(1, 0, 1, 1),
line_color_focus=(0, 0, 1, 1),
text_color_focus=self.theme_cls.text_color,
text_color_normal=self.theme_cls.text_color[0:3] + [0.7],
hint_text='Empty field',
)
boxlayout.add_widget(self.search_content)
box.add_widget(boxlayout, index)
TestApp().run()

Invalid indentation, must be a multiple of 8 spaces, rounded button kivy .kv file

so yeah I was learning kivy - "rounded buttons" and when I ran the tutorial's program ---------------
ERROR:
https://i.stack.imgur.com/rGhSa.png
python:
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder
from kivy.uix.textinput import TextInput
from kivy.uix.label import Label
from kivy.core.window import Window
Builder.load_file("my.kv")
class MyLayout(Widget,App):
def __init__(self,*args,**kwargs):
super(MyLayout, self).__init__(**kwargs)
class AwesomeApp(App):
def build(self):
Window.clearcolor = (1,1,1,1)
return MyLayout()
if __name__ == '__main__':
AwesomeApp().run()
.kv
<MyLayout>
BoxLayout:
orientation: "vertical"
size: root.width, root.height
padding: 50
spacing: 20
Button:
text: "Hello World!"
RoundedButton:
text: "Goodbye World!"
pos_hint: {'center_x': 0.5}
size_hint: (1, .3)
#background_color: (0/255,255/255,203/255,1)
#background_normal: ''
<RoundedButton#Button>
background_color: (0,0,0,0)
background_normal: ''
canvas.before:
Color:
rgba: (0/255,255/255,203/255,1)
RoundedRectangle:
size: self.size
pos: self.pos
radius: [58]
thanks,can anyone help, don't like these errors,
indentation error it seems like
You are not doing proper indentation you must use only one type of indentation in a file but you are using 8 spaces and 4 spaces both as indentation that is why error is coming.
Here,I have used 4 spaces as indentation in whole code that is why its working fine.
<MyLayout>
BoxLayout:
orientation: "vertical"
size: root.width, root.height
padding: 50
spacing: 20
Button:
text: "Hello World!"
RoundedButton:
text: "Goodbye World!"
pos_hint: {'center_x': 0.5}
size_hint: (1, .3)
#background_color: (0/255,255/255,203/255,1)
#background_normal: ''
<RoundedButton#Button>
background_color: (0,0,0,0)
background_normal: ''
canvas.before:
Color:
rgba: (0/255,255/255,203/255,1)
RoundedRectangle:
size: self.size
pos: self.pos
radius: [58]

how can i create a KivyMD card with adjustable height

I am trying to make a kivymd card which has an adjustable height but is not able to. I would like the card to adjust its height according to the items called in it. also, all the items called in it to feet in. am not sure if it's ok to use a card or just a boxlayout in this type of application
from kivy.uix.screenmanager import Screen
from kivymd.app import MDApp
#from kivymd.uix.button import MDCard
from kivymd.uix.card import MDCard,MDSeparator
from kivymd.uix.label import MDLabel
from kivymd.uix.list import TwoLineAvatarListItem,ImageLeftWidget
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
KV = '''
<Post_message>:
MDBoxLayout:
orientation: "vertical"
id: box_bottom
adaptive_height: True
padding: "20dp", "5dp", 0, 0
size_hint_y: None
spacing: "1dp"
MDLabel:
text:"Midrange and flagship."
size_hint_y: None
height: self.texture_size[1]
pos_hint: {"center_y": .5}
theme_text_color: "Primary"
<Post_profile>:
MDBoxLayout:
adaptive_height: True
padding:"-17dp", 0, 0, 0
TwoLineIconListItem:
text:f"[color=#00ACC1]Profile name[/color]"
markup: True
secondary_text: "Location"
height: dp(48)
divider: None
_txt_bot_pad: dp(5)
IconLeftWidget:
icon:'kivymd_logo.png'
<Post_bottom_bar>:
orientation: "horizontal"
adaptive_height: True
MDBoxLayout:
orientation: "horizontal"
adaptive_height: True
padding: "25dp", 0, 0, "15dp"
MDLabel:
text:f"[color=#00ACC1]2.jun.2020[/color]"
markup: True
size_hint_y: None
height: self.texture_size[1]
pos_hint: {"center_y": .5}
MDBoxLayout:
orientation: "horizontal"
adaptive_height: True
padding: "30dp", 0, 0, 0
MDIconButton:
icon: "heart-outline"
on_release:
#self.grow()
self.icon = "heart" if self.icon == "heart-outline" else "heart-outline"
MDIconButton:
icon: "message"
on_release:
#self.grow()
MDIconButton:
icon: "dots-vertical"
on_release:
#self.grow()
'''
class Post_bottom_bar(BoxLayout):
pass
class Post_profile(BoxLayout):
pass
class Post_message(BoxLayout):
pass
class MainApp(MDApp):
def build(self):
self.theme_cls.theme_style="Dark"
Builder.load_string(KV)
screen = Screen()
post_card = MDCard(
padding = [0, 0, 0, 0],
spacing = "5dp",
border_radius = 20,
radius = [15, 15, 15, 15],
orientation= "vertical",
size_hint= [1, None],
elevation=9,
)
post_card.add_widget(Post_profile())
post_card.add_widget(Post_message())
post_card.add_widget(Post_bottom_bar())
screen.add_widget(post_card)
return screen
MainApp().run()
am additional corrections and suggestions are welcomed

Kivy: how to update a label when a button is clicked

I use a button to retrieve the paths of some folders selected with the filechooser. When the button is clicked I would like to update the text of the label so that it dispays the selected paths.
In my Kv:
Button:
text:'OK'
on_press: root.selected(filechooser.path, filechooser.selection)
Label:
id: Lb_ListViewFolder
text: root.Lb_ListViewFolder_text
color: 0, 0, 0, 1
size_hint_x: .75
In .py:
class MyWidget(BoxLayout):
Lb_ListViewFolder_text = ObjectProperty("Text")
def selected(self, a, b):
global Lb_ListViewFolder_text
Lb_ListViewFolder_text = b
print(a,b)
This doesn't give me any error but the label text isn't changed.
I also tried self.ListViewFolder.text = b like recommended here but I get this error: MyWidget' object has no attribute 'Lb_ListViewFolder'.
I have seen this answer, but I have trouble applying in my code
I use python 3.6 and Kivy 1.9.2.dev0
In case, this is my entire code:
from kivy.properties import ObjectProperty
from kivy.core.window import Window
from kivy.event import EventDispatcher
from kivy.lang import Builder
root = Builder.load_string('''
<MyWidget>
id: BL_Main
orientation: "horizontal"
padding: 10
spacing: 10
BoxLayout:
id: BL_folder
orientation: "vertical"
Button:
id:ok
text:'OK'
background_color: 0,0,1,1
height: 5
size_hint: 0.1, 0.1
on_press: root.selected(filechooser.path, filechooser.selection)
BoxLayout:
orientation:"horizontal"
size_hint: None, 0.9
width:150
canvas.before:
Color:
rgb: .4,.5,.5
Rectangle:
pos: self.pos
size: self.size
## multiple select folder not possible with FileChooserListView
FileChooserIconView:
id: filechooser
pos:self.pos
multiselect: True
dirselect: True
Label:
id: Lb_ListViewFolder
text: root.Lb_ListViewFolder_text
color: 0, 0, 0, 1
size_hint_x: .75
''')
class MyWidget(BoxLayout):
Lb_ListViewFolder_text = ObjectProperty("Text")
def selected(self, a, b):
global Lb_ListViewFolder_text
Lb_ListViewFolder_text = b
print(a,b)
class MyApp(App):
def build(self):
Window.clearcolor = (1, 1, 1, 1)
return MyWidget()
MyApp().run()
You can use StringProperty here:
from kivy.app import App
from kivy.uix.filechooser import FileChooserListView
from kivy.uix.boxlayout import BoxLayout
from kivy.lang import Builder
from kivy.properties import StringProperty
Builder.load_string('''
<MyLayout>:
orientation: "vertical"
Label:
text: root.label_text
Button:
id:ok
text:'OK'
on_press: root.selected(filechooser.path, filechooser.selection)
FileChooserIconView:
id: filechooser
pos:self.pos
multiselect: True
dirselect: True
''')
class MyLayout(BoxLayout):
label_text = StringProperty("File name")
def selected(self, a, b):
self.label_text = b[0]
class MyApp(App):
def build(self):
return MyLayout()
MyApp().run()
Or you can change it directly in kvlang:
<MyLayout>:
orientation: "vertical"
Label:
id: dirlabel
text: root.label_text
Button:
id:ok
text:'OK'
on_press: dirlabel.text = filechooser.selection[0]
FileChooserIconView:
id: filechooser
pos:self.pos
multiselect: True
dirselect: True

Resources