Kivy - the base application has a strange alignment

Question

I am trying to create a basic Kivy application. After adding the basic elements and launching the application, all the elements are overflowed in the lower left corner. This appears 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' 

At first I tried it only with BoxLayout, but somewhere I read the root widget is always as big as the application. How to declare the size of the application? Or a layout? How would you do something like a dialog box?

Perhaps I am missing something very simple, but I cannot understand how to understand it.

Edit: this is what i see ..

Answer 1

Since your root widget is not a layout (you did SublimeLauncher inherit Widget ), it does not set the size / position of its children. Thus, your FloatLayout has default values, since you do not manually override them.

 pos: 0, 0 size: 100, 100 

And these default values ​​limit children, since FloatLayout limits their size based on their size_hint property.

You want to give them more space, as Nekatin pointed out.

In addition, since your text is larger than the label (you did not specify halign and text_size), its texture is centered on the center of the label, and therefore part of it goes off the screen. You want to look at kivy / examples / widgets / textalign.py

Answer 2

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

 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() 

Non-default size setting:

 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 3

I recently wrote a post about a little trick that I use when I program interfaces. This trick will allow you to see the border around all widgets (including layouts) that you add to the screen. This will be the result for your code:

It takes advantage of inheritance and Kivy rules to overwrite the base class of all widgets. You just need 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'