Table of contents
1.
Introduction
2.
Layouts
3.
FAQs
4.
Conclusion
Last Updated: Mar 27, 2024

Multiple Layout

Author yuvatimankar
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Kivy is a GUI tool that is platform-independent in Python. It can be run on android, IOS, Linux, windows, etc. It is used to develop the Android application, but this does not mean that we cannot use it on desktop applications. Layouts are containers that are used to arrange widgets in a particular manner.

In Kivy, there are multiple types of Layouts:

  • BoxLayout: Widgets are organized sequentially, in either a vertical or horizontal manner.
  • AnchorLayout: Widgets will be anchored to' top"," bottom," right," left," or center.
  • FloatLayout: Widgets are unrestricted.
  • GridLayout: Widgets are organized in a grid defined by the rows and cols properties.
  • RelativeLayout: Child widgets are placed relative to the Layout.
  • StackLayout: Widgets are stacked from left to right, top to bottom, top to bottom, and left to right.

Layouts

  • BoxLayout: There are two ways in which you can create a Box layout, by using class or by using the Kivy file. So here we are using both methods to show the result.

Using class:

from kivy.app import App
from kivy.uix.button import Button
from kivy.uix.boxlayout import Boxlayout

Class BoxLayoutEx(App):
    def build(self):
		mainLayout = BoxLayout(orientation = ‘vertical’)
		hboxLayout = BoxLayout(orientation = ‘horizontal’)
		btn1 = Button(text = “ Click one”)
		btn2 = Button(text="Click Two")
		hboxLayout.add_widget(btn1)
		hboxLayout.add_widget(btn2)
		vboxLayout = BoxLayout(orientation='vertical')
		btn3 = Button(text="Click Three")
		btn4 = Button(text="Click Four")
		vboxLayout.add_widget(btn3)
		vboxLayout.add_widget(btn4)
		mainLayout.add_widget(hboxLayout)
		mainLayout.add_widget(vboxLayout)
		return mainLayout
		
if __name__ == "__main__":
    window = BoxLayoutEx()
    window.run()
You can also try this code with Online Python Compiler
Run Code


Output: 


             Source: codeloop

Now, let's create the BoxLayout using the kivy file.

Below is our main.py file; we have created a class extended from BoxLayout, and we have returned our class to the main app class.

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout

class MyBoxLayout(BoxLayout):
    pass

class BoxLayoutEx(App):
    def build(self):
return MyBoxLayout()

if __name__ == "__main__":
    window = BoxLayoutEx()
    window.run()
You can also try this code with Online Python Compiler
Run Code

Below is our main.py file; we have created a class extended from BoxLayout, and we have returned our class to the main app class.

<MyBoxLayout>:
    orientation: 'horizontal'
    Button:
        text: "Click One"
        background_color: 0, 1, 1, 1
        font_size: 20
    Button:
        text: "Click Two"
        background_color: 0, 1, 0, 1
        font_size: 20
    Button:
        text: "Click Three"
        background_color: 0, 0, 1, 1
        font_size: 20
     Button:
        text: "Click Four"
        background_color: 1, 0, 1, 1
        font_size: 20
     Button:
        text: "Click Five"
        background_color: 1, 0, 0, 1
        font_size: 20
You can also try this code with Online Python Compiler
Run Code

 

Output:


           Source:codeloop

  • AnchorLayout: There are two ways in which you can create an anchor layout using class and kivy files.

The below code is by using class. 

from kivy.app import App
from kivy.uix .button import Button
from kivy.uix.anchorlayout import AnchorLayout
from kivy.uix.boxlayout import BoxLayout

class AnchorLayoutEx(App):
    def build(self):

anLayout1 = AnchorLayout(anchor_x='right', anchor_y='bottom')
btn = Button(text='Click One', size_hint = (0.3, 0.3))

anLayout2 = AnchorLayout(anchor_x='left', anchor_y='top')
btn1 = Button(text='Click Two', size_hint = (0.3, 0.3))
anLayout1.add_widget(btn)
anLayout2.add_widget(btn1)
boxLayout = BoxLayout()
boxLayout.add_widget(anLayout1)
boxLayout.add_widget(anLayout2)
return boxLayout


if __name__ == "__main__":
window = AnchorLayoutEx()
 window.run()
You can also try this code with Online Python Compiler
Run Code

 

Output:


Now we will create the AnchorLayout using the kivy file, this main.py file, and in here, a class is created that extends from AnchorLayout, and in the main app class, we have just returned the class.


from kivy.app import App
from kivy.uix.anchorlayout import AnchorLayout

class MyAnchorLayout(AnchorLayout):
    pass

class AnchorLayoutEx(App):
    def build(self):

  return MyAnchorLayout()

if __name__ == "__main__":
    window = AnchorLayoutEx()
    window.run()
You can also try this code with Online Python Compiler
Run Code

Now, below is the .kv file, and the filename is anchorlayout .kv 

<MyAnchorLayout>:
    anchor_x:'right'
    anchor_y:'top'
  Button:
        text:'Click One'
        size_hint:[.5,.5]
   Button:
        text:"Click Two"
        size_hint:[.3,.3]
You can also try this code with Online Python Compiler
Run Code


Output:


                Source:codeloop

  • FloatLayout: There are two ways in which you can create FloatLayout, one by using class and another by using the .kv file.

In the Below code, by using class, we will create the FloatLayout using a python file.

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button

class FloatLayoutEx(App):
    def build(self):
		layout = FloatLayout(size=(200, 300))
		button = Button(text='Hello world', size_hint=(.5, .25),  pos=(20, 20))
		layout.add_widget(button)
   		return layout

if __name__ == "__main__":
    window = FloatLayoutEx()
    window.run()
You can also try this code with Online Python Compiler
Run Code


Output:


Source: Codeloop

And now, we will create FloatLayout using the .kv file; given below code is main.py, and in that file, we have created a class that extends from FloatLayout, and in the main app class, we have just returned the class.

 

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout

class MyFloatLayout(FloatLayout):
    pass

class FloatLayoutEx(App):
    def build(self):
return MyFloatLayout()

if __name__ == "__main__":
    window = FloatLayoutEx()
    window.run()
You can also try this code with Online Python Compiler
Run Code

The code given below is the .kv file, and the filename is floatlayoutex.kv; the name should be the same as the app class name.

<MyFloatLayout>:
    Button:
        text: 'Click One'
        size_hint: .4, .3
        background_color: 0,1,1,1
        pos_hint: {'x': 0, 'top': 1}
    Button:
        size_hint: .4, .3
        text: 'Click Two'
        background_color: 0,1,1,1
        pos_hint: {'right': 1, 'y': 0}
You can also try this code with Online Python Compiler
Run Code


Output:


                 Source:codeloop

  • GridLayout: GridLayout takes the available space and divides it into columns and rows, and after that, it adds widgets to the resulting cells. A GridLayout must always have at least one input constraint: GridLayout.cols or GridLayout.rows.

    By using the class:

    Below code is the main.py file,

from kivy.app import App
from kivy.uix.gridlayout import GridLayout
from kivy.uix.button import Button
class GridLayoutEx(App):
    def build(self):

layout = GridLayout(cols=2)
            layout.add_widget(Button(text='Click One',size_hint_x=None, width=100))
            layout.add_widget(Button(text='Click Two',size_hint_x=None, width=100))
            layout.add_widget(Button(text='Click Three'))
            layout.add_widget(Button(text='Click Four'))
                 return layout



if __name__ == "__main__":
    window = GridLayoutEx()
    window.run()
You can also try this code with Online Python Compiler
Run Code

 

Output:


                 Source: codeloop

Now we will create GridLayout using the .kv file. Below is the main.py file in which a class is created that extends from GridLayout.

from kivy.app import App
from kivy.uix.gridlayout import GridLayout

class MyGridLayout(GridLayout):
    pass

class GridLayoutEx(App):
    def build(self):
return MyGridLayout()

if __name__ == "__main__":
    window = GridLayoutEx()
    window.run()
You can also try this code with Online Python Compiler
Run Code


And the below file is a .kv file, and the filename is gridlayoutex.kv.

<MyGridLayout>:
    cols: 2
    spacing: 10
    Button:
        text: 'Click 1'
        size_hint_x: None
        background_color:0,1,1,1
        width: 50
    Button:
        text: 'Click 2'
        background_color:1,0,1,1
    Button:
        text: 'Click 3'
        size_hint_x: None
        width: 50
        background_color:1,1,0,1
     Button:
        text: 'Click 4'
        size_hint_x: None
        width: 50
        background_color:1,1,1,1
You can also try this code with Online Python Compiler
Run Code

Output:

         Source: codeloop

  • Relative Layout:If we want absolute positioning, we use FloatLayout; the RelativeLayout class acts just like the regular FloatKayout class, except that its child widgets are positioned relative to the Layout. 

 

We are creating RelativeLayout using the kivy file. Below is main.py, and we have created a class that extends from RelativeLayout, and in the main app class,we have just returned to the class.


from kivy.app import App
from kivy.uix.relativelayout import RelativeLayout
 class MyRelativeLayout(RelativeLayout):
           pass
 
class RelativeLayoutEx(App):
                  def build(self):
 
         return MyRelativeLayout()
 
if __name__ == "__main__":
    window = RelativeLayoutEx()
    window.run()
You can also try this code with Online Python Compiler
Run Code

And below is .kv file.
 

<Button>:
    font_size: 25
    size_hint: 0.3, 0.3
 
<MyRelativeLayout>:
    Button:
        text:"Click One"
        background_color: 0,1,1,1
        pos_hint: {"x":0, "y":0}
 
    Button:
        text:"Click Two"
        background_color: 1,0,1,1
        pos_hint: {"right":1, "y":0}
 
    Button:
        text:"Click Three"
        background_color: 1,1,0,1
        pos_hint: {"center_x":.5, "center_y":.5}
 
    Button:
        text:"Click Four"
        background_color: 1,1,1,1
        pos_hint: {"x":0, "top":1} 
 
    Button:
        text:"Click Five"
        background_color: 0.8, 0.9, 0.2, 1
        pos_hint: {"right":1, "top":1}
You can also try this code with Online Python Compiler
Run Code

Output:

          Source: Codeloop

  • StackLayout: Below code is created by using the class and the filename is main.py.
     
from kivy.app import App
from kivy.uix.stacklayout import StackLayout
from kivy.uix.button import Button
 
class StackLayoutEx(App):
    def build(self):
 
        layout = StackLayout()
        for i in range(20):
            btn = Button(text = str(i), width = 40 + i * 5, size_hint=(None, 0.15))
            layout.add_widget(btn)
 
  return layout
 
 
 if __name__ == "__main__":
    window = StackLayoutEx()
    window.run()
You can also try this code with Online Python Compiler
Run Code

Output: 

      Source: codeloop

Now we will create, StakeLayout using the kivy file, and below, we have created the main.py file, a class that extends from StakeLayout, and the main app class we have just returned the class.
 

from kivy.app import App
from kivy.uix.stacklayout import StackLayout
from kivy.uix.button import Button
 
class MyStackLayout(StackLayout):
    pass
 
class StackLayoutEx(App):
    def build(self):
 
  return MyStackLayout() 
 
 if __name__ == "__main__":
    window = StackLayoutEx()
    window.run()
You can also try this code with Online Python Compiler
Run Code

 

Below is the .kv file and the filename is stacklayoutex.kv; the name should be the same as the app class name.


<MyStackLayout>:
    orientation:'rl-tb'
    padding:10
 
    Button:
        text:"Click One"
        size_hint: [.6, .2]
        background_color: 0,1,1,1

    Button:
        text:"Click Two"
        size_hint: [.4, .4]
        background_color: 1,0,1,1
 
    Button:
        text:"Click Three"
        size_hint: [.3, .2]
        background_color: 1,1,0,1
 
    Button:
        text:"Click Four"
        size_hint: [.4, .3]
        background_color: 1,1,1,1
You can also try this code with Online Python Compiler
Run Code



Output: 


            Source: codeloop

FAQs

1. What is a canvas in kivy?

Ans: The Canvas is the primary subject for drawing by a widget. 

2. What is the float layout in kivy?

Ans: FloatLayout performs the pos_hint and size_hint properties of its children.

3. What are Layouts?

Ans: Layouts are containers used to organize widgets in a particular manner.

Conclusion

In this article, we have discussed Multiple Layouts present in kivy; we have seen how they are used to style differently. If you find this article helpful, share it with your friends.

To know more about such topics, kindly visit our website, Code studio!

 

Live masterclass