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
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
Procedure
Online Custom Circular Image List
Input Blocks
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) 
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 
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
thanks 
