Python | Relative linking in Kivy using a .kv file



Relative layout:

  • This layout works the same as FloatLayout, but the positioning properties (x, y, center_x, right, y, center_y and top) refer to the size of the layout, not the size of the window.
  • In reality, regardless of absolute or relative position, widgets move when the layout is repositioned.
  • The available keys are pos_hint (x, center_x, right, y, center_y and top) are useful for edge alignment or centering. 
    For example:
    pos_hint: {& # 39; center_x & # 39;:. 5, & # 39; center_y & # 39;:. 5} will align the widget to the center, regardless of the window size.

The first thing we need to do to use RelativeLayout is to 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 ie 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)}

Notes:
Floatlayout and RelativeLayout support absolute and relative positioning depending on whether pos_hint or pos is used. But if you want absolute positioning, use 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

## Sample Python application demonstrating
## working with RelativeLayout in Kivy using a .kv file

 
########################## ######################## #
# import modules

  

import kivy 

 
# Your application base class inherits from the application class.
# app : always refers to your application instance

from kivy.app import App 

 
# This layout allows you to set relative coordinates for children.

from kivy.uix .relativelayout import RelativeLayout

 
# To change the default KIVY settings
# we use this config module and

from kivy.config import Config 

 
# 0 off 1 on as true / false
# You can use 0 or 1 & amp; & amp; True or False

Config. set ( `graphics` , ` resizable` , True

 

  
# create the root widget used in the .kv file

class RelativeLayout (RelativeLayout): 

pass

 
# create an application class named
# .kv file must be named Relative_Layout.kv

class Relative_LayoutApp (App): 

  # build () definition

def build ( self ): 

# return an instance of the root class

return RelativeLayout () 

 
# run application

if __ name__ = = "__ main__"

Relative_LayoutApp (). run () 

Implementation of the .kv file :

# .kv implementation of the RelativeLayout file

 
# create a button
& lt ; Button & gt ;:

# text size on the button

font_size: 20

 

# create button

# button 20% width and 20%

# layout heights

  size_hint: < / code> 0.2 , 0.2

 
& lt; RelativeLayout & gt ;:

 

# Canvas is the root

# used for drawing with the widget.

 

canvas:

Color:

rgb: 0 , 1 , 1

Rectangle:

  # create rectangle

# pos = 20% and size = 60% of layout

  pos: [ 0.2 * coord for coord in self .size]

  size: [ 0.6 * coord for coord in self . size]

 

 

# create a button

 

Button:

 

text: "B1"

 

background_color: 0.1 , 0.5 , 0.6 , 1

 

  # located at 0% on the x-axis and 0% on the y-axis

# bottom left, that is, x, y = 0, 0 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

Exit :

There are various sizes of window images that show how it adjusts to the window, i.e. relative

Image 1:

Image 2:

Image 3:

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