Make Top Sheet in Kodular

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

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

Record-2020-06-14-00-20-34-750b9

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 :heart_eyes:
  • No :expressionless:

0 voters

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

18 Likes

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

It’s okay :slightly_smiling_face: :slightly_smiling_face:

2 Likes

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.

:clap: :v: :partying_face:

Yoshi

Thank you so much :heart_eyes:

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 :expressionless: :expressionless:…).

That is why community is for… :slightly_smiling_face:

3 Likes

Mind sharing screenshots?

1 Like

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

Yes we can do…:+1:

1 Like

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

1 Like

Yes it will work on every device size…

1 Like

How we can create custom floating button using same logic

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 :expressionless::expressionless:

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

1 Like

Thank so much for sharing this !!!
:wave: :wave: :wave: :+1:

1 Like

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

2 Likes

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 ???
:thinking: :mage:
Every day learns something new !!!

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

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

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. :disappointed:

Using animation Utilities.

1 Like

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