Kivy Crash Course – Layout Management in Kivy

This is our fourth article in Kivy Crash Course, in this article we are going to talk about Layout Management in Kivy. so layouts are containers used to arrange widgets in a particular manner. there are different layouts in kivy that we will cover in this article. for example we have AchorLayout, BoxLayout, FloatLayout, RelativeLayout, GridLayout, ScatterLayout and StackLayout.

 

 

 

 

Also you can watch the complete video for this article

 

 

 

 

Kivy Crash Course Articles

1: Kivy Crash Course Introduction & Installation

2: Introduction to Kv Design Language 

3: Kivy Button with Callbacks

 

 

 

 

1: BoxLayout 

BoxLayout arranges children in a vertical or horizontal box. there are two ways that you can create boxlayout, using class and using kivy file. so first we are going to create using class file.

 

 

This code is for horizontal box layout.

In this code we have just set the orientation to horizontal.

 

 

 

And this code is for mix of horizontal and vertical layout.

In the above code we have created two boxlayout, the first one is vertical and the second one is horizontal

 

 

 

 

If your run the code this will be the result.

 

 

 

 

Let’s now create the BoxLayout using the kivy file.

 

OK now this is our main.py file, we have just created a class that extends from BoxLayout, and we have returned our class in our main app class.

 

 

 

And now this is our .kv file, and the name of the file is boxlayoutex.kv, make sure that the name should be the same as your app class name.

OK in the code we are going to define rules for our MyBoxLayout class. and we are going to just add some colorful buttons.

 

 

 

If you run the code this will be the result

 

 

 

 

2: AnchorLayout 

The AnchorLayout aligns its children to a border (top, bottom, left, right) or center. there are two ways that you can create anchorlayout, using class and using kivy file. so first we are going to create using class file.

 

So in this code we are going to create the AnchorLayout using the python file, iam going to call my python file main.py.

 

 

 

 

 

If you run the code this will be the result.

 

 

 

 

OK now let’s create the AnchorLayout using kivy file. this is my main.py file and in here i have created a class that extends from AnchorLayout, and in my main app class i have just returned the class.

 

 

 

 

And now this is our .kv file, and the name of the file is anchorlayoutex.kv, make sure that the name should be the same as your app class name.

OK in the code we are going to define rules for our MyAnchorLayout class. and we are going to just add some buttons.

 

 

 

The result will be as this image

 

 

 

 

3: FloatLayout

FloatLayout honors the pos_hint and the size_hint properties of its children. there are two ways that you can create floatlayout, using class and using kivy file. so first we are going to create using class file.

 

 

In this code we are going to create the FloatLayout using the python file, iam going to call my python file main.py.

 

 

 

 

If you run the code this will be the result

 

 

 

 

Now let’s create the FloatLayout using kivy file. this is my main.py file and in here i have created a class that extends from FloatLayout, and in my main app class i have just returned the class.

 

 

 

And now this is our .kv file, and the name of the file is floatlayoutex.kv, make sure that the name should be the same as your app class name.

 

In the kiv file we are going to define rules for our MyFloatLayout class. and we are going to just add some buttons.

 

 

 

Run the code this will be the result

 

 

 

 

4: GridLayout

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”. unlike many other toolkits, you cannot explicitly place a widget in a specific column/row. Each child is automatically assigned a position determined by the layout configuration and the child’s index in the children list. a GridLayout must always have at least one input  constraint: GridLayout.cols or GridLayout.rows. If you do not specify cols or rows, the Layout will throw an exception. there are two ways that you can create gridlayout, using class and using kivy file. so first we are going to create using class file.

 

 

 

In this code we are going to create the GridLayout using the python file, iam going to call my python file main.py.

 

 

 

 

 

So run the code and this will be the result

 

 

 

 

Now let’s create the GridLayout using kivy file. this is my main.py file and in here i have created a class that extends from GridLayout, and in my main app class i have just returned the class.

 

 

 

 

And now this is our .kv file, and the name of the file is gridlayoutex.kv, make sure that the name should be the same as your app class name.

 

In the kiv file we are going to define rules for our MyGridLayout class. and we are going to just add some buttons.

 

 

 

 

Run the code this will be the result

 

 

 

 

5: RelativeLayout

This layout allows you to set relative coordinates for children. If you want absolute positioning, use the FloatLayout. the RelativeLayout class behaves just like the regular FloatLayout except that its child widgets are positioned relative to the layout. when a widget with position = (0,0) is added to a RelativeLayout, the child widget will also move when the position of the RelativeLayout is changed. The child widgets coordinates remain (0,0) as they are always relative to the parent layout.

 

 

 

Now let’s create the RelativeLayout using kivy file. this is my main.py file and in here i have created a class that extends from RelativeLayout, and in my main app class i have just returned the class.

 

 

 

 

This is our .kv file, and the name of the file is relativelayoutex.kv, make sure that the name should be the same as your app class name.

 

In the kivy file we are going to define rules for our MyRelativeLayout class. and we are going to just add some buttons.

 

 

 

 

Run the code and this will be the result

 

 

 

 

 

6: StackLayout

The StackLayout arranges children vertically or horizontally, as many as the layout can fit. The size of the individual children widgets do not have to be uniform. there are two ways that you can create stacklayout, using class and using kivy file. so first we are going to create using class file.

 

 

 

In this code we are going to create the StackLayout using the python file, iam going to call my python file main.py.

 

 

 

 

So run the code and this will be the result

 

 

 

Now let’s create the StackLayout using kivy file. this is my main.py file and in here i have created a class that extends from StackLayout, and in my main app class i have just returned the class.

 

 

 

This is our .kv file, and the name of the file is stacklayoutex.kv, make sure that the name should be the same as your app class name.

 

 

 

 

Now run the code and this will be the result