Kivy - Add widget(Splitter) to a GridLayout

Question

I am trying to put a given pictures in a gridlayout that can scroll, and when i select the picture the color of the image change, here is my code:

CONTAINER_PNG = os.path.join(AllImage_ROOT, 'images')
IMAGES_NAMES = [c[:-4] for c in os.listdir(CONTAINER_PNG)]

LIST_IM = os.listdir(CONTAINER_PNG)

class ImageButton(ButtonBehavior, Image):
   pass

class AllImage(BoxLayout):

# screen_manager = ObjectProperty()

def __init__(self, **kwargs):
    BoxLayout.__init__(self, **kwargs)
    self.orientation='vertical'

    splitter = Splitter(sizable_from = 'bottom')
    root = ScrollView()

    layout = GridLayout(cols=4, spacing=10)
    layout2 = GridLayout(cols=4, spacing=10)
    button = ImageButton(source = 'mix.png')
    layout2.add_widget(button)

    self.add_widget(layout2)

    for im in IMAGES_NAMES:
        if IMAGES_NAMES != None :
            btn = ImageButton(source = im+'.png')
            btn.bind(on_press=  lambda a:layout.add_widget( ToggleButton(text = 'work') ))
            btn.bind(on_press=  lambda b:self.background_color(1,1,1))
            layout.add_widget(btn)

    layout2.add_widget(splitter)
    root.add_widget(layout)

    self.add_widget(root)

class TryApp(App):

def build(self):
    return AllImage()

def on_pause(self):
    return True


if __name__ == "__main__":
    TryApp().run()

I know i am doing things wrong, so i have several questions :

1- Why when i add a Splitter between my 2 Grids it don't work(the splitter is not visible)

2- How can i change the color of my ImageButton ?

3- The scrollview isn't working on my GridLayout, how can i custom my Grid that can be bigger than my window.

Thank you for your time :)

Answer 1

1. kivy tries to make things simple by separating the UI from the logic..from the kivy docs,it says You must deactivate at least one of the size_hint instructions (x or y) of the child to enable scrolling..

   <AllImage>:
       orientation:'vertical'
       ScrollView:
           do_scroll_x:False
   
           GridLayout:
               cols:4
               spacing:10
               size_hint_y:None
               height: 8*dp(80)
   

for clarity sake,try to implement the UI stuffs in a kv file to make things easier to read.

btn.bind(on_release=  lambda a:layout.add_widget( ToggleButton(text = 'work') ))
btn.bind(on_press=  lambda b:self.background_color(1,1,1))

i dont think the on_press can handle two methods at the sametime,so try this