CODEWITHSUNDEEP
pythonlayoutkivy
jtsmith1287
jtsmith1287

Reputation: 1149

Python - Kivy 1.7.2 - Layout over image not ligning up properly

So I'm totally new to Kivy. I struggled for a while just getting an image to show up centered. The way I understand it, everything is a widget and anything can be nested underneath it (for the most part). Please correct me if this is not true.

I've got my image now and want to start laying out my UI. Everything is aligning in the bottom-left corner though. 

import kivy
kivy.require("1.7.2")

from kivy.config import Config
Config.set('graphics', 'width', '540')
Config.set('graphics', 'height', '960')

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


class RootWidget(Widget):
  pass

class MyApp(App):

    def build(self):
        # self.root = root = RootWidget(source = "snowy_mountains.jpg")
        self.root = root = RootWidget()
        root.bind(size = self._update_rect,
                  pos = self._update_rect)
        with root.canvas.before:
          self.rect = Rectangle(size = root.size,
                                pos = root.pos)

        return root

    def _update_rect(self, instance, value):
        self.rect.pos = instance.pos
        self.rect.size = instance.size


if __name__ == "__main__":
  app = MyApp()
  app.run()

And my .kv ...

#:kivy 1.7.2

<RootWidget>:
    BoxLayout:
        orientation: "vertical"
        padding: 10
        spacing: 15
        GridLayout:
            rows: 2
            size_hint: 1, .333
            Label:
                text: "App Name"
            Label:
                text: "Some Info ..."
        GridLayout:
            cols: 2
            spacing: 15
            Button:
                text: "1"
            Button:
                text: "2"
            Button:
                text: "3"
            Button:
                text: "4"

I've tested this via kivycatalog and it works great. I copied exactly what I did from there to my .kv and just nested it all under <RootWidget> (which is where my image is). I've been browsing through the API and online (not a lot of user contribution on kivy...) and can't figure out why it's behaving this way. I even tried just using a normal Widget instead of subclassing Image. Bah... Any ideas?

Upvotes: 0

Views: 458

Answers (1)

Nykakin
Nykakin

Reputation: 8747

This is because the default size of a widget in Kivy is a 100x100 pixels - widget does not take all available space automatically. You need to set size property:

<RootWidget>:
    BoxLayout:
        size: root.size # this line was missing
        orientation: "vertical"
        # ...

More information in this question: Kivy - base application has strange alignment

Upvotes: 2

Related Questions