CODEWITHSUNDEEP
pythonkivy
RyanT
RyanT

Reputation: 19

How would I get text under an image in Gridlayout in kivy?

I am just trying to get a few lines of text under each image here. You can see the code I tried below but obviously it doesn't work. https://i.gyazo.com/19641174dd3bc136e30f62a1902f5f55.png

        rows:2
        cols: 3
        size_hint: 1, .7
        pos_hint: {'center_y':0.55}
        spacing: 100
        padding: 40
        Image:
            source: app.strips
            StackLayout:
                pos: self.pos
                MDLabel:
                    text: "testing"
        Image:
            source: app.cowboyRibeye
        Image:
            source: app.tbone
        Image:
            source: app.boneinStrip
        Image:
            source: app.ribeye
        Image:
            source: app.porterhouse

Upvotes: 1

Views: 163

Answers (1)

amras
amras

Reputation: 1599

You can create a custom class combining Image and Label in a layout and use that custom class in place of Image like below:

GridLayout:
    rows:2
    cols: 3
    size_hint: 1, .7
    pos_hint: {'center_y':0.55}
    spacing: 100
    padding: 40
    MyImage:
        image_source: app.strips
        subtext: 'strips'
    MyImage:
        image_source: app.cowboyRibeye
        subtext: 'cowboyRibeye'
    MyImage:
        image_source: app.tbone
        subtext: 'tbone'
    MyImage:
        image_source: app.boneinStrip
        subtext: 'boneinStrip'
    MyImage:
        image_source: app.ribeye
        subtext: 'ribeye'
    MyImage:
        image_source: app.porterhouse
        subtext: 'porterhouse'

<MyImage@GridLayout>:
    image_source: ''
    subtext: ''     
    cols: 1
    canvas.before:
        Color:
            rgba: (1, 1, 1, 1)
        Rectangle:
            size: self.size
            pos: self.pos        
    Image:
        source: root.image_source
        size_hint: 0.9, 0.9
    Label:
        text: root.subtext
        halign: 'center'
        color: 0, 0, 0, 1
        size_hint: 0.1, 0.1

UPDATE: size_hint property added to Image and Label in the custom class to properly show the image.

Upvotes: 1

Related Questions