Kivy Tutorials

Using size_hint: Setting Widget Size in Kivy KV Language

This article can be read in about 6 minutes.

This section describes how to use Kivy’s size_hint property. Although widget size to the screen area is automatic, it is useful when you want to explicitly specify the widget size.

Specifying the Size of a Widget 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 width or height can be fixed as the minimum value when set to None.

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.

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

The above sets the width of the widget. If you want to make it fixed, use it together with width.

size_hint_y: 0.7

The above sets the height of the widget. Use with height if you want to fix it.

Set the Minimum Value of the Widget

By default, the unit is pixels.

size_hint_min_y: 100

The above sets the minimum width of the widget.

size_hint_min_x: 100

The above sets the minimum height of the widget.

Set the Maximum Value of the Widget

size_hint_max_y: 500

The above sets the widget’s maximum width.

size_hint_max_x: 500

The above sets the maximum height of the widget.

Comment

Copied title and URL