Make Top Sheet in Kodular

[nikzdreamer2001 (Nikhil Kumar Gupta)]

Hey Guys, Nikhil here,
So first of all i’d like to @themaayur as he created a topic on how to create top sheet,

A Top Sheet Extension

Hello, @ExtensionDevelopers is anyone free or have time to develope a extention for top sheet similar to bottom sheet. As I need it for my current project You can use this repo in GitHub @vknow360 thanks for finding this code As you can see you can do much more than a top sheet using this, but I need a top sheet. [dialogplus] This would be a good contribution for community I hope someone will do it. Thanks If others also need this they can use the poll poll

But right now there is no extension to create top sheet that’s why i have tried to make it with animation utils…

Designer

Blocks

Preview

AIA

TopSheet.aia (3.9 KB)

APK

TopSheet (1).apk (5.0 MB)

Logic behind it

Animation util gives positioning of component with respect to Parent Arrangement…

That’s why i have set height of MainUI_VA and DimmerVA to Vertical_Arrangement1.height
so that dimmer will get hidden…

Is it Amazing?

• Yes
• No

Hope you like it and understand it… if there is any issue you can ask…

[themaayur (Mayur Berad)]

@nikzdreamer2001 Thanks for helping me and giving so much time for it.

[nikzdreamer2001 (Nikhil Kumar Gupta)]

@themaayur

Thanks for helping me and giving so much time for it.

It’s okay

[Yoshi (KidKoder)]

Now that’s a real UI!

Very nice Work! I hope to see other stuff like that from you, @nikzdreamer2001! Keep it up! Thanks for sharing your knowledge with others.

Yoshi

[nikzdreamer2001 (Nikhil Kumar Gupta)]

@Yoshi

Very nice Work!

Thank you so much

@Yoshi

I hope to see other stuff like that from you

You have to wait because i am busy on a project and that is very unique also…So first of all i have to complete that… and from 16 June onward i have my online exam of semester… So these days i have to study also(Boring work …).

@Yoshi

Thanks for sharing your knowledge with others.

That is why community is for…

[Mateja]

Mind sharing screenshots?

[WatermelonIce (Bryan)]

so with this idea, we can do bottom sheet without using the bottom sheet component?

[nikzdreamer2001 (Nikhil Kumar Gupta)]

Yes we can do…

[saddam_horti786 (Saddam Husain)]

Is that will work for all devices means dynamic in size in all devices

[nikzdreamer2001 (Nikhil Kumar Gupta)]

Yes it will work on every device size…

[saddam_horti786 (Saddam Husain)]

How we can create custom floating button using same logic

[nikzdreamer2001 (Nikhil Kumar Gupta)]

Logic is same but little bit more complex and but can’t explain now because these days I don’t have time because of upcoming online exams

[nikzdreamer2001 (Nikhil Kumar Gupta)]

@Mateja

Mind sharing screenshots?

Shared right now. i’ll remember from next time…

[bestprintsf (Leandro Z)]

Thank so much for sharing this !!!

[vknow360 (Sunny Gupta)]

Hi @nikzdreamer2001
Good job
But I have a doubt.
Will it work when we have multiple arrangements?

[bestprintsf (Leandro Z)]

I’m sorry but I need to say it:
After donwload and test the aia file to understand how it works !!
This broke my head and all my logic too.
Since it is possible that an arrangement located in the bottom of screen starts showing from top ???

Every day learns something new !!!

[WatermelonIce (Bryan)]

One thing. I just don’t understand why it can get dimmer in the Main UI.

[bestprintsf (Leandro Z)]

Dimmer is used to show top sheet like notifier ( at least I think that ).
Trie change the background color on dimmer arrangement and looks what happens

[themaayur (Mayur Berad)]

It’s easy to implement if you have 1-2 arrangement.
But it becomes complicated when you have multiple arrangement in screen.
I am also messed up with it frm last night.

@bestprintsf

Since it is possible that an arrangement located in the bottom of screen starts showing from to

Using animation Utilities.

[bestprintsf (Leandro Z)]

Thank you so much for the info
I don’t know that it was possible to do !!!