How can I resize a picture in kivy?

I'm using kivy and I am trying to make a program to help me remember the super saiyans transformations. I wanted the buttons to be pictures instead of words. So here is the code I used to make the button a picture:

self.Goku = Button(background_normal = '106-1060675_goku-base-form-png-clipart (1).png')
self.Goku.bind(on_press = self.SonGoku)
self.add_widget(self.Goku)

When I runned the code to see what it looks like, I saw that one of the picture was to big and one to small. So I tried to resize the picture by adding size = ("10, 10") but it didn't work. I tried the same thing with size_hint, but it had the same result. Nothing moved. I looked at some documentations about the button and adding pictures to kivy but it didn't help much. Here's the entire code:

import kivy
from kivy.app import App
from kivy.graphics import *
from kivy.uix.label import Label
from kivy.uix.image import Image
from kivy.uix.button import Button
from kivy.uix.widget import Widget
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.gridlayout import GridLayout

class main(GridLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

        self.cols = 4

        self.Goku = Button(background_normal = '106-1060675_goku-base-form-png-clipart (1).png', size_hint = (1, 0.5))
        self.Goku.bind(on_press = self.SonGoku)
        self.add_widget(self.Goku)

        self.Vegeta = Button(background_normal = 'vegeta-png-clip-art.png', size_hint = (1, 1))
        self.Vegeta.bind(on_press = self.PrinceVegeta)
        self.add_widget(self.Vegeta)

    def SonGoku(self, instance):
        self.cols = 1

        self.remove_widget(self.Goku)
        self.remove_widget(self.Vegeta)

        self.NormalGoku = Button(text = "Base form")
        self.add_widget(self.NormalGoku)
        self.SSJGoku = Button(text = "Super saiyan")
        self.add_widget(self.SSJGoku)
        self.SSJ2Goku = Button(text = "Super saiyan 2")
        self.add_widget(self.SSJ2Goku)

    def PrinceVegeta(self, instance):
        self.cols = 1

        self.remove_widget(self.Goku)
        self.remove_widget(self.Vegeta)

        self.NormalVegeta = Button(text = "Base form")
        self.add_widget(self.NormalVegeta)
        self.SSJVegeta = Button(text = "Super saiyan")
        self.add_widget(self.SSJVegeta)
        self.SSJ2Vegeta = Button(text = "Super saiyan 2")
        self.add_widget(self.SSJ2Vegeta)

class Saiyan(App):
    def build(self):
        return main()

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

Help would be appreciated. Feel free to ask any question. Thanks in advance.

Answers

One way of doing it would be to draw the image on the buttons canvas. the attributes "allow_stretch" and "keep_ratio" are used to fill the entire button size.

from kivy.uix.image import Image

Then:

self.Goku = Button(size_hint=(None, None), size=(120,120))
with self.Goku.canvas:
    Image(source='vegeta-png-clip-art.png', size=self.Goku.size, pos=self.Goku.pos, allow_stretch=True, keep_ratio=False)
self.add_widget(self.Goku)

In case you are not setting the size explicitly for the button you need to bind the size attribute to a method in order to resize the image.

example:

class main(GridLayout):
    def __init__(self, **kwargs):
        super().__init__(**kwargs)

        self.cols = 4
        self.Goku = Button()
        with self.Goku.canvas:
            self.Goku_img = Image(source='vegeta-png-clip-art.png', size=self.Goku.size, pos=self.Goku.pos, allow_stretch=True, keep_ratio=False)
        self.Goku.bind(size=self.adjust_size)
        self.add_widget(self.Goku)

...

    def adjust_size(self, instance, value):
        self.Goku_img.size = value

I hope this is a suitable approach for you.

Posted on by MisterNox