How to add widgets to a label in scrollview Kivy - python-3.x

Question

I'm trying to make a chat page which looks like a standard messaging app on a phone (Whatsapp, Imessage etc). To do this I have created a screen which contains ScrollView and have added a label widget to it.
To get the desired effect of the Whatsapp/Imessage look I think I then want a label widget to be added to the label on the ScrollView everytime the send button is pressed, this will then add the text of the text input box onto the screen.
Is it possible to add a label to another label? Every question I've looked at so far has been about adding a widget to a BoxLayout or GridLayout.
I'm also not sure on how I'll get the position of the label to change everytime the button is pressed but one step at a time!
kv file:
WindowManager:
ChatPage:
<ChatPage>:
name: "chat_page"
layout_content: layout_content
NavigationLayout:
id: nav_layout
MDNavigationDrawer:
NavigationDrawerIconButton:
text: "Test"
FloatLayout:
MDToolbar:
pos_hint: {'top': 1}
md_bg_color: 0.2, 0.6, 1, 1
ScrollView:
size_hint: 1, 0.6
pos_hint: {"top" : 0.8, "bottom" : 0.5}
GridLayout:
id: layout_content
cols: 1
size_hint_y: None
height: self.minimum_height
canvas:
Color:
rgba: (1, 1, 1, 1)
Rectangle:
size: self.size
pos: self.pos
Label:
text_size: self.width - 20, None
size_hint_y: None
height: self.texture_size[1]
color: 0,0,0,1
BoxLayout:
TextInput:
id: msg
hint_text: "Type your message here"
pos_hint: {"x": 0, "top": 0.15}
size_hint: 0.75, 0.15
Button:
text: "Send"
background_normal: ""
background_color: 0, 0.6, 0, 1
pos_hint: {"x": 0.75, "top": 0.15}
size_hint: 0.25, 0.15
on_release: root.btn_press()
<SmoothLabel#Label>:
background_color: 0,0,0,0
background_normal: ""
back_color: 1,0,1,1
border_radius: [6]
canvas.before:
Color:
rgba: 0.2,0.6,1,1 #This changes the label colour
RoundedRectangle:
size: self.size
pos: self.pos
radius: self.border_radius
py file:
import kivy
from kivy.app import App
from kivy.properties import ObjectProperty, StringProperty, NumericProperty, ListProperty
from kivy.uix.screenmanager import ScreenManager, Screen
from kivy.lang import Builder
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.core.window import Window
from kivymd.theming import ThemeManager
from kivy.uix.scrollview import ScrollView
Window.clearcolor = (1,1,1,1)
class SmoothLabel(Label):
pass
class WindowManager(ScreenManager):
pass
class ChatPage(Screen):
layout_content = ObjectProperty(None)
def btn_press(self):
if self.ids.msg.text:
self.layout_content.add_widget(SmoothLabel(text=self.ids.msg.text, size_hint_x=0.5, size_hint_y=0.1, pos_hint={"x": 0.1, "top": 0.8}, background_color=(0.2, 0.6, 1, 1)))
self.ids.msg.text = ""
else:
pass
class MyApp(App):
theme_cls = ThemeManager()
def build(self):
kv = Builder.load_file("kivy.kv")
sm = WindowManager()
screens = [ChatPage(name="chat_page")]
for screen in screens:
sm.add_widget(screen)
sm.current = "chat_page"
return sm
if __name__ == '__main__':
MyApp().run()
Thanks

Answer 1

Made a few changes to your code (in addition to removing all the kivyMD) to get it to work:
First, I changed the SmoothLabel rule in your kv to:
<SmoothLabel>:
size_hint: None, None
size: self.texture_size
background_color: 0,0,0,0
background_normal: ""
back_color: 1,0,1,1
border_radius: [6]
canvas.before:
Color:
rgba: 0.2,0.6,1,1 #This changes the label colour
RoundedRectangle:
size: self.size
pos: self.pos
radius: self.border_radius
Took out the #Label since that is already specified in your python code, and added the size_hint and size (otherwise, the GridLayout decides the size of the SmoothLabel children).
Also, removed the
background_color=(0.2, 0.6, 1, 1)
from the SmoothLabel creation (that was throwing an exception for me), so the ChatPage definition now looks like:
class ChatPage(Screen):
layout_content = ObjectProperty(None)
def btn_press(self):
if self.ids.msg.text:
self.layout_content.add_widget(SmoothLabel(text=self.ids.msg.text))
self.ids.msg.text = ""
else:
pass
The Label widget has no background_color attribute. And, since I added size_hint to the rule, I removed it from the SmoothLabel() call. Also, the GridLayout does not support pos_hint.
That was enough to get the code working for me.