In this Kivy Tutorial we are going to talk about Kivy Layout Management, when you are developing a GUI application, layout management is one the most important point,  layouts are containers used to arrange widgets in a particular manner. there are different layouts in kivy that we will cover, for example we have AchorLayout, BoxLayout, FloatLayout, RelativeLayout, GridLayout, ScatterLayout and StackLayout.

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.

In the code first we have create a BoxLayout object and we have specified the orientation as horizontal, we have created four buttons and after that we have these buttons in the BoxLayout using add_widget() method.

Run the complete code and this is the result.

This code is mix of horizontal and vertical layout, basically we create two BoxLayout with vertical and horizontal orientation and after that we add widgets in the layouts.

Run the complete code and this is the result.

OK now we want to create BoxLayout using Kivy code, this is our Python code and in here we have created two classes, the first class is for our BoxLayout and you can see that we are extending from BoxLayout, the second class extends from App class and we have just returned our first class in the second main 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.

In the kivy file we have set the orientation for our BoxLayout as horizontal and we have added some buttons to the layout.

Run the complete code and this is the result.

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.

Run the complete code and this is the result.

Now we want to create our AnchorLayout using Kivy Design Language, first make a Python file, and add this code. we have created two classes, the first class extends from the AnchorLayout, and it is just an empty class.

Create a .kv file, make sure that your kivy file name should be the same as your main class name, for example in here our main class name is AnchorLayoutEx, and the kv file name should be anchorlayoutex.kv. in this file we have added anchors for the x and y positions, also we have added two buttons in the anchor layout.

Run the complete code and this is the result.

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 the code first we have created a FloatLayout object, also i have added size for the float layout, after that i have created a button, we have added the button in the FloatLayout.

Run the complete code and this is the result.

Now let’s create the FloatLayout using kivy file,  we have created a class that extends from FloatLayout and and it is an empty class.

This is our kivy file name and it should be the same as the main class name, in our case it should be floatlayoutex.kv, because our main class name is FloatLayoutEx. we have added two buttons in the Float Layout.

Run the complete code and this is the result.

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. we have created our GridLayout, also we have specified the number of columns that we want, when you want to create the GridLayout, you need to give the number of columns or number of rows for the GridLayout, 

Run the complete code and this is the result.

Now let’s create the GridLayout using kivy file. this is our Python code, our class extends from GridLayout.

And this is our .kv file, make sure that the file name should be the same as the main class name. we have added 2 columns to the GridLayout, also we have added four button in the GridLayout.

Run the code and this is the result.

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 our Python file and our class extends from FloatLayout 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. we have added some buttons to the layout.

Run the code and this is the result.

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.

First we want to create our StackLayout using Python code.

Run the code and this is the result.

Now let’s create the StackLayout using kivy file, this is our Python file, our class extends from the StackLayout.

And this is our kivy file, and we have added four buttons in the layout.

Run the complete code and this is the result.