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.

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.

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 −

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

“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}