How to Create Layout for multiple tag or keyword

Hey Koders, Nikhil here,
Yesterday I have got a question for creating layout in which component come to next line when width left(or unused) in previous arrangement is less for creating new arrangement…

So i have created it, but it will be little bit confusing for starter… So please try to understand it…

Layout

  • We will create tags in Vertical Arrangement.
  • We are using Card View 1 to get width of card after setting new text in label1.
  • Remember one thing that property of Card View 1,labe1 and created Dynamic card,dynamic Label must be same.

Extension Used

Annotation 2020-05-17 130159
Thanks to yusufcihan for creating such wonderful Extension…

Blocks

AIA

NewLayoutTest.aia (19.6 KB)

APK

NewLayoutTest (1).apk (5.0 MB)

Results

Explanation

  • On screen Initialization i am creating dynamic Horizontal Arrangement and setting label1 text to first element of list and called procedure taglengthchecker and check that how much tag is created…
  • Before moving forward i would like to let you know that in variable total width we store total width that is used in present dynamic horizontal arrangement
  • In Clock.timer, first we check that if we add cardview.width - 10 to totatwidth is less than dynamic horizontal width then we will create tag into present dynamic horizontal arrangement and set totalwidth to totalwidth + cardview.width - 10 else if condition is false then it will create new horizontal arrangement and set totalwidth to cardview.width - 10*
  • In above point i have decreased -10 from everywhere because i have managed margin of cards and with respect to padding of horizontal arrangement…
  • Procedure tagcreation is used to create tags you can say it layout of tag…
  • Clock interval is 10ms

May be its bug

  • We will not get width of dynamic component on screen initialization or in any procedure(called on screen initialization not sure about when called from other source).

Is this Topic helpful to you?

  • Yes,its wonderful :heart_eyes: :heart_eyes:
  • No,need improvement :expressionless: :expressionless:

0 voters

11 Likes

Nice first guide.

3 Likes

its my third guide post :expressionless:

1 Like

Nice third guide :three:

5 Likes

Thanks you very much @Peter for appreciation…

1 Like

Great, Nice guide I read it for 4-5 time then I understood the logic behind it.

1 Like

yes,i know that its little bit tricky to understand that’s why i tried to explain everything…

1 Like

OMG its wonderful work @nikzdreamer2001
For the first time i m seeing an amazing and unique guide
Thanks for your contributions for Kodular Community
Can’t wait for new stuff from your side. keep up this good work.
:heart:>3000

Thanks you so much @ziach5451:blush:

2 Likes

Nice think

1 Like

really awesome work… :+1:

2 Likes

I hate when people put me in this situation :rofl:

what do you mean?i didn’t got it… :sweat_smile:

Thanks for using my extension!

Actually, you can get the Width (or any property) of the created dynamic buttons from every section of your code. Are you sure it is giving an error?

Only of Button??

How to use this your wonderful work,
with youtube tag app please guide

Just update the list…
means i have assigned list(in csv) in variable…

No of course :wink:, it is just an example.

2 Likes

Deephost made a particular extension for this.
Edit by Mod, you are not allowed to post direct link of a extension if is not yours
Download it from his app