Develop Reference

I can't position my buttons in scrollview in kivy

Im creating a simple chat room and i want it to look like whatsapp and messager so I add ScrollView and inside the ScrollView I make a GridLayout class to be containers of upcoming message but when I add AnchorLayout to position the Button inside the GridLayout my widget are colliding and its get messy
See the 2 button that colliding
Here are my code in that part:
ScrollView:
size_hint: 1 , 0.8
scroll_distance: 0
BoxLayout:
id: messages
cols: 1
size_hint_y: None
height:self.minimum_height
spacing: dp(10)
orientation: "vertical"
# Display Date
Button:
text: root.now
align: "center"
size_hint: 1 , None
height: self.texture_size[1] + dp(15)
AnchorLayout:
anchor_x: "right"
size: test.size[0] , test.size[1] + dp(20)
Button:
id: test
text: root.now
align: "center"
size_hint: None , None
height: self.texture_size[1] + dp(15)
width: self.texture_size[0] + dp(15)

How do I add a rectangle graphic behind all my buttons and labels?

I would like to add a rounded rectangle behind each row of widgets containing 3 buttons and two labels all horizontally layout. Each group contents are added dynamically through the input_text and '+' button on the bottom. I have all the major parts working but I can't get the rounded rectangle graphic.
Here is what I've got so far:
I was hoping to create something like this:
Please let me know where I went wrong and how to fix it I'm pretty new in Kivy so I'm just learning.
Thanks.
class Trackers(Screen):
storage = {}
path = ''
def on_pre_enter(self):
self.path = App.get_running_app().user_data_dir + '/'
self.loadData()
for tracker, num in self.storage.items():
self.ids.track.add_widget(Tracker(text=tracker, number=num, data=self.storage))
def addWidget(self):
text_input = self.ids.text_input.text
num = '0'
if text_input not in self.storage.keys():
self.ids.track.add_widget(Tracker(text=text_input, number=num, data=self.storage))
self.storage[text_input] = '0'
self.ids.text_input.text = ''
self.saveData()
class Tracker(BoxLayout):
def __init__(self, text='', number='', data={}, **kwargs):
super().__init__(**kwargs)
self.ids.label.text = text
self.ids.count_add.text = number
class Pess(App):
def build(self):
Config.set('graphics', 'width', '600')
Config.set('graphics', 'height', '800')
from kivy.core.window import Window
Window.clearcolor = get_color_from_hex('#262829')
return ScreenGenerator()
##### --> .kv file
<Trackers>:
BoxLayout:
orientation: 'vertical'
ActionBar:
height: 45
size_hint_y: None
background_image: ''
background_color: rgba('#0B3242')
ActionView:
ActionPrevious:
title: '[b]TRACKERS[/b]'
font_size: 21
color: rgba('#AFB7BA')
markup: True
on_release: app.root.current = 'menu'
ActionButton:
text: 'SEND'
color: rgba('#AFB7BA')
on_release: root.send()
ScrollView:
BoxLayout:
id: track
orientation: 'vertical'
font_size: 15
size_hint_y: None
height: self.minimum_height
BoxLayout:
size_hint_y: None
height: 45
TextInput:
id: text_input
hint_text: 'Add Trackers'
multiline: False
Button:
text: '+'
size_hint_x: None
width: 60
on_release: root.addWidget()
background_color: rgba('#1D7332')
<Tracker>:
count_add: count_add
size_hint_y: None
height: 45
padding: 4
Button:
text: '[b]X[/b]'
markup: True
size_hint_x: None
width: 60
on_release: app.root.get_screen('track').delete_storage(root)
Label:
id: label
font_size: 20
Label:
id: count_add
font_size: 20
text: '0'
Button:
text: '[b]-[/b]'
markup: True
size_hint_x: None
width: 60
on_release: app.root.get_screen('track').subtract_num(root)
Button:
text: '[b]+[/b]'
markup: True
size_hint_x: None
width: 60
on_release: app.root.get_screen('track').add_num(root)

In your 'kv' file, you can add graphics to the Canvas of your Tracker like this:
<Tracker>:
count_add: count_add
size_hint_y: None
height: 45
padding: 20, 4, 20, 4 # to keep widgets a bit away from the sides
canvas.before: # use before to keep this under any widgets
Color:
rgba: 1, 0, 0, 1 # any color you want
Rectangle:
pos: self.pos[0] + self.height/2, self.pos[1]
size: self.size[0] - self.height, self.height
Ellipse:
pos: self.pos[0], self.pos[1]
size: self.height, self.height
Ellipse:
pos: self.pos[0] + self.width - self.height, self.pos[1]
size: self.height, self.height
You might want to add some spacing to your track id BoxLayout so that the Tracker widgets don't appear connected.
Here is the entire version of your code that I ran. There are a few lines commented out, since you did not provide all the code:
from kivy.config import Config
from kivy.app import App
from kivy.lang import Builder
from kivy.properties import get_color_from_hex
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.screenmanager import Screen, ScreenManager
class Trackers(Screen):
storage = {}
path = ''
def on_pre_enter(self):
self.path = App.get_running_app().user_data_dir + '/'
#self.loadData()
for tracker, num in self.storage.items():
self.ids.track.add_widget(Tracker(text=tracker, number=num, data=self.storage))
def addWidget(self):
text_input = self.ids.text_input.text
num = '0'
if text_input not in self.storage.keys():
self.ids.track.add_widget(Tracker(text=text_input, number=num, data=self.storage))
self.storage[text_input] = '0'
self.ids.text_input.text = ''
#self.saveData()
class Tracker(BoxLayout):
def __init__(self, text='', number='', data={}, **kwargs):
super().__init__(**kwargs)
self.ids.label.text = text
self.ids.count_add.text = number
Builder.load_string('''
<Trackers>:
BoxLayout:
orientation: 'vertical'
ActionBar:
height: 45
size_hint_y: None
background_image: ''
background_color: rgba('#0B3242')
ActionView:
ActionPrevious:
title: '[b]TRACKERS[/b]'
font_size: 21
color: rgba('#AFB7BA')
markup: True
on_release: app.root.current = 'menu'
ActionButton:
text: 'SEND'
color: rgba('#AFB7BA')
on_release: root.send()
ScrollView:
BoxLayout:
id: track
orientation: 'vertical'
spacing: 5
font_size: 15
size_hint_y: None
height: self.minimum_height
BoxLayout:
size_hint_y: None
height: 45
TextInput:
id: text_input
hint_text: 'Add Trackers'
multiline: False
Button:
text: '+'
size_hint_x: None
width: 60
on_release: root.addWidget()
background_color: rgba('#1D7332')
<Tracker>:
count_add: count_add
size_hint_y: None
height: 45
padding: 20, 4, 20, 4
canvas.before:
Color:
rgba: 1, 0, 0, 1
Rectangle:
pos: self.pos[0] + self.height/2, self.pos[1]
size: self.size[0] - self.height, self.height
Ellipse:
pos: self.pos[0], self.pos[1]
size: self.height, self.height
Ellipse:
pos: self.pos[0] + self.width - self.height, self.pos[1]
size: self.height, self.height
Button:
text: '[b]X[/b]'
markup: True
size_hint_x: None
width: 60
on_release: app.root.get_screen('track').delete_storage(root)
Label:
id: label
font_size: 20
Label:
id: count_add
font_size: 20
text: '0'
Button:
text: '[b]-[/b]'
markup: True
size_hint_x: None
width: 60
on_release: app.root.get_screen('track').subtract_num(root)
Button:
text: '[b]+[/b]'
markup: True
size_hint_x: None
width: 60
on_release: app.root.get_screen('track').add_num(root)
''')
class Pess(App):
def build(self):
Config.set('graphics', 'width', '600')
Config.set('graphics', 'height', '800')
from kivy.core.window import Window
Window.clearcolor = get_color_from_hex('#262829')
# Don't have `ScreenGenerator` so just set up `ScreenManager`
sm = ScreenManager()
sm.add_widget(Trackers(name='trackers'))
return sm
#return ScreenGenerator()
Pess().run()

Adding variable number of controls to DropDown - weakly-referenced object no longer exists

I have a dropdown with a list of the months in it. When the Month is selected, I'm trying to dynamically populate buttons in a second dropdown with the correct number of days. When I do so, I get:
ReferenceError: weakly-referenced object no longer exists
Here are my files for reference:
main.py:
from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
globIDs = {}
class appScreen(BoxLayout):
def dayDropPop(self, num):
globIDs['dayDropDown'].populate(num)
class ExtDropDown(BoxLayout):
heldValue = ''
def setID(self, key):
globIDs[key] = self
def changeValue(self, sentText, parent):
self.heldValue = sentText
parent.text = sentText
class PriorityDropDown(ExtDropDown):
pass
class MonthDropDown(ExtDropDown):
def __init__(self, **kwargs):
super(MonthDropDown, self).__init__(**kwargs)
self.setID('monthDropDown')
def monthSelect(self, month):
monthDay = {'Jan': 31, 'Feb': 29, 'Mar': 31, 'Apr': 30, 'May': 31, 'Jun': 30, 'Jul': 31, 'Aug': 31, 'Sep': 30,
'Oct': 31, 'Nov': 30, 'Dec': 31}
numOfDays = monthDay[month]
appScreen().dayDropPop(numOfDays)
def testingFurther(self):
print()
class DayDropDown(ExtDropDown):
def __init__(self, **kwargs):
super(DayDropDown, self).__init__(**kwargs)
self.setID('dayDropDown')
def populate(self, num):
for i in range(0, num):
newButt = Button(text=str(num + 1))
self.ids.drop.add_widget(newButt)
class schedulerApp(App):
def build(self):
return appScreen()
if __name__ == '__main__':
schedulerApp().run()
scheduler.kv:
<PriorityDropDown>:
Button:
id: ddRoot
text: 'Priority'
on_release: drop.open(ddRoot)
size_hint_y: None
height: root.height
DropDown:
id: drop
on_parent: self.dismiss()
on_select: root.changeValue(args[1], ddRoot)
Button:
text: 'Top'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'High'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Medium'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Low'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
<MonthDropDown>:
Button:
id: ddRoot
text: 'Month'
on_release: drop.open(ddRoot)
size_hint_y: None
height: root.height
DropDown:
id: drop
on_parent: self.dismiss()
on_select: root.monthSelect(args[1])
Button:
text: 'Jan'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Feb'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Mar'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Apr'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'May'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Jun'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Jul'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Aug'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Sep'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Oct'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Nov'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
Button:
text: 'Dec'
size_hint_y: None
height: root.height
on_release: drop.select(self.text)
<DayDropDown>:
height: root.height
Button:
id: ddRoot
text: 'Day'
on_release: drop.open(ddRoot)
size_hint_y: None
height: root.height
DropDown:
id: drop
on_parent: self.dismiss()
on_select: root.changeValue(args[1], ddRoot)
<appScreen>:
orientation: 'vertical'
Label:
size_hint_y: .1
text: 'Hello World'
GridLayout:
size_hint_y:.1
width: root.width
cols: 3
Button:
Button:
Button:
ScrollView:
canvas.before:
Color:
rgba: .3, .3, .3, 5
Rectangle:
pos: self.pos
size: self.size
GridLayout:
cols: 3
Label:
id: textReceiver
text: 'Words'
text_size: self.size
halign: 'left'
valign: 'top'
Label:
Label:
BoxLayout:
size_hint_y: .125
TextInput:
size_hint_x: .7
PriorityDropDown:
size_hint_x: .3
BoxLayout:
size_hint_y: .125
MonthDropDown:
size_hint_x: .35
DayDropDown:
id: 'dayDrop'
size_hint_y: 1
size_hint_x: .2
TextInput:
size_hint_x: .45
I think the issue stems from the controls in question being created in Kivy code, rather than in Python. What testing I've done leads me to believe that I'm referencing my DayDropDown widget incorrectly. However, I don't know how else I would do so. With that in mind, how would I go about referencing my DayDropDown using what I already have? If that isn't my issue, what else might be causing the ReferenceError to be thrown?
Edit:
Messed with my code a little bit. I created a new class "globAddable" with methods "getID" - a simple return self - and put setID in there instead. I then set my setID now assigns self.getID() to a variable, then uses that variable as the object to be added to the globObjects (formerly globIDs) dictionary.
I also created a new class for my DropDown object, called ExtDropArray, which lives in my DayDropDown. I moved the populate() method to this new class so that it can be called directly by the Dropdown, rather than its parent BoxLayout. I made the ExtDropArray and ExtDropDown inherit from globAddable to expose the setID (and implicitly getID) methods.
The net result of all this is exactly the same. I still don't see my day DropDown when clicking the button on DayDropDown, and after testing with different values on the MonthDropDown, again I get the 'ReferenceError: weakly-referenced object no longer exists' error. However, I am noticing that the offending line is actually the method that opens the dropdown (drop.open(ddRoot), which is called on line 114 of my .kv file). This still doesn't quite give me enough information to know which part of the process is causing the error, be it the adding of the buttons to the DropDown or simply the calling of the open method. Given this new information, is anyone able to deduce what needs to change?

Alright, I finally figured this one out.
My ReferenceError was not a result of my methods, but rather a fundamental misunderstanding on my part of the implementation of DropDown objects. The fix was simply
<DayDropDown>:
drop: drop.__self__
...
This took me one heck of a long time to find, but came in the form of this documentation. Seeing as no other posts mentioning these ReferenceErrors makes any mention to this document, I'm leaving it here for others to use in case they run into a similar issue.

An answer for the year 2020
The official documentation (Kv language Programming Guide) says to add 'strong' references such as id_name: id_name.__self__ in the KV code, but it is unclear where this is necessary. What's more, it did not solve the ReferenceError: weakly-referenced object no longer exists errors for me.
What did work is forcing Buildozer to use a specific version of hostpython3 by adding this to the requirements line of the buildozer.spec file:
python3==3.7.5, hostpython3==3.7.5
One more note: after adding the above to requirements, I went back and removed all my __self__ references and it still worked fine, so apparently these are no longer needed in Kivy KV language.
Credit for this goes to the beautiful answer from leo10011.

How can I avoid repetition in python/kivy?

I have been trying to make an app that have many functions associate to one buttons each. This way, if I have 70 buttons I have 70 different functions. I want to add, the respective value, when I click respective button, to a respective variable label (I am using numericproperty). As the change between this functions is only in this numeric value, I would like to make this in a more inteligent way than I did. Have anybody one suggestion of better way to do it without I have to repeat my code? Very thanks everybody, and part of my code is bellow.
.py
class SegundoScreen(Screen):
def __init__(self, **kwargs):
self.name = 'dois'
super(Screen,self).__init__(**kwargs)
def mucarela(self, *args):
screen4 = self.manager.get_screen('carrinho')
screen4.btn1 = BubbleButton(text="Muçarela", font_size='20dp', size_hint=(1,None), background_normal='1.png', background_down='2.png')
screen4.lb1 = Label(text="25,00", font_size='20dp', size_hint=(1,None))
screen4.ids.lb5.value += 25
screen4.ids.grid.add_widget(screen4.btn1)
screen4.ids.grid.add_widget(screen4.lb1)
def catupiry(self, *args):
screen4 = self.manager.get_screen('carrinho')
screen4.btn2 = BubbleButton(text="Catupiry",font_size='20dp', size_hint=(1,None), background_normal='2.png', background_down='1.png')
screen4.lb2 = Label(text="25,00",font_size='20dp', size_hint=(1,None))
screen4.ids.lb5.value += 25
screen4.ids.grid.add_widget(screen4.btn2)
screen4.ids.grid.add_widget(screen4.lb2)
def peru(self, *args):
screen4 = self.manager.get_screen('carrinho')
screen4.btn2 = BubbleButton(text="Peito de peru",font_size='20dp', size_hint=(1,None), background_normal='1.png', background_down='2.png')
screen4.lb2 = Label(text="95,00",font_size='20dp', size_hint=(1,None))
screen4.ids.lb5.value += 35
screen4.ids.grid.add_widget(screen4.btn2)
screen4.ids.grid.add_widget(screen4.lb2)
[...]
and .kv
StackLayout:
orientation: 'tb-lr'
ScrollView:
size_hint: (1, .9)
pos_hint:{'x': .0, 'y': .0}
GridLayout:
cols: 2
padding: 45, 50
spacing: 25, 50
size_hint: (1, 1)
size_hint_y: None
height: self.minimum_height
width: 500
Label:
text: "[b]Escolha[/b]\n[i]Sabor[/i]"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
Label:
text: "[b]Preço\n[/b] [i](R$)[/i]"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
Button:
text: "[b]Muçarela[/b]\n[i]Muçarela, tomate\n e orégano[/i]"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
background_normal:'1.png'
background_down:'2.png'
on_press: root.mucarela()
Label:
text: "25,00"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
Button:
text: "[b]Catupiry[/b]\n[i]Catupiry, azeitona\n e tomate[/i]"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
background_normal:'2.png'
background_down:'1.png'
on_press: root.catupiry()
Label:
text: "25,00"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
Button:
text: "[b]Peito de peru[/b]\n[i]Muçarela, peito de peru\n e tomate[/i]"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
background_normal:'1.png'
background_down:'2.png'
on_press: root.peru()
Label:
text: "35,00"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
Button:
text: "[b]Portuguesa[/b]\n[i]Muçarela, presunto,\n cebola e ovo[/i]"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
background_normal:'2.png'
background_down:'1.png'
on_press: root.portuguesa()
Label:
text: "27,00"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
Button:
text: "[b]Toscana[/b]\n[i]Calabresa moída, muçarela\ne parmesão[/i]"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
background_normal:'1.png'
background_down:'2.png'
on_press: root.toscana()
Label:
text: "35,00"
markup: True
font_size: '20dp'
size_hint_y: None
height: self.texture_size[1]
and I have more one class form that is just one label numericpropertie whose change the value when respective button has clicked. As the change is only in this label, I am locking for how can I take the price value from the text label, and flavor name from the text button. Very thanks.

for your .kv file I recommend using Classes like
<MyButton#Button>:
markup: True
font_size: '20dp'
size_hint_y: None
then in your code you could use instances of MyButton which could minify your code a little bit.

Insert a line, and color to border for grid views in a KV file

How can I insert a line(seperator) between widgets, and also color border for grid views in a KV file:
TextBox is just a TextInput box with max_chars feature.
Current KV file:
<Label#Label>
text_size: self.size
valign: 'middle'
<ContactFrm>
padding: 5,5
orientation: 'vertical'
#row_default_height: '36dp'
#cols:1
#spacing: 0,0
GridLayout:
cols: 4
row_default_height: '32dp'
row_force_default: True
spacing: 10,0
size_hint_y: None
#height:34
Label:
text: 'Name'
size_hint_x: 0.5
TextBox:
id:name
max_chars:35
Label:
text: 'Contact Name'
size_hint_x: 0.5
TextBox:
id:contactname
max_chars:35
GridLayout:
cols: 4
row_default_height: '32dp'
row_force_default: True
spacing: 10,0
size_hint_y: None
#height: 36
Label:
text: 'Mobile 1'
size_hint_x: 0.5
TextBox:
id:mob1
max_chars:35
Label:
text: 'Mobile 2'
size_hint_x: 0.5
TextBox:
id:mob2
max_chars:35
Label:
text: 'Landline'
size_hint_x: 0.5
TextBox:
id:land1
max_chars:35
Label:
text: 'E-mail'
size_hint_x: 0.5
TextBox:
id:email1
max_chars:75
GridLayout:
row_default_height: '32dp'
row_force_default: True
spacing: 10,0
cols: 4
size_hint_y: None
#height: 36
Label:
text: 'Street 1'
size_hint_x: 0.5
TextBox:
id:street1
max_chars:75
Label:
text: 'Street 2'
size_hint_x: 0.5
TextBox:
id:street2
max_chars:75
Label:
text: 'Area'
size_hint_x: 0.5
TextBox:
id:area
max_chars:75
Label:
text: 'City'
size_hint_x: 0.5
TextBox:
id:city
max_chars:35
Label:
text: 'District'
size_hint_x: 0.5
TextBox:
id:district
max_chars:35
Label:
text: 'State'
size_hint_x: 0.5
TextBox:
id:state
max_chars:35
Label:
text: 'Zip Code'
size_hint_x: 0.5
TextBox:
id:zipcode
max_chars:10
BoxLayout:
I am new to both python and kivy, so above code might be a little naive, please advice where all I can improve also. Thank you.
Final Code I used with modifications, so thickness can also be provided:
<Seperator#Widget>:
id: separator
size_hint_y: None
height: 6
thickness: 2
canvas:
Color:
rgb: .24, .65, .94
Rectangle:
#pos: 0, separator.center_y
pos: self.pos[0], separator.center_y
size: separator.width, self.thickness

I am new in Kivy but I think you could add a normal Widget as a separator and draw a rectangle on its canvas.
Something like this gives me a red line - see image below:
Widget:
id: separator
size_hint_y: None
height: 6
canvas:
Color:
rgb: 1., 0., 0.
Rectangle:
pos: 0, separator.center_y
size: separator.width, 2
I think you could use canvas (or canvas.before) in GridLayout to draw a border (using rectangle or two - external with color of border and internal with color of background) but probably you will need to make (somehow) some margin to show that border.
EDIT:
First solution was with constant thickness.
For different thickness you need some calculation.
I add margin to make that calculation.
<Separator#Widget>
size_hint_y: None
thickness: 2
margin: 2
height: self.thickness + 2 * self.margin
color: 1., .0, .0
canvas:
Color:
rgb: self.color
Rectangle:
pos: self.x + self.margin, self.y + self.margin + 1
size: self.width - 2 * self.margin , self.thickness
BTW:
I use +1 in pos because it looks better (but I don't know why).
I add left and right margin.

You can also just set spacing for your grid layout and draw a rectangle as background. Like this:
GridLayout:
spacing: 10
canvas.before:
Color:
rgba: 0.3, 0.69, 0.31, 1.0
Rectangle:
size: self.size
pos: self.pos
That will look something like this: