kivy
  1. kivy-layouts-in-kivy
PreviousNext

Layouts in Kivy

Kivy is a Python framework designed for creating touch-based user interfaces. Kivy uses Layouts to define the positioning and sizing of widgets.

Types of Layouts in Kivy

There are different types of layouts in Kivy that allow you to arrange widgets in different ways. Some of the popular types of layouts are:

  1. BoxLayout
  2. FloatLayout
  3. GridLayout
  4. ScatterLayout

BoxLayout

BoxLayout is the simplest layout in Kivy and is used to arrange widgets either horizontally or vertically as per the orientation value set.

Syntax

BoxLayout(orientation='horizontal', **kwargs)

Example

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


class BoxLayoutApp(App):
    def build(self):
        layout = BoxLayout(orientation="vertical")
        button1 = Button(text="Button 1")
        button2 = Button(text="Button 2")
        layout.add_widget(button1)
        layout.add_widget(button2)
        return layout

my_app = BoxLayoutApp()
my_app.run()

Output

The code above will display a window containing two buttons arranged vertically.

FloatLayout

FloatLayout is used to position widgets in a precise manner. It is a flexible layout that places widgets at specific x, y co-ordinates.

Syntax

FloatLayout(**kwargs)

Example

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


class FloatLayoutApp(App):
    def build(self):
        layout = FloatLayout()
        button1 = Button(text="Button 1", pos_hint={'x': 0.2, 'y': 0.2}, size_hint=(0.2, 0.2))
        button2 = Button(text="Button 2", pos_hint={'x': 0.5, 'y': 0.5}, size_hint=(0.2, 0.2))
        layout.add_widget(button1)
        layout.add_widget(button2)
        return layout

my_app = FloatLayoutApp()
my_app.run()

Output

The code above will display a window containing two buttons at specific x, y co-ordinates in the window.

GridLayout

GridLayout is a layout in Kivy that allows you to place widgets in a grid format.

Syntax

GridLayout(cols=1, **kwargs)

Example

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


class GridLayoutApp(App):
    def build(self):
        layout = GridLayout(cols=2)
        button1 = Button(text="Button 1")
        button2 = Button(text="Button 2")
        button3 = Button(text="Button 3")
        button4 = Button(text="Button 4")
        layout.add_widget(button1)
        layout.add_widget(button2)
        layout.add_widget(button3)
        layout.add_widget(button4)
        return layout

my_app = GridLayoutApp()
my_app.run()

Output

The code above will display a window containing four buttons arranged in a 2 x 2 grid format.

ScatterLayout

ScatterLayout is a layout in Kivy that allows you to transform and translate the children widgets by touch.

Syntax

ScatterLayout(**kwargs)

Example

from kivy.uix.scatter import Scatter
from kivy.uix.label import Label
from kivy.app import App


class ScatterLayoutApp(App):
    def build(self):
        layout = Scatter()
        text = "[b]Welcome to Kivy[/b]\nLearn how to create touch-based user interfaces\n"
        label = Label(text=text, font_size='20sp', markup=True, size_hint=(None, None),
                      size=(500, 500))
        label.x = 10
        label.y = 500
        layout.add_widget(label)
        return layout


my_app = ScatterLayoutApp()
my_app.run()

Output

The code above will display a window containing a label that can be dragged, rotated, or scaled using touch events.

Conclusion

In this tutorial, you have seen the different types of layouts in Kivy and how to use them to arrange widgets in different ways. By mastering these layouts, you can create a wide range of user interfaces for your Kivy applications.

WidgetsProperties
Published on: