How to Create Layout for multiple tag or keyword

Guides Resources
#1

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

Annotation 2020-05-17 130433
Annotation 2020-05-17 130433747×812 46.9 KB

  • 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

blocks (2)
blocks (2)2588×1623 487 KB

AIA

NewLayoutTest.aia (19.6 KB)

APK

NewLayoutTest (1).apk (5.0 MB)

Results

Screenshot_2020-05-17-13-39-14-41_bcf19fdaab5f528e1a140238641ca633
Screenshot_2020-05-17-13-39-14-41_bcf19fdaab5f528e1a140238641ca6331080×2400 369 KB

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

14 Likes
How to make this type of layout?
How to create dynamic card grid view
How to make horizontal scroll tag list and pick tag text
Why is there a problem with the right-click menu?
Need help from Extension developer
#2

Nice first guide.

4 Likes
#3

its my third guide post :expressionless:

1 Like
#4

Nice third guide :three:

6 Likes
#5

Thanks you very much @Peter for appreciation…

2 Likes
#6

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

2 Likes
#7

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

1 Like
#8

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

#9

Thanks you so much @ziach5451… :blush:

2 Likes
#10

Nice think

1 Like
#11

really awesome work… :+1:

2 Likes
#12

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

image
image1480×516 65.6 KB

#13

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

#14

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?

#15

Only of Button??

#16

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

#17

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

#18

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

2 Likes
#19

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