Kivy - base application has strange alignment

Question

I am trying to build a basic Kivy app. After adding the basic elements, and running the app, all of the elements are crammed into the bottom left corner. It shows up like this on android and Linux.

Main.py:

from kivy.app import App
from kivy.uix.widget import Widget

class SublimeLauncher(Widget):
    pass

class SublimeLauncherApp(App):
    def build(self):
        return SublimeLauncher()

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

sublimelauncher.kv:

#:kivy 1.2.0
<SublimeLauncher>:
    FloatLayout:
        BoxLayout:
            orientation: 'vertical'
            spacing: 10
            Label:
                text: "Enter the path to the folder to open.\nPress OK if you would like to open without a directory"
            TextInput:
                id: folderpath
            Button:
                text: 'OK'

I first tried it with just the BoxLayout, but read somewhere the root widget is always as big as the app. How do I declare the size of the app? Or the layout? How would you go about doing something like a dialog box?

Maybe I am missing something very basic, but I can't seem to figure it out.

Edit: here is what I am seeing..

Answer 1

Your layout has a default size of 100x100 pixels. You can try to color it to see how much space does it take:

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.lang import Builder

kv = '''
<SublimeLauncher>:
    BoxLayout:
        canvas:
            Color:
                rgb: 1, 0, 0
            Rectangle:
                size: self.size
        orientation: 'vertical'
        spacing: 10
        Label:
            text: "Enter the path to the folder to open.\\nPress OK if you would like to open without a directory"
        TextInput:
            id: folderpath
        Button:
            text: 'OK'
'''
Builder.load_string(kv)

class SublimeLauncher(Widget):
    pass

class SublimeLauncherApp(App):
    def build(self):
        return SublimeLauncher()

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

Setting non-default size:

kv = '''
<SublimeLauncher>:
    BoxLayout:
        size: 250, 250
        canvas:
            Color:
                rgb: 1, 0, 0
            Rectangle:
                size: self.size
        orientation: 'vertical'
        spacing: 10
        Label:
            text: "Enter the path to the folder to open.\\nPress OK if you would like to open without a directory"
        TextInput:
            id: folderpath
        Button:
            text: 'OK'
'''
Builder.load_string(kv)

Taking full space:

kv = '''
<SublimeLauncher>:
    BoxLayout:
        size: root.size
        canvas:
            Color:
                rgb: 1, 0, 0
            Rectangle:
                size: self.size
        orientation: 'vertical'
        spacing: 10
        Label:
            text: "Enter the path to the folder to open. \\nPress OK if you would like to open without a directory"
        TextInput:
            id: folderpath
        Button:
            text: 'OK'
'''
Builder.load_string(kv)

Answer 2

I recently wrote a post of a little trick I use when I am programming interfaces. The trick will let you see a border around all the widgets (layouts included) you add to the screen. This would be the result for your code:

It takes advantage of inheritance and the Kivy rules to overwrite the base class of all widgets. You just have to add:

<Widget>:
    canvas.after:
        Line:
            rectangle: self.x+1,self.y+1,self.width-1,self.height-1

at the beginning of this file:

<SublimeLauncher>:
    FloatLayout:
        BoxLayout:
            orientation: 'vertical'
            spacing: 10
            Label:
                text: "Enter the path to the folder to open.\nPress OK if you would like to open without a directory"
            TextInput:
                id: folderpath
            Button:
                text: 'OK'