How can i add RoundedRectangle as a background for vertical scroll bar?

Question

In this program i want RoundedRectangle to be in the same position of bar in ScrollView.

I want to add RoundedRectangle as a background for bar

How can i do that?

Code:

import kivy
from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
from kivy.uix.textinput import TextInput
from kivy.lang import Builder
from kivy.uix.widget import Widget
from kivy.core.window import Window
from kivy.graphics import Color, Rectangle
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.relativelayout import RelativeLayout
from kivy.uix.boxlayout import BoxLayout
from kivy.properties import ObjectProperty
from kivy.uix.button import Button
from kivy.uix.scrollview import ScrollView
from kivy.app import runTouchApp 
from kivy.uix.codeinput import CodeInput
from kivy.extras.highlight import KivyLexer

Builder.load_string("""

<Button>
    size_hint: (None, None)
    height: 33
    width: 100
    text:'1'
    background_normal: ''
    background_down:'1, .3, .4, .85'
    background_color: 1, .3, .4, .85
    focus:True



<TextInput>
     
    selection_color:1, .3, .4, .4
    on_text_validate:app.enter()
    cursor_color: 255/255, 223/255, 5/255, 1
    multiline:False
    height: 33
    width:800
    size_hint: (None, None)
    background_color: 0,0,0,0
    foreground_color: 255/255, 143/255, 5/255, 0.8 


    
<Grid>
    
    t1:t1
    b1:b1
    grid:grid
    grid2:grid2

  
    
    GridLayout:

        canvas.before:
            Color:
                rgba:192/255,192/255,192/255,.3
            RoundedRectangle:
                radius:[10] 
                size:12 ,1920 
                pos:3,0
      
        cols:1
        id:grid
        size: root.width  ,root.height 
        
        
        ScrollView:
            bar_margin:3
            size_hint: 1,1
            bar_width: 12
            bar_color: 255/255, 143/255, 5/255, 0.8 
            bar_inactive_color:255/255, 143/255, 5/255, 0.8 
            do_scroll_x:False
            do_scroll_y:True
            bar_pos_y:'right'
            scroll_type:['bars','content']
            
            
            GridLayout:
                height: 5000
                size_hint:1,None
                spacing:6
                id:grid2
                cols:2
                 
            
                Button:
                    id:b1
     
                TextInput:
                    id:t1
                 

""")

c=[1]

class Grid(Widget):
    t1=ObjectProperty(None)
    b1=ObjectProperty(None)
    grid=ObjectProperty(None)
    grid2=ObjectProperty(None)
    def enter(self):
              c.append(1)
              self.grid2.add_widget(Button(text='%s'%len(c)))
              self.grid2.add_widget(TextInput())
               

gr=Grid() 
class foo(App):

    def build(self):
        Window.clearcolor='#1618388'
       
        return gr
    def enter(self):
        gr.enter()
     





if __name__ == '__main__':
    foo().run()

Answer 1

You need to create the canvas inside the scrollview.

ScrollView:
            id: scroll
            bar_margin: 3
            size_hint: 1,1
            bar_width: 12
            bar_color: 255/255, 143/255, 5/255, 0.8 
            bar_inactive_color:255/255, 143/255, 5/255, 0.8 
            do_scroll_x:False
            do_scroll_y:True
            bar_pos_y:'right'
            scroll_type:['bars','content']
            canvas.before:
                Color:
                    rgba:1, 1, 1, 1
                RoundedRectangle:
                    radius:[10] 
                    size: 12, root.height
                    pos: root.width - scroll.bar_width - scroll.bar_margin, 0

Ids are your friend in these cases.

hope it helps