Develop Reference

How to center GridLayout in kivymd?

I have certain news that are filled in first in MD3Card and then lined up in a tabular view in GridLayout with scrolling, but no matter how I tried, it didn't work out to do it all in the center and not on the left edge as in the photo.
Kivymd style:
VK = '''
<Tab>
ScrollView:
md_bg_color: "#f8f8f8"
bar_width: 0
GridLayout:
id: tab_box
padding: "5dp"
cols: 3
spacing: 10
size_hint_y: None
height: self.minimum_height
<MD3Card>
size_hint: None, None
size: "200dp", "230dp"
md_bg_color: "green"
pos_hint: {"center_x": .5, "center_y": .5}
MDBoxLayout:
orientation: "vertical"
FitImage:
source: root.card_image
radius: 6
size_hint_y: 2
MDBoxLayout:
padding: "10dp"
MDLabel:
text: root.card_text
pos_hint: {"center_x": .5, "center_y": .5}
color: "black"
MyBL:
orientation: "vertical"
MDTopAppBar:
title: root.tb_title_text
md_bg_color: "black"
MDBottomNavigation:
panel_color: "black"
text_color_normal: "#999999"
text_color_active: "#ededed"
MDBottomNavigationItem:
name: 'screen 1'
text: 'News'
icon: 'gmail'
badge_icon: "numeric-1"
on_tab_press: root.nb_1()
MDTabs:
id: tabs
background_color: "black"
on_tab_switch: app.on_tab_switch(*args)
MDBottomNavigationItem:
name: 'screen 2'
text: 'TV'
icon: 'twitter'
on_tab_press: root.nb_2()
MDBottomNavigationItem:
name: 'screen 3'
text: 'Radio'
icon: 'linkedin'
on_tab_press: root.nb_3()
'''
Main code:
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.properties import StringProperty, ObjectProperty
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.floatlayout import MDFloatLayout
from kivymd.uix.tab import MDTabsBase
from kivymd.uix.card import MDCard
class Tab(MDFloatLayout, MDTabsBase):
'''Class implementing content for a tab.'''
class MD3Card(MDCard):
'''Implements a material design v3 card.'''
card_image = StringProperty()
card_text = StringProperty()
class MyBL(MDBoxLayout):
nb_label_text_1 = StringProperty("News")
nb_label_text_2 = StringProperty("TV")
nb_label_text_3 = StringProperty("Radio")
tb_title_text = StringProperty("News")
text = StringProperty()
def nb_1(self):
self.nb_label_text_1 = "News"
self.tb_title_text = "News"
def nb_2(self):
self.nb_label_text_2 = "TV"
self.tb_title_text = "TV"
def nb_3(self):
self.nb_label_text_3 = "Radio"
self.tb_title_text = "Radio"
class Test(MDApp):
def build(self):
return Builder.load_string(VK)
def on_start(self):
categories = ["main thing","society","economy","health","sports","housing and communal services","politics","culture","science and education",
"world news","opinions","they need help","results of the week","special report","national projects","incidents"]
print(categories)
for categorie in categories:
self.root.ids.tabs.add_widget(
Tab(
title=categorie
)
)
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;
'''
# if tab_text == "главное":
if tab_text == "main thing":
instance_tab.ids.tab_box.clear_widgets()
print(tab_text)
newss = {"news1":"2.jpg", "news2":"2.jpg", "news3":"5.jpg", "news4":"2.jpg", "news5":"5.jpg", "news6":"5.jpg"}
for news in newss.keys():
instance_tab.ids.tab_box.add_widget(
MD3Card(
card_image=newss[news],
card_text=news,
)
)
Test().run()
Is there any other option as a tip for changing the number of cells in a row, let's say if the screen is already the same, not 3 cells, but two, and the rest already goes below.

Code:
<Tab>
ScrollView:
md_bg_color: "#f8f8f8"
bar_width: 0
GridLayout:
id: tab_box
padding: "5dp"
cols: 3
spacing: 10
size_hint_y: None
height: self.minimum_height
Replace with:
<Tab>
ScrollView:
MDBoxLayout:
orientation: "vertical"
adaptive_height: True
MDBoxLayout:
pos_hint: {'center_x': .5}
orientation: "vertical"
adaptive_height: True
adaptive_width: True
GridLayout:
id: tab_box
padding: "5dp"
cols: 3
spacing: 10
size_hint: None, None
size: self.minimum_size
or:
<Tab>
ScrollView:
MDBoxLayout:
orientation: "vertical"
adaptive_height: True
MDBoxLayout:
pos_hint: {'center_x': .5}
orientation: "vertical"
adaptive_height: True
GridLayout:
id: tab_box
padding: "5dp"
cols: 3
spacing: 10
size_hint: None, None
size: self.minimum_size
pos_hint: {'center_x': 0.5, 'center_y': 0.5}

How to add more than one layout in a single screen in kivymd

I am trying to add a boxlayout to a screen with a boxlayout already, but the contents of the second boxlayout keeps overlaying the contents of the first layout.
I don't think it's my indentation, is there a code I am missing, or anything.
I want the content of the second boxlayout to come last of course. I will really appreciate any help, Thanks in Advance.
here's my code:
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.core.window import Window
Window.size = (300, 530)
KV = """
MDScreen:
MDBoxLayout:
orientation: 'vertical'
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
padding: '10dp', '15dp'
spacing: '15dp'
MDCard:
orientation: 'vertical'
size_hint: 1, None
height: label1.height
# size: 280, 200
MDLabel:
id: label1
markup: True
padding: [15, 1]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:
'''
[size=25][b]Ford[/b][/size]
[b][i]“Make every detail perfect and limit the number of details to perfect.[/b][/i]”
– Jack Dorsey\n
'''
MDCard:
orientation: 'vertical'
size_hint: 1, None
# size: 280, 200
height: label2.height
MDLabel:
id: label2
markup: True
padding: [15, 5]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:
'''
[size=25][b]Ford[/b][/size]
[b][i]“Make every detail perfect and limit the number of details to perfect.[/b][/i]”
– Jack Dorsey\n
'''
MDCard:
orientation: 'vertical'
size_hint: 1, None
# size: 280, 200
height: label2.height
MDLabel:
id: label2
markup: True
padding: [15, 5]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:
'''
[size=25][b]Ford[/b][/size]
[b][i]“Make every detail perfect and limit the number of details to perfect.[/b][/i]”
– Jack Dorsey\n
'''
MDBoxLayout:
orientation: 'vertical'
ScrollView:
MDGridLayout:
cols: 9
spacing: '10dp'
padding: ['10dp', '10dp']
MDCard:
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
caption: 'Hello dear'
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
MDCard:
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
caption: 'Hello dear'
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
MDCard:
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
caption: 'Hello dear'
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: "C:/Users/HP USER/Downloads/bella_baron.jpg"
"""
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()

From Kivy docs:
The class RelativeLayout behaves just like the regular
FloatLayout except that its child widgets are positioned
relative to the layout.
You have to put everything inside a BoxLayout to override the default RelativeLayout behaviour of MDScreen:
from kivy.lang import Builder
from kivymd.app import MDApp
from kivy.core.window import Window
Window.size = (300, 530)
KV = """
<MyImageCard#MDCard>
source: ''
caption:''
ripple_behavior: True
orientation: 'vertical'
size_hint: None, None
size: "250dp", "180dp"
elevation: 15
radius: 15
padding: "8dp"
MDLabel:
text: root.caption
theme_text_color: "Secondary"
adaptive_height: True
MDSeparator:
height: "1dp"
Image:
allow_stretch: True
keep_ratio: False
size_hint_y: 1
source: root.source
<MyTextCard#MDCard>:
text:""
orientation: 'vertical'
size_hint: 1, None
height: child_label.height
MDLabel:
id: child_label
markup: True
padding: [15, 1]
size_hint_y: None
height: self.texture_size[1] + 2*self.padding[1]
text:root.text
MDScreen:
image: "C:/Users/HP USER/Downloads/bella_baron.jpg"
text:'[size=25][b]Ford[/b][/size][b][i]\\n"Make every detail perfect and limit the number of details to perfect."[/b][/i] \\n– Jack Dorsey'
MDBoxLayout:
orientation: 'vertical'
size_hint: 1, 1
pos_hint:{"center_x":.5,"center_y":.5}
ScrollView:
MDGridLayout:
cols: 1
adaptive_height: True
padding: '10dp', '15dp'
spacing: '15dp'
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MyTextCard:
text:root.text
MDBoxLayout:
orientation: 'vertical'
size_hint: 1, None
height: 400
ScrollView:
MDGridLayout:
cols: 3
adaptive_height: True
adaptive_width: True
spacing: '10dp'
padding: ['10dp', '10dp']
MyImageCard:
source: root.image
caption: 'Hello dear'
MyImageCard:
source: root.image
caption: 'Lovely'
MyImageCard:
source: root.image
caption: 'See you'
MyImageCard:
source: root.image
caption: 'Later'
MyImageCard:
source: root.image
caption: 'Forever'
MyImageCard:
source: root.image
caption: 'Good Bye'
"""
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
Example().run()
Also you were missing an indentation level after the second Scrollview, but that was not the source of the problem :)

You can use pos_hint and size_hint to get what I think you want. Start your kv with:
MDScreen:
MDBoxLayout:
size_hint: 1, 0.5 # use half the available height of the MDScreen
pos_hint: {'top':1} # position at the top of the MDSCreen
and for the second MDBoxLayout add similar code:
MDBoxLayout:
size_hint: 1, 0.5 # use half the available height of the MDScreen
pos_hint: {'y':0} # position at the bottom of the MDSCreen

Python kivy update label text in different screens

I'm working on a kivy project. I have tested the kivymd navigation layout. I wonder how can I update the label in screen 1 and screen 2. eg, count from 1 to 100 when start button is pressed.
I have searched online about kivy update label like this:
update label
but the in kv string the screen is in "< >", while mine is "Screen:", and I have tried to create a function called Screen() but it is not wokring.
Can anyone please explain to me what does "< >" mean and how can I dynamically update the label in the kivymd navigation layout? thank you very much
code is here:
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ObjectProperty
from kivymd.app import MDApp
KV = '''
<ContentNavigationDrawer>:
<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: "KivyMD library"
font_style: "Button"
size_hint_y: None
height: self.texture_size[1]
MDLabel:
text: "kivydevelopment#gmail.com"
font_style: "Caption"
size_hint_y: None
height: self.texture_size[1]
ScrollView:
MDList:
OneLineListItem:
text: "Screen 1"
on_press:
root.nav_drawer.set_state("close")
root.screen_manager.current = "scr 1"
OneLineListItem:
text: "Screen 2"
on_press:
root.nav_drawer.set_state("close")
root.screen_manager.current = "scr 2"
Screen:
MDToolbar:
id: toolbar
pos_hint: {"top": 1}
elevation: 10
title: "MDNavigationDrawer"
left_action_items: [["menu", lambda x: nav_drawer.set_state("open")]]
NavigationLayout:
x: toolbar.height
ScreenManager:
id: screen_manager
Screen:
name: "scr 1"
MDLabel:
text: "Screen 1"
halign: "center"
Screen:
name: "scr 2"
MDLabel:
text: "Screen 2"
halign: "center"
MDNavigationDrawer:
id: nav_drawer
ContentNavigationDrawer:
screen_manager: screen_manager
nav_drawer: nav_drawer
'''
class ContentNavigationDrawer(BoxLayout):
screen_manager = ObjectProperty()
nav_drawer = ObjectProperty()
class TestNavigationDrawer(MDApp):
def build(self):
return Builder.load_string(KV)
TestNavigationDrawer().run()

You can try with app.root.get_screen('scr1').funct() and make a function to change what you want

Kivy Scrollview: AttributeError: 'NoneType' object has no attribute 'bind'

Good Morning,
I'm new in this website but I constantly control topics that help me coding. I just started to learn coding and I'm new on python that i think it's one of the best.
By the way: I'm working on Kivy for build an app formed by cards that user can collect and consult. I built the cards (with MDCards) but the screen is blocked and if I add more than 5 cards they're invisible (out of screen). I'm trying to add a scrollview on the GridLayout in KV. Following some topic i found this way.
from kivy.properties import ObjectProperty
from kivymd.app import MDApp
from kivy.lang import Builder
from kivy.uix.scrollview import ScrollView
from kivy.uix.floatlayout import FloatLayout
from kivy.core.window import Window
from kivy.uix.gridlayout import GridLayout
from kivy.app import runTouchApp
from kivy.uix.button import Button
KV = """
Screen:
Controller:
layout_content: layout_content
BoxLayout:
id: bl
orientation: 'vertical'
padding: 10, 10
row_default_height: '48dp'
row_force_default: True
spacing: 10, 10
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
MDCard:
id: tel1
orientation: "vertical"
padding: "8dp"
size_hint: None, None
size: "180dp", "280dp"
pos_hint: {"center_x": 0.5, "center_y": 0.5}
MDLabel:
text: "Tele 1"
theme_text_color: "Secondary"
size_hint_y: None
height: self.texture_size[1]
MDSeparator:
height: "5dp"
width: "5dp"
MDLabel:
text: "Descrizione del primo"
MDCard:
id: tel2
orientation: "vertical"
padding: "8dp"
size_hint: None, None
size: "180dp", "280dp"
pos_hint: {"center_x": 0.5, "center_y": 0.5}
MDLabel:
text: "Tele 2"
theme_text_color: "Secondary"
size_hint_y: None
height: self.texture_size[1]
MDSeparator:
height: "5dp"
width: "5dp"
MDLabel:
text: "Descrizione del secondo"
MDCard:
id: tel2
orientation: "vertical"
padding: "8dp"
size_hint: None, None
size: "180dp", "280dp"
pos_hint: {"center_x": 0.5, "center_y": 0.5}
MDLabel:
text: "Tele 3"
theme_text_color: "Secondary"
size_hint_y: None
height: self.texture_size[1]
MDSeparator:
height: "5dp"
width: "5dp"
MDLabel:
text: "Descrizione del terzo"
MDCard:
id:tel4
orientation: "vertical"
padding: "8dp"
size_hint: None, None
size: "180dp", "280dp"
pos_hint: {"center_x": 0.5, "center_y": 0.5}
MDLabel:
text: "Telefilm 4"
theme_text_color: "Secondary"
size_hint_y: None
height: self.texture_size[1]
MDSeparator:
height: "5dp"
width: "5dp"
MDLabel:
text: "Descrizione del quarto"
MDCard:
id:tel5
orientation: "vertical"
padding: "8dp"
size_hint: None, None
size: "180dp", "280dp"
pos_hint: {"center_x": 0.5, "center_y": 0.5}
MDLabel:
text: "Tele 5"
theme_text_color: "Secondary"
size_hint_y: None
height: self.texture_size[1]
MDSeparator:
height: "5dp"
width: "5dp"
MDLabel:
text: "Descrizione del quinto"
"""
class Controller(FloatLayout):
layout_content = ObjectProperty(None)
def __init__(self, **kwargs):
super(Controller, self).__init__(**kwargs)
self.layout_content.bind(minimum_height=self.layout_content.setter('height'))
class MainApp(MDApp):
def build(self):
self.title = "LukeFlix"
self.theme_cls.theme_style = "Light"
self.theme_cls.primary_palette = "Red"
return Builder.load_string(KV)
MainApp().run()
But I get this Error:
Traceback (most recent call last):
File "C:/Users/User/PycharmProjects/pythonProject3APP/main.py", line 140, in <module>
MainApp().run()
File "C:\Users\User\PycharmProjects\pythonProject3APP\venv\lib\site-packages\kivy\app.py", line 949, in run
self._run_prepare()
File "C:\Users\User\PycharmProjects\pythonProject3APP\venv\lib\site-packages\kivy\app.py", line 919, in _run_prepare
root = self.build()
File "C:/Users/User/PycharmProjects/pythonProject3APP/main.py", line 132, in build
return Builder.load_string(KV)
File "C:\Users\User\PycharmProjects\pythonProject3APP\venv\lib\site-packages\kivy\lang\builder.py", line 408, in load_string
self._apply_rule(
File "C:\Users\User\PycharmProjects\pythonProject3APP\venv\lib\site-packages\kivy\lang\builder.py", line 659, in _apply_rule
child = cls(__no_builder=True)
File "C:/Users/User/PycharmProjects/pythonProject3APP/main.py", line 125, in __init__
self.layout_content.bind(minimum_height=self.layout_content.setter('height'))
AttributeError: 'NoneType' object has no attribute 'bind'
Process finished with exit code 1
How can I fix it?

The error is caused by the __init__() method of the Controller class. At that point, the layout_content property has not yet been assigned. You can eliminate that __init__() method by redefining Controller like this:
class Controller(FloatLayout):
pass
And then accomplish the same desired result by modifying the ScrollView section of your kv:
ScrollView:
# size: self.size # this has no effect
GridLayout:
id: layout_content
size_hint_y: None
cols: 1
# row_default_height: '20dp'
# row_force_default: True
height: self.minimum_height
spacing: 0, 0
padding: 0, 0
Note the height: self.minimum_height line, which does what your __init__() method was trying to do. Also, the row defaults were forcing the rows in the GridLayout to a too small height.

Border with Kivy/KivyMD

I am looking to add a border to the main screen of my application but I'm not sure how.
I tried to take some tips from this question:
Kivy-how can i make my canvas height smaller than the parent height
But I can't seem to figure it out.
The issue is that I am also using a KivyMD's Navigation Drawer, I would like the border be separate from the top bar, enclosing everything below the bar. Please let me know if I'm not being clear.
Here is some sample code that replicates my setup.
Perhaps I could add some random rectangles to act as a border?
EDIT:
Okay almost there, I got the 'border' but I now need the size_hint added in the AnchorLayout to ignore the top portion of the screen where the menu bar is. Here is the updated code.
from kivy.app import App
from kivy.lang import Builder
from kivy.uix.boxlayout import BoxLayout
from kivymd.app import MDApp
kv = '''
#:import hex kivy.utils.get_color_from_hex
NavigationLayout:
canvas.before:
Color:
rgb: hex('#C0C0C0')
Rectangle:
size: self.size
pos: self.pos
ScreenManager:
id: screen_manager
Screen:
name: "home_screen"
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: 'Name of the App!'
elevation: 10
Widget:
FloatLayout:
orientation: 'vertical'
AnchorLayout:
anchor_x: 'center'
anchor_y: 'center'
Widget:
canvas.before:
Color:
rgb: hex('#F5F5F5')
Rectangle:
size: self.size
pos: self.pos
size_hint: .95, .95
MDLabel:
text: "Some More Text"
halign: "center"
color: 0,0,0,1
pos_hint: {"center_x": .5, "center_y": .75}
size_hint: .7, .1
MDNavigationDrawer:
id: nav_drawer
ContentNavigationDrawer:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
AnchorLayout:
anchor_x: "left"
size_hint_y: None
height: avatar.height
Image:
id: avatar
source: "image.jpg"
MDLabel:
text: "Text here"
font_style: "Button"
size_hint_y: None
height: self.texture_size[1]
'''
class ContentNavigationDrawer(BoxLayout):
pass
class MyApp(MDApp):
def build(self):
return Builder.load_string(kv)
MyApp().run()

I think you will get what you want if you indent the FloatLayout so that it is in the BoxLayout. Like this:
#:import hex kivy.utils.get_color_from_hex
NavigationLayout:
canvas.before:
Color:
rgb: hex('#C0C0C0')
Rectangle:
size: self.size
pos: self.pos
ScreenManager:
id: screen_manager
Screen:
name: "home_screen"
BoxLayout:
orientation: 'vertical'
MDToolbar:
title: 'Name of the App!'
elevation: 10
# Widget: # not needed
FloatLayout:
orientation: 'vertical'
AnchorLayout:
anchor_x: 'center'
anchor_y: 'center'
Widget:
canvas.before:
Color:
rgb: hex('#F5F5F5')
Rectangle:
size: self.size
pos: self.pos
size_hint: .95, .95
MDLabel:
text: "Some More Text"
halign: "center"
color: 0,0,0,1
pos_hint: {"center_x": .5, "center_y": .75}
size_hint: .7, .1
MDNavigationDrawer:
id: nav_drawer
ContentNavigationDrawer:
orientation: "vertical"
padding: "8dp"
spacing: "8dp"
AnchorLayout:
anchor_x: "left"
size_hint_y: None
height: avatar.height
Image:
id: avatar
# source: "image.jpg"
source: 'tester.png'
MDLabel:
text: "Text here"
font_style: "Button"
size_hint_y: None
height: self.texture_size[1]