[Python] Kivy Dynamic Image Grid View

I'm using python kivy. I want to display cards containing a title and underneath an image, in a grid with 5 columns.

The behavior of the following snippet is 90% of what I want. The images always fit the same space, leaving empty space up/down or left/right, so they maintain aspect ratio. The only problem is that all the rows are scaled to fit the window. I want the height of the space where the image should fit to be a custom percentage of the window height, and to scroll down and up to see the rows that don't fit the current window.

class MyApp(App):
def build(self):
scroll_view = ScrollView(do_scroll_x=False, do_scroll_y=True, smooth_scroll_end=15, scroll_wheel_distance=20, size=(Window.width, Window.height))
grid = GridLayout(cols=5, size_hint_x=1)
index = 0
for uuid, record in records.items():
image_texture = image_cache.get_image(uuid)
card = BoxLayout(orientation='vertical')
card.add_widget(Button(
text=record.name,
size_hint=(1, 0.2), # Stretch to fit column width (1 means full width)
on_press=lambda x: print(f"Button pressed: {x.text}")
))
card.add_widget(Image(
texture=image_texture,
size_hint_x=1,
))
grid.add_widget(card)
index += 1
if index >= 20:
break

scroll_view.add_widget(grid)
return scroll_view


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

Continue reading...