Layouts in Kivy Using Kv lang

Hello there. In the previous post we made mention that we were to write the same code but this time around using the kivy language or KV Lang.

What is Kv lang

If you are familiar with web design, then you will know that styling of html pages is done using CSS. Kv lang can be considered as Kivy's own CSS. Thus to make things simple, Kv lang does styling while Python does the logic.Though Python is used for logic, the same thing can be done within kv. Enough of the talk, let's code the previous app but using Kv lang.

Main File

from kivy.uix.boxlayout import BoxLayout

class RootWidget(BoxLayout):
    def __init__(self,**kwargs):
        super(RootWidget,self).__init__(kwargs)


class MainApp(App):
    def build(self):
        return RootWidget()

MainApp().run()



KV file main.kv

<RootWidget>:
    orientation:'vertical'
    Label:
        text:'Name'
    TextInput:
        id:name
        multiline:False
    Label:
        text:'Password'
    TextInput:
        id:password
        password:True
        multiline:False

Explanation of Kv lang file main.kx

Now as seen above , the kv file is named main.kx. This is because kivy requires that the kv file name begins with the name similar to that of your App class. So if we name our App class as WickyApp, the kv file should be named as wicky.kv of wickyapp.kv so that kivy loads it by default. In the kv file , we declare our RootWidget with angular brackets. This is called the root rule. The structure of the widgets are arranged as a tree. So the labels and textinputs are siblings with a parent which is the RootWidget. Check more at Kivy Website for more.

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......

May be you are wondering what Kivy is all about. Here is a simple example of kivy code that displays a button with text.

from kivy.app import App
from kivy.uix.button import Button
class MainApp(App):
    def build(self):
        return Button(text='Hello From Kivy')
if __name__=="__main__:
    MainApp().run()

The first thing you should never forget in a kivy app is importing the app class from the kivy.app module. The App has a build method in which you have to return your root widget, which in this case we used the Button widget from the kivy.uix module. Note that the heart of kivy is in the kivy.uix module which contains all necessary layouts and widgets to build your app.If ytou need to dirty your hands with more code, check the kivy website or you can send me a mail. Happy coding..

Grateful To have You here

You are all welcome to our awesome blog.Here you can post questions related programming issues especially concerning Python and Kivy.If you do not know much about kivy, then you are in the right place. A quick description of kivy is that it is an awesome python GUI framework that is runs across different platforms without code modification.So feel free to share your ideas here as well as your frustrations with coding because here,we can make coding better