Kivy - KV Language Basics

We have to use the built-in load_string function. Below example creates a label using KV language. This is defined within the same python file.

from kivy.app import App
from kivy.uix.label import Label
from kivy.core.window import Window
from kivy.lang import Builder

lblKVLang = Builder.load_string("""
Label:
        text: 'KV Lang Style from string'
        font_size: '25'
        color: '#0000ff'
""")

class KVLangTestApp(App):

    def build(self):
        Window.clearcolor = (.5, 1, .2, 1)
        Window.size = (300, 300)
        return lblKVLang

if __name__ == '__main__':
    KVLangTestApp().run()

We have to use the built-in load_file function. Create 2 files named kvLanguageTest.py and kvlangtest.kv and write below content inside and run to see the output.

import kivy
kivy.require('2.0.0')
from kivy.app import App
from kivy.uix.label import Label
from kivy.core.window import Window
from kivy.lang import Builder

lblKVLang = Builder.load_file("kvlangtest.kv")

class KVLangTestApp(App):

    def build(self):
        Window.clearcolor = (.5, 1, .2, 1)
        Window.size = (300, 300)
        return lblKVLang

if __name__ == '__main__':
    KVLangTestApp().run()

Label:
    text: "KV Lang Style"
    font_size: '25'
    color: "#0000f3"

KV Language has provision to define the entire contents of a class widget.
Below example defines a class NewClass. We are going to set the contents of the class using kv language. To define a class, use the syntax <NewClass>. Note that, this class defined in python code should inherit Widget module.
Then provide the widgets required as shown in below code samples. Run it to get the below output screen.

import kivy
from kivy.app import App
from kivy.uix.button import Button
from kivy.core.window import Window
from kivy.lang import Builder 
from kivy.uix.widget import Widget

lblKVLang = Builder.load_file("kvlangtest.kv")

class NewClass(Widget):
    pass 
 
class MyApp(App): 
    def build(self):
        Window.clearcolor = (.5, 1, .2, 1)
        Window.size = (300, 300)
        return NewClass()
 
if __name__ == "__main__":
    MyApp().run()

<NewClass>
    Button:
        text: "New Button"
        font_size: '50'
        width: '300'
        height: '450'
        color: "#0000ff"
        background_color: "#000000"
    Label:
        text: "New Label"
        font_size: '50'
        width: '300'
        height: '150'
        color: "#ff0000"

In below example, one of the labels is defined from KV language. Rest is defined within the code.
See the code sample and output below:

import kivy
kivy.require('2.0.0')

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.gridlayout import GridLayout
from kivy.core.window import Window
from kivy.lang import Builder

lblKVLang = Builder.load_string("""
Label:
    text: 'KV Lang Style'
    font_size: '25'
    color: '#00f2f3'
""")

class TestApp(App):

    def build(self):
        
        lblM = Label(text='[b][color=#ff00ff]Markup Style[/color][/b]',
        markup = True)
        lblA = Label(text="Attribute Style", color =(0, 0, .5, 1),
        font_size ="15sp", size_hint=(1.0, 1.0))
        lblK = Label()
        layout = GridLayout(cols=1)
        layout.add_widget(lblM)
        layout.add_widget(lblA)
        layout.add_widget(lblKVLang)
        return layout

if __name__ == '__main__':
    TestApp().run()

Here we are defining a grid with 3 columns. 4 widgets added to it. Entire layout is then loaded to a string and returned from the build function.

import kivy
from kivy.app import App
from kivy.uix.button import Button
from kivy.core.window import Window
from kivy.lang import Builder 
from kivy.uix.widget import Widget

kvLang = Builder.load_file("kvlangtest.kv")
 
class MyApp(App): 
    def build(self):
        Window.clearcolor = (.5, 1, .2, 1)
        Window.size = (300, 300)
        return kvLang 
 
if __name__ == "__main__":
    MyApp().run()

GridLayout:
    cols: 3
    Label:
        text:"Label 1"
        color: "#ff00ff"
    Label:
        text:"Label 2"
        color: "#ffff00"
        font_size: '25'
    Label:
        text:"Label 3"
        color: "#ff00ff"
    Button:
        text: "Button 1"
        background_color: "#ab02fa"

We can import required python modules inside KV language using syntax:

#:import name x.y.z
#:import App kivy.app

This is equivalent to Python code:

from x.y import z as name
from kivy.app import App

In python we do like:

g = 100

In kv language this should be:

#:set g 100

Note that we have to use #: to do this same as import.

We have the option to bind event functions to different widgets from KV language. In below example we are defining an event on_press of a button, which calls a function buttonClick().

import kivy
from kivy.app import App
from kivy.uix.button import Button
from kivy.core.window import Window
from kivy.lang import Builder

kvLang = Builder.load_file("kvlangtest.kv")
 
class MyApp(App): 
    def build(self):
        Window.clearcolor = (.5, 1, .2, 1)
        Window.size = (300, 300)
        return kvLang

    def buttonClick(self):
        print("Button Clicked")
        return 
 
if __name__ == "__main__":
    MyApp().run()

GridLayout:
    cols: 2
    Button:
        text: "Click Me"
        background_color: "#ab02fa"
        on_press: app.buttonClick()

On clicking the button we will get the below output:

App, root and self are very important and is used to access the objects within the window and its properties and functions.

Please refer the below sample:

import kivy
from kivy.app import App
from kivy.uix.button import Button
from kivy.core.window import Window
from kivy.lang import Builder

kvLang = Builder.load_file("kvlangtest.kv")
 
class MyApp(App): 
    def build(self):
        Window.clearcolor = (.5, 1, .2, 1)
        Window.size = (300, 300)
        return kvLang

    def buttonClick(self, ap, rt, slf):
        print("App instance is " + str(ap))
        print("Root instance is " + str(rt) + ". It has " + str(rt.cols) + " columns.")
        print("Self instance is " + str(slf) + ". Its text is '" + slf.text + "'.")
        return 
 
if __name__ == "__main__":
    MyApp().run()

GridLayout:
    cols: 2
    Button:
        text: "Click Me"
        background_color: "#ab02fa"
        on_press: app.buttonClick(app, root, self)

On clicking the button we will get the below output:

We can provide an id to a widget and access it using this id. In below example, we have a label with id lblR. We are passing that object reference to buttonClick() using the id. We can use this id to access all the features of that particular control. Here we are changing the text of Label on button click.

import kivy
from kivy.app import App
from kivy.uix.button import Button
from kivy.core.window import Window
from kivy.lang import Builder

kvLang = Builder.load_file("kvlangtest.kv")
 
class MyApp(App): 
    def build(self):
        Window.clearcolor = (.5, 1, .2, 1)
        Window.size = (300, 300)
        return kvLang

    def buttonClick(self, lbl):
        lbl.text = "Button Clicked"
        return 
 
if __name__ == "__main__":
    MyApp().run()

GridLayout:
    id: gridTest
    cols: 1
    Label:
        id: lblR
        text:"Label 1"
        color: "#ff00ff"
    Button:
        id: nbtn
        text: "Click Me"
        background_color: "#ab02fa"
        on_press: app.buttonClick(lblR)

We have the option to keep common features together to avoid repeating it again. Here we have 3 buttons with some common features. We can apply common features as below. Common properties can also be overridden as in this example.

import kivy
from kivy.app import App
from kivy.uix.button import Button
from kivy.core.window import Window
from kivy.lang import Builder

kvLang = Builder.load_file("kvlangtest.kv")
 
class MyApp(App): 
    def build(self):
        Window.clearcolor = (.5, 1, .2, 1)
        Window.size = (300, 300)
        return kvLang
 
 
if __name__ == "__main__":
    MyApp().run()

<ButtonCommon@Button>:
    text_size: self.size
    font_size: '25sp'
    background_color: "#ab02fa"
    markup: True

GridLayout:
    cols: 1    
    ButtonCommon:
        text: "Button 1"
    ButtonCommon:
        text: "Button 2"
        font_size: '50sp'
    ButtonCommon:
        text: "Button 3"
        background_color: "#ff00ff"