RelativeLayout

Relative Layout

• Now since you are aware of Float Layout we should understand that the only difference between RelativeLayout and FloatLayout is that its child widgets are positioned relative to the layout.
• This layout works similarly to FloatLayout, with the exception that the positioning properties (x, y, center x, right, y, center y, and top) are related to the Layout size rather than the window size.
• In reality, the widgets are relocated when the layout's position changes, regardless of absolute or relative positioning.
• When a widget with position=(0, 0) is added to RelativeLayout, the child widget will now move if the position of RelativeLayout is altered. Because child widget coordinates are always relative to the parent layout, they remain the same, i.e. (0, 0).
• The pos hint keys (x, center x, right, y, center y, and top) can be used to center or align to edges.

Example

Consider the following scenario:

pos hint: 'center x':.4, 'center y':.4 this would align the Widget in the middle no matter what is the size of the window.

Approach:

1. Install kivyApp
   Use this command to install kivy on a local PC in the command prompt
   python -m pip install kivy[full]
2. Import kivy in the python file
3.  Import RelativeLayout

             from kivy.uix.relativelayout import RelativeLayout

1. Configure the minimum version (optional)
2.  Make an App class.
3. Layout/widget/Class should be returned (according to requirement)
   create App class:
   - define build() function
4. Create a class instance.
5. To finally run use this command in the command prompt 
   python file_name.py 

For my case, it would look like this

Code

File Name in my case is kivysamplerun

# This is Sample Python application showing
# the working of RelativeLayout in Kivy
 
# Module imports
import kivy
 
# base Class of your main App is inherited from the App class.
# app:Here app refers to the particular instance of your program or application
from kivy.app import App
 
# creates the button in kivy
# if it is not imported the it will show the error
from kivy.uix.button import Button
 
# This layout allows us to set the relative coordinates for children.
from kivy.uix.relativelayout import RelativeLayout
 
# we use this module config to change the default settings of Kivy
from kivy.config import Config
     
# 0 being off 1 being on
Config.set('graphics', 'resizable', 1)
 
# creating the App class
# A Kivy app demonstrating the working of relativelayout sample function
class Relative_Layout_Demo(App):
     
    def build(self):
 
        # creating Relativelayout which will store all the elements
        rl = RelativeLayout()
       
        # creating childred button
        # size of button is 25 % by height and width of layout
        # position is bottom left that is x = 0, y = 0
        b_1 = Button(size_hint =(.25, .25),
                    pos_hint ={'x':0, 'y':0},
                    text ="Hello")
         
        # position is bottom right that is right = 1, y = 0
        b_2 = Button(size_hint =(.25, .25),
                    pos_hint ={'right':1, 'y':0},
                    text ="How")
 
        b_3 = Button(size_hint =(.25, .25),
                    pos_hint ={'center_x':.5, 'center_y':.5},
                    text ="Are")
 
        b_4 = Button(size_hint =(.25, .25),
                    pos_hint ={'x':0, 'top':1},
                    text ="You")
 
        b_5 = Button(size_hint =(.25, .25),
                    pos_hint ={'right':1, 'top':1},
                    text ="Doing")
         
         
 
        # adding button to widget
        rl.add_widget(b_1)
        rl.add_widget(b_2)
        rl.add_widget(b_3)
        rl.add_widget(b_4)
        rl.add_widget(b_5)
     
         
        # returning widget
        return rl

# creating the object root for RelativeLayoutApp() class  
Application = Relative_Layout_Demo()
# Run the Kivy app
Application.run()

You can also try this code with Online Python Compiler

Run Code

Output

FAQs

What is the application of kivy?
Kivy is a Python-based multi-platform application development framework. It enables us to create cross-platform programs for Windows, Linux, Android, macOS, iOS, and the Raspberry Pi.

Can we implement the Relative layout in kivy without using python language?
Yes, we can use the .kv file to implement the relative layout in kivy.

What is the use of a Relative layout?
A Relative Layout is a very powerful utility tool for designing a user interface because it can easily eliminate nested view groups and keep your layout hierarchy flat, which improves the performance.

Conclusion

In this article, we have extensively discussed the Relative Layout in kivy. You can check out the entire study plan for big data from here. To read the introduction of Hadoop and its ecosystem you can refer to this. If you are willing to learn more about databases you can refer to this. 

"We hope that this blog has helped you enhance your knowledge regarding this problem, and if you would like to learn more, check out our articles on  Coding Ninjas Studio. To be more confident in data structures and algorithms, try out our DS and Algo Course. For interview experiences, you can refer here. We have various guided paths for various theory subjects like DBMS, OS, and Aptitude you can check out this from here. You can give the various mock tests to excel your interview preparation from here. Do upvote our blog to help other ninjas grow. Happy Coding!”