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.