CODEWITHSUNDEEP
pythonimagebuttonkivy
Enzo Dtz
Enzo Dtz

Reputation: 381

Dynamic buttons with images with Kivy

Problem

I have a button with a circular image with the ratio 1:1, and when I run the code (at the bottom), the program creates a screen with the same ratio, but I can resize it, and change the ratio and size, but the image does not grow as the screen, so it uses less space as the screen grows. I tried to set values for the size_hint:, but it distorts the image, minus in a single proportion. How can I make this button adaptable to any proportion and size, without distortion and with the space proportional to the size of the screen?

Generated Screen (1:1)

Generated Screen

Resized Screen (16:9)

Resized Screen

Code

import kivy
kivy.require('1.9.0')

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.image import Image

class FloatingApp(App):

    def build(self):
        return FloatLayout()

flApp = FloatingApp()

flApp.run()

.kv File

<Botao@Button>:
    font_size: 32
    color: 1, 1, 1, 1
    size: 138, 138
    background_normal: 'bd.png'
    background_down: 'bd1.png'
    background_color: 0.88, 0.88, 0.88, 1  
    size_hint: None, None

<FloatLayout>:
    Botao:

        text:"Botao"
        pos_hint: {"center_x": .5, "center_y": .5}

Upvotes: 1

Views: 824

Answers (1)

John Anderson
John Anderson

Reputation: 38837

You can set the size of your Botao in your kv file as a function of the root.size. By using min(root.size). You must also remove the size: 138, 138 line.

<Botao@Button>:
    font_size: 32
    color: 1, 1, 1, 1
    #size: 138, 138
    background_normal: 'bd.png'
    background_down: 'bd1.png'
    background_color: 0.88, 0.88, 0.88, 1  
    size_hint: None, None

<FloatLayout>:
    Botao:
        size: (min(root.size)*0.5, min(root.size)*0.5)
        text:"Botao"
        pos_hint: {"center_x": .5, "center_y": .5}

Upvotes: 1

Related Questions