Laying out kivy Widgets

This post is focused on teaching a key concept of kivy, which laying out widgets on an interface.The sample code is shown below and the explanation follows.

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.button import Button
from kivy.uix.label import Label
from kivy.uix.textinput import TextInput


class RootWidget(BoxLayout):
    def __init__(self,**kwargs):
        super(RootWidget,self).__init__(kwargs)
        # set orientation of layout to vertical. Place widgets from top to bottom
        # Another option is horizontal to lay widgets from left to right

        self.orientation = 'vertical'
        # instantiate widgets

        self.name_label = Label(text="Name")
        self.name = TextInput(multiline=False)
        self.password_label = Label(text="Password")
        self.password = TextInput(multiline=False, password=True)
        self.submit = Button(text="Submit")
        # Add widgets to Root widget

        self.add_widget(self.name_label)
        self.add_widget(self.name)
        self.add_widget(self.password_label)
        self.add_widget(self.password)
        self.add_widget(self.submit)




class RunnerApp(App):
    def build(self):
        return RootWidget()
if __name__== "__main__":
    RunnerApp().run()

As mentioned in in previous post(s), to use anything from kivy, you need to import the App class .The App class provides the main loop for the app. Also you need a root widget which is the main area or class where you build your app interface. Here our root widget is a BoxLayout found in the kivy.uix.boxlayoput module. Most of the time, you will be working with modules in kivy.uix which has tons of widgets you use in you app like buttons,checkboxes, dropdowns and other layouts.You build your root widget which must be returned in the build method of App class before the interface is displayed.The necessary imports here are TextInput which provides a text area for filling info, Label which is self descriptive. passing multiline argument as false means the input area is only on a single line.If you want something like an area for comments, you will have to set multiline to True.Widgets that can hold other widgets(Layouts) have a method called the add_widget method to add the widget to the layout.So the statements:
self.name_label = Label(text="Home") simply instantiates a Label. But before you see it displayed, you must call add_widget on it, which tells the root widget to add it to itself. RunnerApp().run runs the app.

Other Layouts

The other widgets that you could use as root widgets are GridLayout,FloatLayout,RelativeLayout,Popup, StackLayout,AnchorLayout and more . Check this to learn more about layouts in kivy...

Here is the output of our app

What Next

In the next post, we will do this same work but in a much simpler way but using kv lang, a styling language similar to the way CSS and HTML operate, where kv will act more like CSS and Python will hold our logic. Happy coding......