How do I make a widget with the same size as an image in kivy

Question

I want to have a banner on the bottom of my application which scales with varying width. However, I can't get the size of the widget to correspond to the size of the image and because of that, I leave some blank space underneath the banner itself. How can this be done?

Here my try:

FloatLayout:
    canvas.before:
        Color:
            rgb: utils.get_color_from_hex("#6ec4c1")
        Rectangle:
            size: self.size
            pos: self.pos
    GridLayout:
        cols: 3
        pos_hint: {"top": 0.95}
        size_hint: 1, 0.05
        ImageButton:
            source: "images/back_arrow.png"
            on_release: app.change_screen("home_screen")
        Image:
            source: "images/icon.png"
        Label:
            text: ""
    Image:
        id: banner
        keep_ratio: True
        allow_stretch: True
        size_hint: 1, None
        source: "images/banner.png"

This code does place the picture at the bottom, But ideally. I'd like to have it stay at the bottom with full-screen width and scale in y to fit it? Is this possible?

What I want and it only works for this specific aspect ratio of the screen

When I change the width of the screen I'd like it to scale in y to fit the screen instead it keeps y constant

Answer 1

By default, the size_hint of any Widget is (1,1) . which means that your Image will be the same size as its containing FloatLayout . So you can set values for size_hint , or you can set size_hint: None, None and then provide values for size . Also, pos_hint: {"bottom": 1} will not work, since bottom is not a supported key for pos_hint . If you want the Image at the bottom, use pos_hint: {'y':0} , but the default value for pos is (0,0) , so you shouldn't even need the pos_hint: {'y':0} .

Also, if you set a size_hint to None without providing the corresponding width or height , then the default width or height (which is 100 ) will be used.

I think I am finally getting what you want. You can use BoxLayout instead of FloatLayout . The BoxLayout will set the size of its children to fit its available space (see documentation ). So, perhaps something like this will work:

BoxLayout:
    orientation: 'vertical'
    canvas.before:
        Color:
            rgb: utils.get_color_from_hex("#6ec4c1")
        Rectangle:
            size: self.size
            pos: self.pos
    GridLayout:
        cols: 3
        pos_hint: {"top": 0.95}
        size_hint: 1, 0.05
        ImageButton:
            source: "images/back_arrow.png"
            on_release: app.change_screen("home_screen")
        Image:
            source: "images/icon.png"
        Label:
            text: ""
    Image:
        id: banner
        keep_ratio: True
        allow_stretch: True
        # size_hint: 1, None
        source: "images/banner.png"

Note that setting size_hint: 1, 0.05 in the GridLayout means that 95% of the BoxLayout will be given to the banner.