Create Wave layout in Kodular

Hey Guys, Nikhil here,
and in this topic we will learn that how can we make wave layout without using image as background…
So may be many of koders are questioning :point_down: :point_down:.

What is wave layout??

First of all i’d like to thank @Preet_Vadaliya to create svg extension that was helpful to create such layout…

Documentations

Make you Wave
So first of all visit GetWave
website is so simple and easy to use…

Just pick color and decide how much wave you want and the change layout using dice button present there…
when you get wave you want to add in your app just download it…

Extension used
Must read documentation as file from asset will not work in companion mode…
Download Extension

Designer Arrangements

Blocks

AIA
WaveLayout.aia (93.5 KB)

Apk
Wave.apk (5.0 MB)

WavyBackground.apk (5.3 MB)

Logic
i have just joined TopHA and WaveHA… and remeber on thing there will be no background color in WaveHA

Is it amazing??

  • Yes :heart_eyes: :star_struck:
  • No :sleeping: :sleeping:

0 voters

23 Likes

iam still not understanding about your extension

First of all that’s not my extension…
and what’s your exact question would you like to tell me

i want bottom and up to use it combain how is that?

1 Like

mean you want wave on both side.
am i right??

yes two side …in one arrangment how is it

yes that’s possible
just get two svg file from getwave website.
first will be pointng downward and second will be pointing upward…

now make arrangement like below
HA1
HA2
HA3

Ha1 will use second svg
ha2 will be simple square or rectangle
and ha3 will use first svg

2 Likes

Great works, I hope we will see more UI related guides from you :heart_eyes::heart_eyes::heart_eyes:.

1 Like

Sure @themaayur, but for Ui and some tricky method realted post
I’m creating app for it so that everyone can reach it easily

2 Likes

Congratulations @nikzdreamer2001 One question: if we create a .png .jpeg .svg (an image in a Paint.Net image editor for example) and put it as a screen or vertical image, will it work? I have doubts because the apps will run on different screen sizes.

1 Like

Thank you so much…

If you create png,jpeg of wave only then it will work but i’m not sure about padding inside arrangement so must check that first

but i suggest to use svg because it provides good pixel quality…
and according to the extension i used it will help you to use overlapping in cool way…
i’ll create topic on that ASAP.

1 Like

one of the cool idea is creating wavy image backgroud with color filter

OK thank you. I asked because I really admire a well-made UI. As I already mentioned here on the forum, I am still trying to grow in this “front end” area. I made some png and put it in the bottom of an app, mad only after I had this question about different screen sizes. I will follow the .svg tip.

Would you like to try this?

you can say its fun with wave challenge:joy::joy:

Yes. I like UI a lot. Since my first software made in a non-graphical environment (before windows), made in Clipper 5 I was concerned with my screen layouts. I was able to put a screen background with special characters from the ASCII table and thus shade the programs’ screens.

WaveLayout.apk (5.3 MB)

hey guys how’s this??

1 Like

Really helpful guide /resources. Keep it up​:hugs:

1 Like

thanks you so much @msr79526
also check this…

1 Like

really amazing :heart_eyes: :heart_eyes: :heart: :heart:

1 Like

Thanks you much @mihacker41

Btw when you are going to pay your challenge money :sweat_smile::joy::joy: