So Let’s Begin
1. Simple ListView (Icon, Title & Action Button)
• Layout
• Inputs
Icon : Url
Title : String
Material_Icon_Name : String
• Blocks
{
"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
Title : String
Subtitle : String
• Blocks
{
"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} • Platform: {platform} • Developer: {developer} • 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
}
}
]
}
]
}
]
}Yiioooo
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
Download
Aia ( Schema ) :
ForthcomingAquamarineMacaw (Schema rewritten).aia (380.8 KB)
Aia:ForthcomingAquamarineMacaw.aia (434.8 KB)
• Refrences
Dynamic Component’s By @yusufcihan
brick Dynamic Components Extension that supports every component in your AI2 distribution, instead of having pre-defined components. I thought about making a full method to create all dynamic components without creating different blocks for every component because it would be useless. So I was trying to find a proper solution for a long time. And here it is! The minimum required API version for this extension is 1 . It basically uses Java’s Reflection feature, so this allows you to create…
Image Loader By @DevYB
Image Loader Hi everyone, Today I present a new extension based on Universal Image Loader that allows you to load and cache images. Demo Event OnLoadingStarted: Event when the loading of the image is started. The url returns the URL of the image. [OnLoadingStarted] OnLoadingFailed: Event when the image is failed to load. The url returns the URL of the image. [OnLoadingFailed] OnLoadingComplete: Event when the image is loaded. The url returns the URL of the image. [OnLoadi…
• Contribution
Thanks @The_K_Studio for How to get component on click.
Thanks @WatermelonIce for the schema of each listview.
Thanks :kodular: 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. :grin:
If you like this guide then you can support by donating.
.png)
No comments:
Post a Comment