Using size_hint: Set and Get widget Size in Kivy KV language

This section explains how to use Kivy’s size_hint and size properties. Although the widget size relative to the screen area is automatic, it is useful when you want to explicitly specify the widget size. It also explains how to get the size of a parent or child widget.

Specifying the Widget Size With the size_hint Property

The size_hint is a property of the Widget class that can be used in common with all widgets. It is used to specify the width and height of a widget as a percentage of its parent widget. When the screen size is changed, Kivy automatically determines the percentage of the widget and adjusts it automatically, but it is useful if you want to specify the percentage explicitly.

The argument of size_hint is [width_hint, height_hint]. The percentage is specified in the range 0 to 1, with 1 being 100%; 0 being 0 or None. In this case the minimum default value is applied.

• width_hint: width as a percentage of the parent widget’s width.
• height_hint: height as a percentage of the parent widget’s height.

The parent widget usually refers to the layout.

The default is [1,1], where a single widget fills the entire screen area. If padding or spacing has been set for the layout, the calculation is based on the area excluding those values.

size_hint: 1, 0.5

The above sets the width to 100% and the height to 50%.

It is also possible to set one of them to 0 or None. In this case, size_hint _min will be applied. size_hint_min is the minimum width or height of the widget. The default value is not known, but if you want to set a minimum value, set this one as well.

size_hint: 1, 0
# or
size_hint: 1, None

The above sets the width to 100% and the height to the minimum value.

size_hint: 0, 0
#or
size_hint: None, None

Setting both to 0 or None sets the minimum width and height.

To Fix the Widget Size

If you do not want Kivy to auto-adjust the widget, you can also fix the size of the widget.

Set size_hint to None and set it in conjunction with width or height. height or width allows you to set the widget size, which will be in pixels. By setting both of these properties, the minimum value will be the width or height value if size_hint is set to None. This allows the widget to be fixed.

size_hint: 1, None
height: 100

The above fixed the width to 100% and the height to 100. Now the widget height will not change when the screen size is changed.

To fix both the width and height of a widget, use the size property described below in conjunction.

 size_hint: None, None
 size: 100, 50

The above is fixed at 100 for width and 50 for height.

Although size_hint sets both width and height at the same time, it is also possible to set only width or height, or to set a minimum value.

Setting Individually

Sometimes it is better to take advantage of Kivy’s automatic adjustment and change only the settings you want to change.

Width and Height

size_hint_x: 0.5

width: 200

The size_hint_x sets the width of the widget. If you want to keep it fixed, set it to None and use it together with width.

size_hint_y: 0.7

height: 200

The size_hint_y sets the height of the widget. If you wish to keep it fixed, set it to None and use it in conjunction with height.

Set the Minimum Value of the Widget

By default, the unit is pixels.

size_hint_min_y: 100

The size_hint_min_y sets the minimum width of the widget.

size_hint_min_x: 100

The size_hint_min_x sets the minimum height of the widget.

Set the Maximum Value of the Widget

size_hint_max_y: 500

The size_hint_max_y sets the widget’s maximum width.

size_hint_max_x: 500

The size_hint_max_x sets the maximum height of the widget.

Specify the Widget Size With the Size Property

The size_hint was set as a percentage, whereas the size property is specified as a numerical value of width and height.

size_hint: None, None
size: 100、200

The size is specified by [width,height]. size_hint: None, None line is required.

Get Widget Size

Here are a few ways to get the size of a widget. This is useful if you want to calculate the size of a widget based on the size of its parent or the size of another widget.

Get the Size of Its Own Widget With KV Code

Use the self keyword to retrieve its own widget in kv code.

Button:
    size_hint: None, None # This statement is necessary.
    size: self.size

Setting its own size to size as above will not result in an error, but will probably result in the smallest button size.

It is usually passed as an argument or used to display its own size in text.

Button:
    size_hint: 1, 0
    text: str(self.size)
    on_press: callback_function(self.size)

Get the Size of Other Widgets With KV Code to

Use ids to get the size of other widgets in kv code.

Label:
    id: label
    text: 'text'
    size : 100,100
Button:
    text: 'text'
    size_hint: None, None # This statement is necessary.
    size: label.size

In the above, Label and Button are the same size.

Get the Size of Parent With KV Code

To get the size of the parent in kv code, use the parent keyword.

size_hint: None, None # This statement is necessary.
size: (int(self.parent.width * 0.1), int(self.parent.height * 0.1))

In the above, the width and height are set to 10% of the parent size (e.g., layout size or window size).

Get the Size of Children With Python Code

Since the root widget is the parent, the widgets configured in its tree are children. Child widgets can be retrieved at once in a list of children.

for child in self.children:
    print(f"Child {child.text} size: {child.size}, pos: {child.pos}")

The children are listed below and are expanded with a for statement. You can retrieve the widget’s properties using the temporary variable to which you assigned the object.

[<kivy.uix.label.Label object at 0x000002A2F9CB9400>, <kivy.uix.label.Label object at 0x000002A2EED82C80>, <kivy.uix.label.Label object at 0x000002A2EED80590>, <kivy.uix.label.Label object at 0x000002A2EED6DE10>, <kivy.uix.label.Label object at 0x000002A2EED63690>, <kivy.uix.label.Label object at 0x000002A2EED61080>, <kivy.uix.button.Button object at 0x000002A2EED3E040>]

If you want to get the size of individual child widgets, get them in the ids namespace.

print(f"Child size: {self.ids.button.size}, pos: {self.ids.button.pos}")

Get the Size of Parent With Python Code

Use the self keyword since the root widget is the parent and refers to itself.

print(f"Parent size: {self.size}, pos: {self.pos}")

The following article shows an example of code to get the position and size of other widgets.