Custom Dynamic Circular Image Icon List

Hey I presnt you my first Guide to make a dynamic list with circular image icon that’s very similar to ColinTree ListView But with Circular Image Icon
I used two extensions
@yusufcihan’s Dynamic Components extension
@DeveloperLeo’s LeoProfileView Extension

Designer Part

You just have to import and drag following components into your design part
Capture

Block Part

In black part you have provided with two procedures one with Imgae from asset and in other Image from Url

Ofline Custom Circular Image List

Input Blocks
procedures_callnoreturn

Procedure

Online Custom Circular Image List

Input Blocks
procedures_callnoreturn (2)

Procedure

Something New

AS @DeveloperLeo’s LeoProfileView Extension takes image width and height inputs in pixels not in percentage
so i Used a Jugard (Punjabi) :sweat_smile:To develop a logic to make it able to get inputs in percentage
Here in my input blocks you have to put values in percentage not in pixels

and the logic/Jugard :stuck_out_tongue_winking_eye: is here that i used to make it work


Here Local variable ImageWidth is your input value that you have to input in Call Procedure block

Note(mistake allert) edited

There is a mistake for height value in percentage i used screen width for getting height value but you have to use image height block for that purpose
I’ll update it soon. But until that u have to be careful while settliing height properties for LeoProfileView image.

Sample List

Downloads

CustomCircularImageList.aia (221.6 KB)

CustomCircularImageList (1).apk (5.2 MB)

Contribution

@WatermelonIce developed this list in JSON formate with schema block so no need to handle a large number of blocks just use his provided method

{
“name”: “Custom Dynamic Circular Image Icon List (1)”,
“metadata-version”: 1,
“author”: “Zia_Choudhary (rewritten by WaterMelonIce)”,
“platforms”: [
“Kodular”
],
“keys”: [
“id”
],
“components”: [
{
“id”:"{id}",
“type”:“MakeroidCardView”,
“properties”:{
“WidthPercent”:100,
“CornerRadius”:14,
“BackgroundColor”:-1
},
“components”: [
{
“id”:“HA1_{id}”,
“type”:“HorizontalArrangement”,
“properties”:{
“Width”:-2,
“AlignVertical”:2
},
“components”: [
{
“id”:“HA2_{id}”,
“type”:“HorizontalArrangement”,
“properties”:{
“AlignHorizontal”:3
}
}
]
}
]
}
]
}

json code for 2nd list

{
“name”: “Custom Dynamic Circular Image Icon List (2)”,
“metadata-version”: 1,
“author”: “Zia_Choudhary (rewritten by WaterMelonIce)”,
“platforms”: [
“Kodular”
],
“keys”: [
“id”,
“SpaceBWImageAndText”,
“LabelText”,
“LabelWidthPercent”,
“SpaceBWLabelAndButton”,
“ButtonText”,
“ButtonHeightPercent”,
“ButtonWidthPercent”
],
“components”: [
{
“id”:“HA3_{id}”,
“type”:“HorizontalArrangement”,
“properties”:{
“Width”:-2,
“Height”:-1,
“AlignVertical”:2
},
“components”: [
{
“id”:“Space1_{id}”,
“type”:“SpaceView”,
“properties”:{
“WidthPercent”:"{SpaceBWImageAndText}"
}
},
{
“id”:“Label1_{id}”,
“type”:“Label”,
“properties”:{
“Text”:"{LabelText}",
“TextColor”:-13421671,
“WidthPercent”:"{LabelWidthPercent}",
“FontSize”:14
}
},
{
“id”:“Space2_{id}”,
“type”:“SpaceView”,
“properties”:{
“WidthPercent”:"{SpaceBWLabelAndButton}"
}
},
{
“id”:“Button_{id}”,
“type”:“Button”,
“properties”:{
“WidthPercent”:"{ButtonWidthPercent}",
“HeightPercent”:"{ButtonHeightPercent}",
“Text”:"{ButtonText}",
“TextColor”:-13421671
}
}
]
}
]
}

CustomCircularImageList (modifed).aia (202.0 KB)

Credits

Thanks to kodular for providing such a great platform
and thanks to @yusufcihan And @DeveloperLeo for their great extensions and @WatermelonIce for his contribution

18 Likes

Nice one! :100:

1 Like

Nice work :heart_eyes::heart_eyes:

1 Like

Good Guide​:+1:
Maybe @themaayur can add it in his guide if @Zia_Choudhary allows.

1 Like

@ravigarg
Ok as u wish… So he can add it.
And its my pleasure :blush:

Definitely, I will add it with credit :wink: thanks @Zia_Choudhary

1 Like

@themaayur u r welcome :blush:

1 Like

great work

1 Like

Great work,

1 Like

Thanku gyz :heart:

Nice Work Kaky(Punjabi) :grinning:

1 Like

Great work

1 Like

thank u for these appriciational words

1 Like

hahh thanks @Ottoman for this punjabi appriciation :sweat_smile:

Excellent work! thanks so much for sharing, i have a question, im new on this and i don’t know if this question is obvious or i will need some help, but how can i get the id of the call buttons there, i mean if i want a different screen open, in every dinamic button “CALL” buton in the list thanks for the help

1 Like

U r welcome in the community
You can do it easily with any component blocks
Further more i’ll add a click event tomorrow :relaxed:

@Zia_Choudhary your design looks good good and simple,
My design using dynamic components

what is image width “Variable” value?

3 Likes

I know and i have solution for dynamic components… So don’t worry and i have made all of these lists with these solutions about 3 months ago when this extension was just a new one… So don’t worry

1 Like

To whom u r asking?

1 Like