Layouts In Python | BoxLayout, GridLayout, and RelativeLayout using Kivy

byHifza •July 17, 2025

0

https://www.kodularfreeaia.com/2025/07/layouts-in-python-boxlayout-gridlayout.html

Hello everyone! Welcome back to Kodular Free AIA. This is Hifza, and today I’m going to show you some important layouts that you’ll use when creating applications in Python with Kivy.

In the previous tutorial, we explored some essential Kivy components that help you build interactive Python apps. Now, we’ll focus on layouts, which are crucial for designing clean and structured UIs.

Let’s start with one of the most commonly used layouts: the BoxLayout. This layout is extremely useful and you'll likely use it in almost every project you build.

BoxLayout in Kivy

Just like other components, the first step is to import it. So, we’ll add the following line:

from kivy.uix.boxlayout import BoxLayout

Next, we’ll define our main class and the build() method. Inside build(), we’ll create an instance of the BoxLayout:

layout = BoxLayout(orientation='vertical')

The orientation can be set to either 'vertical' or 'horizontal'. For this example, we’re going with vertical.

Now, instead of returning a widget like a progress bar or label, we simply return the layout itself:

return layout

And that’s it! This is the basic structure you need to define and use a BoxLayout in your Kivy Python app. Now, when you run this application, you won’t see anything on the screen—because right now, we’ve only defined the layout. The layout itself doesn't display anything unless we add some components to it.

So, to make the BoxLayout visible and functional, let’s add a few components. Since we’ve already worked with labels in previous tutorials, we’ll use those here.

First, import the Label class:

from kivy.uix.label import Label

Now, we’ll add these label widgets to the BoxLayout using the add_widget() method.

Let’s add the first label:

layout.add_widget(Label(text='Item 1'))

And now, a second label:

layout.add_widget(Label(text='Item 2'))

Once you've added these labels, save the file and run your application again.

Now you’ll see that our vertically oriented BoxLayout displays two items—“Item 1” and “Item 2”—stacked on top of each other.

And that’s how you use BoxLayout in your Kivy applications to arrange widgets vertically or horizontally!

GridLayout

Now let’s talk about another very important layout in Kivy: the GridLayout. If you’ve watched my previous Kodular projects, you’re probably already familiar with GridLayouts—we’ve used them quite a few times to structure our apps.

So, let’s see how we can implement GridLayout in a Kivy Python application.

Just like we imported BoxLayout earlier, now we’ll import GridLayout:

from kivy.uix.gridlayout import GridLayout

We’ll keep the Label import from earlier, since we’ll use labels again to display content in the grid.

Inside the build() method, instead of using BoxLayout, we’ll create a GridLayout:

layout = GridLayout(cols=3)

With GridLayout, you define the number of columns, and Kivy automatically arranges your widgets row by row. In this case, we’ve set 3 columns.

Let’s now populate the GridLayout using a loop. For example, let’s add 6 labels:

for i in range(6):
    layout.add_widget(Label(text=f'Item {i+1}'))

This loop adds six label widgets to the layout, and Kivy arranges them into 2 rows and 3 columns.

Save your file and run the app. You should now see six items arranged in a clean 3-column grid.

And that’s how you use GridLayout in your Python Kivy applications! It’s a powerful layout for creating organized UIs, especially when you want your widgets aligned in rows and columns.

RelativeLayout in Kivy

Now let’s talk about another layout: RelativeLayout. This layout allows you to position widgets based on their relative position within the screen, giving you more flexibility in your UI design.

Just like the previous layouts, we start by importing it:

from kivy.uix.relativelayout import RelativeLayout

We’ll also import the Label or any widget you want to display:

from kivy.uix.label import Label

In your App class, create the layout and add widgets with positioning:

class MyApp(App):
    def build(self):
        layout = RelativeLayout()
        layout.add_widget(Label(text='item 1', pos=(100,100))
        return layout

Save and run your file. You’ll see your labels positioned according to the pos values you defined.

If you enjoyed this video, please like, subscribe, and hit the bell icon so you don’t miss the next lesson.
And if anything was unclear, drop a comment — I’m always here to help.

Thanks for watching — I’ll see you in the next tutorial.
Until then, peace and happy coding!