Kivy Layouts Overview: Let’s get your GUI arranged

Kivy is one of the famous GUI libraries offered in Python. In this article, I will be going over various layout options provided by Kivy Library.

Layouts

BoxLayout

• The widgets cover the entire space by default
• Stacks the different element horizontally as a default behaviour. To change oreintation,
• Sizes are equal by default
• It’s rendered based on the sequence it’s defined

Changing its behavior

• Changing Orientation:
  • By default, widgets are stacked horizontally
  • You can change the orientaiton to vertical by definining, orientation = ‘vertical’ (by default, it’s horizontal)
• Changing Size:
  • Simply defining size using the size property will not work within a BoxLayout. In order to use size, we need to first set size_hint = None, None (more on this in a while)
  • size can be defined in two ways: size: “100dp”, “50dp” (widht and height) or you could use width and height seperately as well like, width: “100dp” height: “50dp”
  • dp stands for density pixel, this causes the size to be same on different pixel density screens
  • size_hint on the other hand takes proportions as its input.
  • For example if you want 1 of your widget to cover 50% of width and 20% of height, then you can define size_hint as, size_hint: .5, .2
  • You can mix and match both size_hint and size.
  • For example, if you want 50% width and a fixed height of 50dp then you can set both the properties as, size_hint: .5, None height: “50dp”
  • Defining None for the height in size_hint let’s us use height property
• Changing Position:
  • The property used for changing position is pos_hint, it takes in a dictionary with key values for x-axis and y-axis and for values you can enter the desired position
  • For changing position on the x axis you can use one of the following: x, center_x or right
  • For changing position on the y axis you can use one of the following: y, center_y or top
  • x and y stands for the bottom left corner of the widget
  • center_x, center_y, top, and right are pretty self explanatory
  • Let’s say you want to place your widget 20% from the left, you can set pos_hint as: pos_hint: { ‘x’ : .2 }
• Create spacing
  • In order to create spacing between widgets we can use, spacing and set it to the desired value

---

AnchorLayout

Changing its behavior

• Changing Size:
  • You can use size_hint similar to BoxLayout to change the size of the widgets
• Changing Position:
  • The properties used for changing position are anchor_x and anchor y. It takes in values left, center or right for the x-axis and top, center or bottom for the y-axis
  • Unlike BoxLayout we cannot define positions for multiple widgets within AnchorLayout
  • AnchorLayout is used for poisitioning and sizing other layouts. So if we have 2 widgets, which we wan to place side by side and postion them in the top center of the screen then we can use AnchorLayout, set it’s position to top center using anchor_x: ‘center’ and anchor_y: ‘top’, then use BoxLayout and define the widgets inside that

---

GridLayout

• It needs one of the two properties:
  • rows: int, default=1, number of rows you want in your layout
  • cols: int, default=1, number of columns you want in your layout
  • If your number of widgets can’t fit in the defined rows and columns, then they are set to the bottom left of the screen

Changing its behavior

• Changing Size:
  • We can use size_hint to update the size of the widgets, but make sure to apply the same property for all the widgets in the desired row or column.
  • Let’s say we have 2 widgets on 2 rows and you want to update size of one of those widgets, then unfortunately we can’t do that. We would need to apply the size_hint on both the widgets.

StackLayout

• Unlike the BoxLayout, StackLayout stacks items on multiple rows and we need to give size of each item

Changing its behavior

• Changing Size:
  • We can use the combination size_hint and size to update the size of individual elements
• Changing Orientation:
  • The property to update the orientation is orientation itself
  • The different values which can be used to set the orientation are: lr-tb, rl-tb, lr-bt, rl-bt
  • l -> left, r -> right, t -> top, and b -> bottom
  • The default value is: lr-tb
• Adding Padding:
  • You can add padding around the StackLayout using padding property
  • It takes in 4 values in a tuple, padding: (left, top, right, bottom)
• Adding Spacing:
  • You can add spacing around the items within StackLayout using spacing property
  • It takes in 2 values in a tuple, spacing: (horizontal, vertical)

---

ScrollView

• If we need to any scroll feature to our widgets, we can simply define them under ScrollView
• We need to set a constant size using size: 1, None (here, I have set height as None, so that I can set a fixed height). Then I can simply set the minimum height of that widget as height: self.minimum_height, this sets the widget size equal to the screen size thus giving us capability to scroll the widget.

---

There are some other layouts provided by Kivy, like FloatLayout, RelativeLayout, PageLayout, and ScatterLayout. For more information about layouts, you can check out the official Kivy documentation.