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.


License

I, Zain Ul Hassan, attest that I am the author of the RelativeView extension, grant that the extension included in this project is free and that MIT has a non-exclusive irrevocable license to republish the extension as part of the project file for the purposes of the MIT App Inventor Appathon 2021.

51 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 )

2 Likes

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

Can you please tell the value for Bottom - Right ?
(using to show Green Online Dot for Chat UI)

I tried to use it in Vertical scroll arrangement, but a runtime error appeared stating: ScrollView can host only one direct child,
Can’t it work with scroll arrangements?

Dont use scroll view

Actually I’ve registered one vertical scroll arng in bottom sheet. And I want that when the user scrolls a little bit, a button appears, clicking on which, the user can return to the top of the scroll view. So, I want that button as overlay.

Sorry. I tested end and start and did not understand the difference … I think I am very tired …

3 Likes

Thank You !

6 Likes

Very Nice Extension