Relative View Extension | Overlap Like a Pro | Complex UIs made simple in Kodular

Relative View Extension

Relative is a simple and easy to use overlapping extension based on Relative Layout which enables you to create complex overlapped UIs easily. The UI is persistent across devices. It doesn’t matter if the device is wide or long. It keeps the UI as it is in all devices.

Note : The extension is already made by deep host but as many users try to stay away from his extensions because of specific reasons. That’s why I made it.

Blocks

Create

Use this block to create a Main Layout that will hold all others views. You can use horizontal or vertical arrangement for this purpose.

AddView

Add views to you the main layout created using the about block. Use gravity blocks from extension to place component at different locations.

combine

Use this block to combine different gravity like Top and Left, Top and Right etc.

gravities

Available Gravity blocks in the extension

Screenshots

Downloads

AIX File : RelativeView.aix (5.9 KB)

Tutorial

How to Overlap Components Like a pro :sunglasses::sunglasses: | YouTube

Hope You Like It

As always I hope you like this extension and find it useful. I would to love to see my extension being used in your projects. Thanks for your time.

20 Likes

Great extension.

1 Like

Very nice extension @zainulhassan :v: :sunglasses: :+1:

:heart_eyes: :smiling_face_with_three_hearts: :heart_eyes:

1 Like

Good extension :clap: :+1:

1 Like

Nice work!! :smiley:
What about giving gravity blocks for top-right.top-left, bottom-right, bottom-left, etc similar as other gravity blocks? Currently, will have to use three different block for adjusting any of the the gravity mentioned above. The same can be reduced to only one block if you can provide direct blocks for the same(for each one). Just a suggestion :wink:

3 Likes

@zainulhassan Congratulations !!!
I’m going to test it because I’m using blocks animation, but I have problems because certain areas of the screen are “inaccessible” (the problem may be that I’m doing something wrong, but I think your extension will solve it)

There is a space that I cannot reduce or use. ( Animations Component )

1 Like

There is a trick to use one block only. Just use a number block from numbers panel to add the gravity. Like for top-left you can use ‘51’ . For more info head over to : Gravity | Android Developers.

Just plus the gravities you want to add. Example Below :
Top = 48
Left = 3
Top-Left = 51
and Hurray now you can use number block only

1 Like

Oh that’s interesting!! I will surely check it out! :+1:

But then one has to remember those individual numbers I think :thinking:
So still I guess the solution in the form of blocks will be the best :sweat_smile:

1 Like

Wow, useful Extension @zainulhassan Keep it up :partying_face: :+1:

1 Like

o great extension

1 Like

Now thats something difficult but you can also refer to the link I have shared to find values of different locations

Please add padding option.

1 Like

you can set padding using decoration component

1 Like