Make Custom Bottom Round Sheet [Guide]

Hello everyone
I have created rounded bottom sheet and today I am presenting here how to create it

Screen1 [Without any extension]
Component required Screenshot

Blocks Images

Video output of screen1

As u can see in screen1 Bottom sheet is looking very low corner round
In this case I used an extension that I have taken from

https://community.thunkable.com/t/extension-change-the-design-of-the-button/36717

Same component required on screen2 but we can round corner as much we want

Screen2 [with extension]
Component required screenshot

Blocks images [Screen2]

Video output of screen2

aia file: roundsheet (1).aia (13.4 KB)

Extension : U can download from the upper post link

A huge thanks to @themaayur for guiding us about Animation utilities

A huge thanks to @nikzdreamer2001 for guiding us about Top sheet

Also a huge thanks to @Rogerio_Rios for telling me about the use of arrangement design extension

If it helps someone then please like the post it will increase my confidence and tell me which screen u liked

28 Likes

Nice guide :+1:
Good use of that logic here :grin:

2 Likes

Great guide @iamwsumit :+1:t2:

2 Likes

Good Job.Effort and dedication.

3 Likes

for different resolutions of mobile its position is not fixed at bottom…

Use a space above the sheet and push the sheet with the space

2 Likes

any tutorial for this ? using space…

Just take the space above sheet and set it’s height to 65% and sheet height to 40%

2 Likes

by using only height component … height component works as total count of vertical pixels…
for example if there is 2 mobiles of same height like 6.3 inch both… but of different pixels size
so consider the length of first device is 1053px and that of second 786px… so the sheet or any component using animation lifts by this pixel height not by screen height as 6.3 inch…

due to this component position is different in different device even also the device height is same…

if there any possibility to get device height in inches then using ratio of two parameter we can set that…

i have tried a lot this animation utilities but position is not fix because of pixel density

if first device pixel density is 1000 px and second device pixel density is 500 px and height is same

when we lift the sheet with 500 px…

then in first device it will lift upto middle screen…

and in second device it will lift upto top position of screen…

1 Like

is there any method to get resolution of mobile?

1 Like

Why does not u use % instead of pixels

2 Likes

animation utilities not works as % its works on pixel

I know this but layouts can work with %

2 Likes

but when animation push the layout by pixels… im telling about moving factor… have you tried it…?
i have tried a lot with panasonic eluga, vivo z1 pro, moto g4 plus, lyf wind4, and realmi mobile… its position is different even also using height component

1 Like

Show me some screenshot

2 Likes

ya will send within an hour

1 Like

I have tested it in 2 device it is fine

2 Likes

provide your sample aia i will send you it from
moto g4, vivo z1 pro, panasonic eluga z1, lyf wind 4

its actually doesent change more but slightly change will occur according to pixel density…

1 Like

This is the aia

2 Likes

Is it possible to hide the bottom sheet without having to press the blue arrow button ??
can close by clicking on the screen, where the red arrow shows ?