So Welcome, Everyone today in this guide I will show how to make different listviews using @yusufcihan 's Dynamic Component Extension. It is fully Customisable According to your needs.
So Let’s Begin
1. Simple ListView (Icon, Title & Action Button)
• Layout
• Inputs
Icon : Url
Title : String
Material_Icon_Name : String
For Material Icon Name Click Here
• Blocks
• Schema
{
"name": "Simple ListView",
"metadata-version": 1,
"author": "Maayur (rewritten by WaterMelonIce)",
"platforms": [
"Kodular"
],
"keys": [
"count",
"icon",
"title"
],
"components": [
{
"id":"{count}",
"type":"HorizontalArrangement",
"properties":{
"BackgroundColor":-1,
"isCard":true,
"AlignHorizontal":1,
"AlignVertical":2,
"Width":-2,
"Height":-1
},
"components":[
{
"id":"image_{count}",
"type":"Image",
"properties":{
"Height":35,
"Width":35,
"Picture":"{icon}"
}
},
{
"id":"space_{count}",
"type":"SpaceView",
"properties":{
"WidthPercent":5
}
},
{
"id":"label_{count}",
"type":"Label",
"properties":{
"FontTypefaceImport":"Product_Sans_Bold.ttf",
"Width":-2,
"Text":"{title}",
"FontSize":16
}
},
{
"id":"button_{count}",
"type":"Button",
"properties":{
"HeightPercent":5,
"Width":-1,
"BackgroundColor":16777215
}
}
]
}
]
}
2. BigImage ListView (Image, Title & Subtitle)
• Layout
• Inputs
Big_Image : Url
Title : String
Subtitle : String
• Blocks
• Schema
{
"name": "BigImage ListView",
"metadata-version": 1,
"author": "Maayur (rewritten by WaterMelonIce)",
"platforms": [
"Kodular"
],
"keys": [
"count",
"title",
"subtitle"
],
"components": [
{
"id":"{count}",
"type":"MakeroidCardView",
"properties":{
"ContentPaddingBottom":0,
"ContentPaddingLeft":0,
"ContentPaddingRight":0,
"ContentPaddingTop":0,
"AlignHorizontal":3,
"AlignVertical":2,
"Width":-2,
"Height":-1,
"CornerRadius":5
},
"components": [
{
"id":"HorizontalArrangement_{count}",
"type":"HorizontalArrangement",
"properties":{
"AlignHorizontal":1,
"AlignVertical":2,
"Width":-2
},
"components": [
{
"id":"Image_{count}",
"type":"Image",
"properties":{
"HeightPercent":10,
"WidthPercent":32,
"ScalePictureToFit":true
}
},
{
"id":"Space_{count}",
"type":"SpaceView",
"properties":{
"WidthPercent":3
}
},
{
"id":"VerticalArrangement_{count}",
"type":"VerticalArrangement",
"properties":{
"AlignHorizontal":1,
"AlignVertical":1,
"Height":-1,
"Width":-2
},
"components": [
{
"id":"label_{count}",
"type":"Label",
"properties":{
"Width":-2,
"FontTypefaceImport":"Product_Sans_Bold.ttf",
"FontSize":18,
"TextColor":-16738680,
"Text":"{title}"
}
},
{
"id":"subLabel_{count}",
"type":"Label",
"properties":{
"Width":-2,
"FontTypefaceImport":"Product_Sans_Bold.ttf",
"FontSize":12,
"TextColor":-1565085,
"Text":"{subtitle}"
}
}
]
}
]
}
]
}
]
}
3. Aia/Aix Store Listview (Icon, Title, Description, Action Button)
• Layout
• Inputs
Icon : Url
Title : String
updated : String
platform : String
developer : String
downloads : Number
Button_name : String
• Blocks
• Schema
{
"name": "Aia/Aix Store Listview",
"metadata-version": 1,
"author": "Maayur (rewritten by WaterMelonIce)",
"platforms": [
"Kodular"
],
"keys": [
"count",
"icon",
"title",
"updated",
"platform",
"developer",
"downloads",
"buttonName"
],
"components": [
{
"id":"{count}",
"type":"MakeroidCardView",
"properties":{
"AlignVertical":1,
"AlignHorizontal":1,
"Height":-1,
"Width":-2,
"CornerRadius":10,
"BackgroundColor":-1,
"FullClickable":false
},
"components": [
{
"id":"Horizontal_{count}",
"type":"HorizontalArrangement",
"properties":{
"AlignHorizontal":3,
"Width":-2,
"Height":-1
},
"components": [
{
"id":"Image_{count}",
"type":"Image",
"properties":{
"Height":30,
"Width":30,
"Picture":"{icon}"
}
},
{
"id":"Space_{count}",
"type":"SpaceView",
"properties":{
"Width":20
}
},
{
"id":"titleLabel_{count}",
"type":"Label",
"properties":{
"FontTypefaceImport":"Product_Sans_Bold.ttf",
"Width":-2,
"Text":"{title}",
"FontSize":18
}
}
]
},
{
"id":"Space2_{count}",
"type":"SpaceView",
"properties":{
"HeightPercent":2
}
},
{
"id":"des_{count}",
"type":"Label",
"properties":{
"FontTypefaceImport":"Product_Sans_Regular.ttf",
"Width":-1,
"Text":" • Last Upadated: {updated}\n • Platform: {platform}\n • Developer: {developer}\n • Total Downloads: {downloads}",
"FontSize":15,
"TextColor":-16738680
}
},
{
"id":"Horizontal2_{count}",
"type":"HorizontalArrangement",
"properties":{
"AlignHorizontal":2,
"Width":-2,
"Height":-1
},
"components": [
{
"id":"button_{count}",
"type":"Button",
"properties":{
"Shape":1,
"WidthPercent":25,
"Height":-1,
"FontTypefaceImport":"Product_Sans_Bold.ttf",
"FontSize":13,
"Text":"{buttonName}",
"BackgroundColor":-16738680
}
}
]
}
]
}
]
}
4. Youtube Homepage ListView (Thumbnail, Title, Icon & Subtitle)
• Layout
• Inputs
Thumbnail : Url
Title : String
Icon : Url
Name : String
Views : String
Time : Number
• Blocks
• Schema
{
"name": "Youtube Homepage ListView",
"metadata-version": 1,
"author": "Maayur (rewritten by WaterMelonIce)",
"platforms": [
"Kodular"
],
"keys": [
"count",
"title",
"icon",
"name",
"views",
"time"
],
"components": [
{
"id":"{count}",
"type":"MakeroidCardView",
"properties":{
"AlignHorizontal":3,
"AlignVertical":2,
"Width":-2,
"Height":-1,
"ContentPaddingBottom":0,
"ContentPaddingLeft":0,
"ContentPaddingRight":0,
"ContentPaddingTop":0,
"CornerRadius":5
},
"components": [
{
"id":"thumbImage_{count}",
"type":"Image",
"properties":{
"Width":-2,
"Height":-1,
"ScalePictureToFit":true
}
},
{
"id":"Horizontal_{count}",
"type":"HorizontalArrangement",
"properties":{
"AlignHorizontal":1,
"AlignVertical":2,
"Width":-2,
"HeightPercent":7
},
"components": [
{
"id":"Space_{count}",
"type":"SpaceView",
"properties":{
"Width":6
}
},
{
"id":"profileImage_{count}",
"type":"Image",
"properties":{
"Height":45,
"Width":45,
"Picture":"{icon}"
}
},
{
"id":"Space2_{count}",
"type":"SpaceView",
"properties":{
"WidthPercent":3
}
},
{
"id":"Vertical_{count}",
"type":"VerticalArrangement",
"properties":{
"AlignVertical":1,
"Height":-1,
"Width":-2
},
"components": [
{
"id":"Label_{count}",
"type":"Label",
"properties":{
"FontSize":16,
"FontTypefaceImport":"Product_Sans_Bold.ttf",
"Text":"{title}"
}
},
{
"id":"Label2_{count}",
"type":"Label",
"properties":{
"FontSize":12,
"FontTypefaceImport":"Product_Sans_Regular.ttf",
"TextColor":-12303292,
"Text":"{name} • {views} • {time}"
}
}
]
},
{
"id":"dotsLabel_{count}",
"type":"Label",
"properties":{
"FontTypeface":7,
"TextAlignment":0,
"WidthPercent":8,
"FontSize":20,
"Text":"more_vert"
}
}
]
}
]
}
]
}
5. Social Media ListView (icon, Name, Information, Action Button, Image, Like,Comment & Share Buttons )
• Layout
• Inputs
Image : Url
Icon : Url
Name : String
Views : String
Time : Number
Likes : String
• Blocks
• Schema
{
"name": "Social Media ListView",
"metadata-version": 1,
"author": "Maayur (rewritten by WaterMelonIce)",
"platforms": [
"Kodular"
],
"keys": [
"count",
"icon",
"name",
"views",
"time",
"likes",
"description"
],
"components": [
{
"id":"{count}",
"type":"MakeroidCardView",
"properties":{
"AlignHorizontal":3,
"AlignVertical":2,
"Width":-2,
"Height":-1,
"ContentPaddingBottom":0,
"ContentPaddingLeft":0,
"ContentPaddingRight":0,
"ContentPaddingTop":0,
"CornerRadius":5
},
"components": [
{
"id":"Horizontal_{count}",
"type":"HorizontalArrangement",
"properties":{
"AlignHorizontal":1,
"AlignVertical":2,
"Width":-2,
"Height":-1
},
"components": [
{
"id":"Space_{count}",
"type":"SpaceView",
"properties":{
"Width":10
}
},
{
"id":"Image_{count}",
"type":"Image",
"properties":{
"Height":45,
"Width":45,
"Picture":"{icon}"
}
},
{
"id":"Space2_{count}",
"type":"SpaceView",
"properties":{
"WidthPercent":3
}
},
{
"id":"Vertical_{count}",
"type":"VerticalArrangement",
"properties":{
"AlignVertical":1,
"Height":-1,
"Width":-2
},
"components": [
{
"id":"titleLabel_{count}",
"type":"Label",
"properties":{
"FontSize":16,
"FontTypefaceImport":"Product_Sans_Bold.ttf",
"Text":"{name}"
}
},
{
"id":"time&view_{count}",
"type":"Label",
"properties":{
"FontSize":12,
"FontTypefaceImport":"Product_Sans_Regular.ttf",
"TextColor":-12303292,
"Text":"{time} • {views}"
}
}
]
},
{
"id":"dotLabel_{count}",
"type":"Label",
"properties":{
"FontTypeface":7,
"TextAlignment":0,
"WidthPercent":8,
"FontSize":20,
"Text":"more_vert"
}
}
]
},
{
"id":"thumb_{count}",
"type":"Image",
"properties":{
"Height":-1,
"Width":-2,
"ScalePictureToFit":true
}
},
{
"id":"Horizontal3_{count}",
"type":"HorizontalArrangement",
"properties":{
"Width":-2
},
"components": [
{
"id":"Space4_{count}",
"type":"SpaceView",
"properties":{
"Width":10
}
},
{
"id":"descLabel_{count}",
"type":"Label",
"properties":{
"FontSize":14,
"Width":-2,
"TextAlignment":0,
"Text":"{name} • {description}",
"FontTypefaceImport":"Product_Sans_Regular.ttf"
}
}
]
},
{
"id":"Horizontal2_{count}",
"type":"HorizontalArrangement",
"properties":{
"AlignVertical":2,
"HeightPercent":5,
"Width":-2
},
"components": [
{
"id":"likeButton_{count}",
"type":"Button",
"properties":{
"Width":-2,
"FontTypefaceImport":"Product_Sans_Bold.ttf",
"TextColor":-12303292,
"Text":"{likes}",
"BackgroundColor":16777215,
"TextAlignment":0
}
},
{
"id":"comment_{count}",
"type":"Label",
"properties":{
"FontTypeface":7,
"Text":"forum",
"Clickable":true,
"Width":-1,
"FontSize":28,
"TextColor":-6381922,
"TextAlignment":1
}
},
{
"id":"share_{count}",
"type":"Label",
"properties":{
"FontTypeface":7,
"Text":"share",
"Clickable":true,
"FontSize":28,
"TextColor":-6381922,
"TextAlignment":2,
"Width":-2
}
},
{
"id":"Space3_{count}",
"type":"SpaceView",
"properties":{
"WidthPercent":5
}
}
]
}
]
}
]
}
• How to get component on click
• Screenshot
• Video
• Download
Apk: ForthcomingAquamarineMacaw.apk (5.4 MB)
Aia ( Schema ) :
Aia:ForthcomingAquamarineMacaw.aia (434.8 KB)
• Refrences
Dynamic Component’s By @yusufcihan
Image Loader By @DevYB
• Contribution
Thanks @The_K_Studio for How to get component on click.
Thanks @WatermelonIce for the schema of each listview.
Thanks 
For a great Platform.
Suggestions are Appreciated
This Listviews Can be fully Customized According to your Need. If anyone wants other kind of listview Definitly tell me. I will try to post it. 
If you like this guide then you can support by donating 
