[Free / Open Source] Dynamic Arrangements Extension v2

Hi Koders!

I just noticed there is a missing Dynamic Arrangement component, so I wanted to create a one! I just tried to implement arrangement’s properties, and wanted to keep it simple as much as possible so here it is!

It is also open source so feel free about editing, sharing, or integrating to Kodular (maybe :grin:), I won’t force you to credit me if you are going to use this extension’s source code. :slightly_smiling_face:

I made that with AppyBuilder’s Code Editor because Kodular IDE currently having problems.

It has 12 methods:

Some Block Details
  • CreateArrangement
    Creates a dynamic arrangement in an arrangement which is already exists.
    • arrangement - The arrangement component which new arrangement will placed in.
    • orientation - Specify if you want an Horizontal arrangement or Vertical one.
      (Use with HorizontalOrientation or VerticalOrientation block.)
    • scrollable - Set it true if you want a scrollable arrangement.
  • SetAlign
    • component - The arrangement which you want to use with this method.
    • orientation - Sets the vertical or horizontal alignment for contents of the arrangement.
      (For example, if you want to change its Horizontal Alignment, use HorizontalOrientation block.)
  • SetVisibility
    • component - The arrangement which you want to use with this method.
    • visibility - Specifies whether the component should be visible on the screen. Value is true if the component is showing and false if hidden.
  • SetWidth
    • component - The arrangement which you want to use with this method.
    • width - Specifies the component’s horizontal width, measured in pixels. Currently, it is not possible to set as Fill Parent, you can set the Screen’s width as solution.
  • SetHeight
    • component - The arrangement which you want to use with this method.
    • height - Specifies the component’s vertical height, measured in pixels. Currently, it is not possible to set as Fill Parent, you can set the Screen’s height as solution.

Other methods are getter for these ones, so I didn’t write them here.

An example usage about using this extension along with other dynamic components:


I didn’t add ID property, so this extension won’t store created dynamic arrangements, so you need to store created arrangements in the variables.

Note for using it in App Inventor
This extension works for App Inventor too, however as App Inventor doesn’t have built-in dynamic components to create dynamic label, image, textbox etc. This extension will only create blank arrangements without additional Dynamic Components extension.

Also, you can hide the created arrangement if you want to delete it from view.

:warning:
This extension only creates dynamic arrangements, to create all dynamic components in one extension, see my new Dynamic Components extension which supports dynamic arrangements too.

Source Code

Download:
com.appybuilder.ycdemirbas.DynamicArrangements (4).aix (10.9 KB)

42 Likes

Nice extension. Dynamic horizontal orientation is most useful.
Thanks for sharing.

2 Likes

I think that will be more helpful. You SHOULD added some tutorial. Or create some design with it & share block also

1 Like

Actually it works like a static component blocks, use it when a component wants an arrangement as parameter.

These two blocks has same purpose. Both of them returns the component’s itself.

So this means, you can just use CreateArrangement block for places which wants an arrangement.

This is can be useful for other scenarios:

  • Create ViewPager pages dynamically without adding blank arrangements to the Designer.
  • Register BottomSheet with an dynamically created arrangement.
    and more…
7 Likes

Woo, this sounds really cool!

6 Likes

Thank you @yusufcihan for extension as well as source code.
Actually I am new to extension development and not familiar with android components.
I am sure this extension is going to help me.
Thank you.

4 Likes

You’re welcome! :blush: I actually looked the App Inventor’s JavaDoc to learn component’s properties and its usage, so my another purpose about making this extension was learning the usage of HVArrangement :grin:

3 Likes

Nice Extension! I needed this type of Extension from a very long time.
And also Thanks for Sharing its Source Code.

1 Like

Great extension! :+1: With this you are able to create your own custom listview, a frequently requested feature to Kodular. Also thanks for the source!

2 Likes

Amazing , I will use this extension. thank you don’t be tired of building other extensions :grin:

2 Likes

Excellent! Would you add one more slot to make the arrangement clickable (true or false)?

4 Likes

Looks like App Inventor doesn’t have Clicked event for arrangements, only Kodular has Clickable property and Clicked event. So sorry, I can’t add that for compatibility with App Inventor and I’m not compiling extension with Kodular sources.

2 Likes

Then just add a listener for it?

VIEW.setOnClickListener(new View.OnClickListener() {
             public void onClick(View v) {
                 if (clickable) {
                     //do whatever you want
                 }
             }
         });
9 Likes

Hi!
nice extension but i’m not really i understand how it works… Is there a way with this extension to align horizontally in a dynamic cardview 2 labels also created dynamically?
Thx in advance!

1 Like

No, but you can create another dynamic arrangement in dynamic CardView so you can set its align to center, left, right or center, top, bottom. Add dynamic components to dynamic arrangement which you created before, so all elements inside will be aligned like in classic arrangements.

If you post your blocks (here or as private message) about what you want I can help you about alignment.

1 Like

Update v2

New 3 blocks:

Thanks for Mika about helping me to use click listener and
Thanks to Italo about Clickable suggestion,
and thank you for using that extension!

Now it is possible to rotate dynamic arrangements (which is doesn’t even exists for classic arrangements :stuck_out_tongue_closed_eyes:), set a background color and now it fires OnClick event when you click on the arrangement!

SetBackgroundColor requires a color block / or color code as integer instead of Hex, use Color Utils to convert Hex to App Inventor color.

I updated the main topic (source code and extension), let me know if you have any questions and suggestions! :smile:

15 Likes

Thank you :pray: Im going to explore it

1 Like

Excellent as always!

2 Likes

Thx for the answer! will look at it :wink:

1 Like

Very nice extension :grinning:

1 Like