CODEWITHSUNDEEP
pythonkivy
Adrian Hernando Solanas
Adrian Hernando Solanas

Reputation: 43

Remove space between widgets in Kivy app python

I've made this little Kivy python app:

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.label import Label
from kivy.uix.image import Image
from kivy.core.window import Window

class TestApp(App):
    def build(self):   
        self.local = "Test message"        
        # build window
        self.window = GridLayout()
        self.window.cols = 1
        self.window.size_hint = (0.7, 0.9)
        self.window.pos_hint = {"center_x": 0.5, "center_y":0.5}
        # icon
        self.window.add_widget(Image(source="captus.png"))        
        # label
        self.charlbl = Label(text=self.local, color=(0, 0, 0, 1))
        self.window.add_widget(self.charlbl)        
        # background color
        Window.clearcolor = (1, 1, 1, 1)
        return self.window

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

I'm trying to create a basic app that will have an image, a text and a slider button.

The problem I'm facing here is that the widgets have a big separation:

enter image description here

How can I remove that blank space between both Widgets?

EDIT:

I've made some changes while getting an answer I was testing:

.py file:

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

class PhoneApp(App):
    def build(self):
        return MyWidget()

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

.kv file:

#:kivy 1.0.9
<MyWidget>:
    GridLayout:
        cols: 1

        Image:
            source: "captus.png"
        
        Label:
            text: "Test msg"
            color: 0, 0, 0, 1
            size_hint_y: None
            height: self.texture_size[1]

Upvotes: 0

Views: 421

Answers (1)

John Anderson
John Anderson

Reputation: 39117

The "space" is actually the size of the Label. A GridLayout divides its space equally among it's children, if there are no other constraints, So, in your case, the Label gets the same space as the Image. If any of the children have explicitly set sizes, then those children get their set sizes, and the rest of the children share the remaining space. So, if you set the size of the Label to something smaller, then that "space" will appear smaller. The easiest way to do that is by using the kivy language. Here is a modified version of your code that does that:

from kivy.app import App
from kivy.lang import Builder
from kivy.core.window import Window

kv = '''
GridLayout:
    cols: 1
    size_hint: (0.7, 0.9)
    pos_hint: {"center_x": 0.5, "center_y": 0.5}
    
    Image:
        source: 'captus.png'
    
    Label:
        text: app.local
        color: 0, 0, 0, 1
        size_hint_y: None
        height: self.texture_size[1]
'''

class TestApp(App):
    def build(self):
        self.local = "Test message"
        # background color
        Window.clearcolor = (1, 1, 1, 1)
        return Builder.load_string(kv)

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

Upvotes: 1

Related Questions