Python | Relative Layout in Kivy using .kv file

Kivy is a platform independent GUI tool in Python. As it can be run on Android, IOS, linux and Windows etc. It is basically used to develop the Android application, but it does not mean that it can not be used on Desktops applications.

Relative Layout:

  • This layout operates in the same way as FloatLayout does, but the positioning properties (x, y, center_x, right, y, center_y, and top) are relative to the Layout size and not the window size.
  • In reality regardless of absolute and relative positioning, the widgets are moved when the position of the layout changes.
  • The available pos_hint keys (x, center_x, right, y, center_y, and top) are useful for aligning to edges or centering.
    For example:
    pos_hint: {‘center_x’:.5, ‘center_y’:.5} would align a Widget in the middle, no matter what the size of the window is.

The first thing we need to do to use a RelativeLayout is import it.

from kivy.uix.relativelayout import RelativeLayout

We can do relative positioning by:
pos_hint: provide hint of position.

We can define upto 8 keys i.e. it takes arguments in form of dictionary.
pos_hint = {“x”:1, “y”:1, “left”:1, “right”:1, “center_x”:1, “center_y”:1, “top”:1, “bottom”:1(“top”:0)}

Note:
Floatlayout and RelativeLayout both support absolute and relative positioning depending upon whether pos_hint or pos is used.But If you want absolute positioning, use the FloatLayout.

Basic Approach to create Relative Layout:
1) import kivy
2) import kivy App
3) import Relativelayout
4) Set minimum version(optional)
5) create class for layout 
6) create App class:
        - define build() function
7) Set up.kv file(name same ass the App class)
8) return Layout Class
9) Run an instance of the class

 
Below is the Implementation:

main.py file

filter_none

edit
close

play_arrow

link
brightness_4
code

## Sample Python application demonstrating the 
## working of RelativeLayout in Kivy using .kv file 
  
################################################### 
# import modules 
  
import kivy 
  
# base Class of your App inherits from the App class. 
# app:always refers to the instance of your application 
from kivy.app import App 
  
# This layout allows you to set relative coordinates for children.
from kivy.uix.relativelayout import RelativeLayout
  
# To change the kivy default settings 
# we use this module config 
from kivy.config import Config 
      
# 0 being off 1 being on as in true / false 
# you can use 0 or 1 && True or False 
Config.set('graphics', 'resizable', True
  
  
# creating the root widget used in .kv file 
class RelativeLayout(RelativeLayout): 
    pass
  
# creating the App class in which name 
#.kv file is to be named Relative_Layout.kv 
class Relative_LayoutApp(App): 
    # defining build() 
    def build(self): 
        # returning the instance of root class 
        return RelativeLayout() 
  
# run the app 
if __name__ == "__main__"
    Relative_LayoutApp().run() 

chevron_right


.kv file implementation :

filter_none

edit
close

play_arrow

link
brightness_4
code

#.kv file implementation of RelativeLayout 
  
# creating button feature 
<Button>:
        # size of text on button
        font_size: 20
              
        # creating button 
        # a button 20 % of the width and 20 % 
        # of the height of the layout 
        size_hint: 0.2, 0.2
  
<RelativeLayout>:
  
        # The Canvas is the root object
        # used for drawing by a Widget. 
  
        canvas:
                Color:
                        rgb:0, 1, 1
                Rectangle:
                        # creating rectangle
                        # pos = 20 % and size = 60 % of the layout
                        pos:[0.2 * coord for coord in self.size]
                        size:[0.6 * coord for coord in self.size]
  
  
        # creating the button
  
        Button:
              
                text:"B1"
  
                background_color: 0.1, 0.5, 0.6, 1
              
                # positioned at 0 % in x axis and 0 % in y axis 
                # from botton left, i.e x, y = 0, 0 from bottom left: 
                pos_hint: {"x":0, "y":0
  
        Button: 
                text:"B2"
                background_color: 1, 0, 0, 1
                pos_hint: {"right":1, "y":0
  
                      
        Button: 
                text:"Yash"
                background_color: 0.4, 0.5, 0.6, 1
                pos_hint: {"center_x":.5, "center_y":.5
  
        Button: 
                text:"B3"
                background_color: 0, 0, 1, 1
                pos_hint: {"x":0, "top":1
  
        Button: 
                text:"B4"
                background_color: 0.8, 0.9, 0.2, 1
                pos_hint: {"right":1, "top":1

chevron_right


Output:

Different size of window images are there which show that How it adjust itself accordingly to window i.e relatively

Image 1:

Image 2:

Image 3:

Reference: https://kivy.org/doc/stable/api-kivy.uix.relativelayout.html



My Personal Notes arrow_drop_up

Competative Programmer

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.