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

Question

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)

Answer 1

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()