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()
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()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
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()
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()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]
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()
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()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}
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()
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()
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,1Output:
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()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}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()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()
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
Output:
Source: codeloop
139+ registered 
