Python | How to use multiple kv files in Kivy

Kivy is a platform-independent GUI tool in Python. How can it run on Android, IOS, Linux and Windows etc. It’s basically used to develop the Android application, but that doesn’t mean it can’t be used in Desktop applications.

In this tutorial we’ll look at how we can use multiple .kv files in a single application. This is the Python program, which uses GridLayout as its root widget. In addition to the main kv file, it loads box1.kv, box2.kv and box3.kv. There are also 2 application variables. These variables are referenced in the main kv file.

Basic Approach:

1) import kivy
2) import kivyApp
3) import Gridlayout
4) import Builder
5) Set minimum version(optional)
6) Create Layout class
7) Create App class
8) Set up multiple .kv file
9) return Layout/widget/Class(according to requirement)
10) Run an instance of the class

.py implementation file:

# Multiple .kv file Python code
  
import kivy 
    
# base Class of your App inherits from the App class.   
# app:always refers to the instance of your application  
from kivy.app import App
  
# The GridLayout arranges children in a matrix.
# It takes the available space and divides
# it into columns and rows, then adds
# widgets to the resulting “cells”.
from kivy.uix.gridlayout import GridLayout
  
# Builder is a global Kivy instance used
# in widgets that you can use to load other
# kv files in addition to the default ones.
from kivy.lang import Builder
  
  
# Loading Multiple .kv files 
Builder.load_file(’box1.kv’)
Builder.load_file(’box2.kv’)
Builder.load_file(’box3.kv’)
  
  
# Creating main kv file class
class main_kv(GridLayout):
    pass
  
# Create App class
class MainApp(App):
    def build(self):
        self.x = 150
        self.y = 400
        return main_kv()
  
# run the App
if __name__==’__main__’:
    MainApp().run()

The main kv file contains a GridLayout with 3 columns. These 3 Columns contains different AnchorLayouts. These all are defined in the main.kv file.

main.kv

# Creating the main .kv files
# the difference is that it is
# the heart of the Application
# Other are just Organs
  
:
  
    # Assigning Grids
    cols: 3
  
    # Creating AnchorLayout
    AnchorLayout:
        anchor_x: ’left’
        anchor_y: ’center’
  
        # Canvas creation
        canvas:
            Color:
                rgb: [1, 0, 0]
            Rectangle:
                pos: self.pos
                size: self.size
          
        Box1:
            size_hint: [None, None]
            size: [app.x, app.y]
  
    AnchorLayout:
        anchor_x: ’center’
        anchor_y: ’center’
        canvas:
            Color:
                rgb: [0, 1, 0]
            Rectangle:
                pos: self.pos
                size: self.size
        Box2:
            size_hint: [None, None]
            size: [app.x, app.y]
  
    AnchorLayout:
        anchor_x: ’right’
        anchor_y: ’center’
        canvas:
            Color:
                rgb: [0, 0, 1]
            Rectangle:
                pos: self.pos
                size: self.size
        Box3:
            size_hint: [None, None]
            size: [app.x, app.y] 

Now as shown in the Outputs there are different buttons in each grid to create Buttons in every grid we are using Different .kv files.

box1.kv file

# Creating 1st .kv file  
  
:
    Button:
        text: ’B1a’
    Button:
        text: ’B1b’

box2.kv file

# Creating 2nd .kv file
  
:
    Button:
        text: ’B2a’
    Button:

box3.kv file

# Creating 3rd .kv file 
  
:
    Button:
        text: ’B3a’
    Button:
        text: ’B3b’

Is it possible to read from more than one .kv file in Kivy app?

Question from StackOverFlow

I realize the short answer may be ’no,’ but perhaps this is worth asking again.

If I am witting a Kivy app with a couple thousand of lines - then would it be possible to write some classes in another kv file?

This would make it so much easier to edit, correct errors, make changes... etc.

Just to clarify - the .KV files would be a continuation of each other - not pointing to a parallel app.

Some expert insight would be greatly appreciated - Thank you.

Answer

Yes it is! You can import .kv files inside files just like normal python files by starting with:

#:include otherfile.kv

If you want the file to unload and reload first you can force the import typing

#:include force otherfile.kv

instead.

All this as written in the Kivy Language Documentation which is full of useful clarifications.

Archived version

In this article, we will see how we can use multiple GridLayout as the root widget. In addition to the main kv file, box1.kv ​​, box2.kv and box3.kv are loaded. There are also 2 application variables. These variables are referenced from the main kv file.

  Basic Approach:  1) import kivy 2) import kivyApp 3) import Gridlayout 4) import Builder 5) Set minimum version (optional) 6) Create Layout class 7) Create App class 8) Set up multiple .kv file 9) return Layout / widget / Class (according to requirement) 10) Run an instance of the class 

main .py implementation file:

# Multiple .kv file Python code   import kivy    # Your application base class inherits from the application class. # app: always refers to your application instance from kivy.app import App    # GridLayout arranges children in a matrix. # It takes up available space and divides # this is in columns and rows, then it adds # widgets for the resulting "cells". from kivy.uix.gridlayout import GridLayout   # Builder is a global a Kivy instance # in widgets that you can use to load others # kv files in addition to the default files. from kivy.lang import Builder     # Download multiple .kv files Builder.load_file ( ’box1.kv’ ) Builder.load_file ( ’box2.kv’ ) Builder.load_file ( ’box3.kv’ )     # Create the main kv file class class main_kv (GridLayout): pass   # Create application class class MainApp (App): def build ( self ): self . x = 150 self . y = 400 return main_kv ()   # run the application if __ name__ = = ’ __main__’ : MainApp () .run ()

The main kv file contains a GridLayout with 3 columns ... These 3 columns contain different AnchorLayouts. They are all defined in the main.kv file .

Now the main .kv file:

# Create basic .kv files # the difference is that it is # Heart of the Application # Other just organs   "main_kv & gt ;:   # Assigning grids   cols: 3   # Create AnchorLayout AnchorLayout:   anchor_x: ’left’   anchor_y: ’center’      # Create canvas canvas: Color: rgb: [ 1 , 0 , 0 ] Rectangle: pos: self  . pos size: self . size   Box1: size_hint: [ None , None ]   size: [app.x, app.y]   AnchorLayout: anchor_x: ’center’   anchor_y: ’center’   canvas: Color:   rgb: [ 0 , 1 , 0 ]   Rectangle : pos: self . pos size: self . size Box2: size_hint: [ None , None ] size: [app.x, app.y]     AnchorLayout: anchor_x: ’right’   anchor_y: ’center’   canvas: Color:   rgb: [ 0 , 0 , 1 ] Rectangle : pos: self . pos size: self . size Box3: size_hint: [ None , None ] size: [app.x, app.y]

Now, as shown in the Outputs, each grid has different buttons to create buttons. 
in each grid we use different .kv files.

file box1.kv ​​—

# Create 1st .kv file   "Box1 @ BoxLayout & gt ;: Button: text: ’B1a’ Button: text: ’B1b’

file box2.kv —

# Create 2nd .kv file   "Box2 @ BoxLayout & gt ;: Button: text: ’B2a’   Button: text: ’B2b’

file box3 .kv —

# Create 3rd .kv file   "Box3 @ BoxLayout & gt ;: Button: text:  ’B3a’   Button: text: ’B3b’

Output: