Horizontal Dynamic Layout

Dynamic Horizontal View!

A dynamic horizontal view just like Play Store is demanded allot without and paid extension. I don’t know if users have their own way but here I will share my idea
This is my first guide so correct me if I do something wrong :slightly_smiling_face:
Let’s Get Started

Principle

The principle is super simple, Using Dynamic component inside a Dynamic component

Components/Extenstion

  • For creating Dynamic components I used @yusufcihan’s Dynamic Component Extenstion

  • A Horizontal Scroll Arrangement to add a component in horizontal View

  • A vertical arrangement to house other components

  • Images to create dynamic images

  • Label to create dynamic label

What will Happen

We will create Vertical Arrangements dynamically in the Horizontal Scroll View and will place Image and Label component in that Vertical Arrangement

Blocks

  • colorlist
    Just to set the background colour of Vertical Arrangement, for instance, we will pick a random colour from the list

  • global color list
    List of Images


  • It creates Dynamic vertical Arrangement and set their properties accordingly


  • This creates Dynamic images in Dynamically created Vertical Arrangements
    Here “get x” return the number that targets the id of Vertical Arrangement in which the Image will be created.


  • This creates Dynamic Label in Dynamically created Vertical Arrangements
    Here “get x” return the number that targets the id of Vertical Arrangement in which the Label will be created.

Conclusion

Credits

@yusufcihan for his great extension
and Bamicon for providing those images to iconfinder.com

Note

You can create CardView dynamically using this extension instead of using
VerticalArrangement just pass MakeroidCardView as componentName
Thanks, @Vaibhav for the tip

Also now u can pass the component directly as the latest update support component block and not just strings, thanks @vknow360, @themaayur and @WatermelonIce for letting me know it

Random Views

The procedures I used maybe not best or optimised but they provide an idea to the work. You may blend this guide into your projects. if you have a better idea feel free to share it here

Downloads

Thanks

13 Likes

Really nice guide. :+1: :+1: :+1:

1 Like

Awesome work and helpful
It will be more helpful if you give aia file.

1 Like

I just forgot, thanks for reminding

1 Like

I think you can create card view by this extension also. Just pass MakeroidCardView as parameter to componentName of Create method. Let me know if I understood something wrong

3 Likes

Yup u r right

looking nice, did u used a similar approach?

i mean did you used any paid extension?
if not than great:+1:

Could you please explain with samples
When i tried to create dynamic linear progress bar using this extension i found this error

Show the relevant blocks.So others can help you.

2 Likes

there he meant to write MakeroidCardView at the following place
similarly replace the name with desired component

image


Share your blocks to get a more precise solution.

You can use component also.
Just pass an example component and let extension do its work.
Good guide @Deepanshu_Arya :slightly_smiling_face:

1 Like

did u mean passing this?
component_component_block

the extension does not accept it, it accepts strings

1 Like

Just update the extension now it accepts it. I have done same here

1 Like

According to the lastest update, these two method are all acceptable.

1 Like

got it got it guys :sweat_smile:

2 Likes

Can we created dynamic image and other dynamic components like buttons or labels of kodular in app inventor like procedure you mentioned above. By the way great work.

Yes u can create any component dynamically using the extension linked above