Kivy - Relative Layout

The behavior of Relative Layout is very similar to that of FloatLayout. The main difference between the two is that positioning coordinates of child widgets in a relative layout are relative to the layout size and not the window size as is the case of float layout.

To understand what it means, consider the following UI designed with FloatLayout.

Kivy Relative Layout

When you resize the window, because of the absolute positioning in float layout, the placement of widgets is not proportional to the resized window. As a result, the interface design is not consistent.

Kivy Resize Window

The relative layout doesn't have such effect because the size and position of widgets is 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. Coordinates of the child widgets are always relative to the parent layout.

The RelativeLayout class is defined in the "kivy.uix.relativelayout" module.

from kivy.uix.relativelayout import RelativeLayout
rlo = RelativeLayout(**kwargs)

Example

The following code assembles labels, text boxes and a submit button in RelativeLayout.

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.button import Button
from kivy.uix.textinput import TextInput
from kivy.uix.relativelayout import RelativeLayout
from kivy.core.window import Window

Window.size = (720, 400)

class RelDemoApp(App):
   def build(self):
      rlo = RelativeLayout()
      
      l1 = Label(
         text="Name", size_hint=(.2, .1),
         pos_hint={'x': .2, 'y': .75}
      )
      rlo.add_widget(l1)
      t1 = TextInput(
         size_hint=(.4, .1), pos_hint={'x': .3, 'y': .65}
      )
      rlo.add_widget(t1)
      l2 = Label(
         text="Address", size_hint=(.2, .1),
         pos_hint={'x': .2, 'y': .55}
      )
      rlo.add_widget(l2)
      t2 = TextInput(
         multiline=True, size_hint=(.4, .1),
         pos_hint={'x': .3, 'y': .45}
      )
      rlo.add_widget(t2)
      l3 = Label(
         text="College", size_hint=(.2, .1),
         pos_hint={'x': .2, 'y': .35}
      )
      rlo.add_widget(l3)
      t3 = TextInput(
         size_hint=(.4, .1), pos=(400, 150),
         pos_hint={'x': .3, 'y': .25}
      )
      rlo.add_widget(t3)
      b1 = Button(
         text='Submit', size_hint=(.2, .1),
         pos_hint={'center_x': .5, 'center_y': .09}
      )
      rlo.add_widget(b1)
      return rlo
      
RelDemoApp().run()

Output

When the above code is executed, the application window shows the UI as follows −

Kivy Relative Layout UI

Note that unlike in the case of FloatLayout, resizing the window doesn't alter the proportional sizing and positioning of the widgets.

Kivy College Form

"kv" design language script

The "kv" file for producing the above UI instead of build() method in the App class is as follows −

RelativeLayout:
   Label:
      text:"Name"
      size_hint:(.2, .1)
      pos_hint:{'x':.2, 'y':.75}

   TextInput:
      size_hint:(.4, .1)
      pos_hint:{'x':.3, 'y':.65}
   
   Label:
      text:"Address"
      size_hint:(.2, .1)
      pos_hint:{'x':.2, 'y':.55}
   
   TextInput:
      multiline:True
      size_hint:(.4, .1)
      pos_hint:{'x':.3, 'y':.45}
   
   Label:
      text:"College"
      size_hint:(.2, .1)
      pos_hint:{'x':.2, 'y':.35}
   
   TextInput:
      size_hint:(.4, .1)
      pos:(400, 150)
      pos_hint:{'x':.3, 'y':.25}
   
   Button:
      text:'Submit'
      size_hint : (.2, .1)
      pos_hint : {'center_x':.5, 'center_y':.09}
Advertisements