Introduction
Hello everyone I am Sumit kumar as you know @themaayur has published a guide about 5 different listview just that same in this guide presenting 5 more designs by dynamic component by @yusufcihan.
without wasting time lets go guys
Designs Name
1. Leaderboard
2. Follower List
3. Fantasy Team Player List
4. Shopping List
5. Transactions
Lets Start
1. Leaderboard
Preview
Blocks
Parameters
1st :- Rank or ID
2nd :- Icon
3rd :- Name
4th :- Point or score
Schema
{
"name":"Leaderboard",
"metadata-version": 1,
"author": "Sumit Kumar",
"platforms": [
"kodular"
],
"keys": [
"rank",
"Image",
"Name",
"Score"
],
"components": [
{
"id":"main_{rank}",
"type":"HorizontalArrangement",
"properties":{
"AlignHorizontal":3,
"AlignVertical":2,
"WidthPercent":95,
"HeightPercent":8
},
"components": [
{
"id":"{rank}",
"type":"Label",
"properties":{
"Text":"#{rank}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"FontSize":12
}
},
{
"id":"space1_{rank}",
"type":"SpaceView",
"properties":{
"WidthPercent":5
}
},
{
"id":"image_{rank}",
"type":"Image",
"properties":{
"Height":45,
"Clickable":true,
"Width":45,
"Picture":"{Image}"
}
},
{
"id":"space2_{rank}",
"type":"SpaceView",
"properties":{
"WidthPercent":5
}
},
{
"id":"Name_{rank}",
"type":"Label",
"properties":{
"Text":"{Name}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"FontSize":18
}
},
{
"id":"space3_{rank}",
"type":"SpaceView",
"properties":{
"Width":-2
}
},
{
"id":"Match_{rank}",
"type":"Label",
"properties":{
"Text":"{Score}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"FontSize":18
}
},
{
"id":"space4_{rank}",
"type":"SpaceView",
"properties":{
"Width":-2
}
},
{
"id":"Score_{rank}",
"type":"Label",
"properties":{
"Text":"{Score}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"FontSize":18
}
},
{
"id":"space5_{rank}",
"type":"SpaceView",
"properties":{
"Width":-2
}
}
]
},
{
"id":"divider_{rank}",
"type":"Label",
"properties": {
"Width":-2,
"Height":2,
"BackgroundColor":-1633771777
}
}
]
}
You will get the link of used font at the last
2. Follower List
Preview
Blocks
Parameters
1st :- Rank or ID
2nd :- Icon
3rd :- Name
How to get click on follow button
Schema
{
"name":"Follower List",
"metadata-version": 1,
"author": "Sumit Kumar",
"platforms": [
"kodular"
],
"keys": [
"ID",
"Image",
"Name"
],
"components": [
{
"id":"main_{ID}",
"type":"HorizontalArrangement",
"properties":{
"AlignHorizontal":3,
"AlignVertical":2,
"WidthPercent":95,
"HeightPercent":8
},
"components": [
{
"id":"{ID}",
"type":"Label",
"properties":{
"Text":"#{ID}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"TextColor":-1633771777,
"FontSize":12
}
},
{
"id":"space1_{ID}",
"type":"SpaceView",
"properties":{
"WidthPercent":3
}
},
{
"id":"image_{ID}",
"type":"Image",
"properties":{
"Height":45,
"Clickable":true,
"Width":45,
"Picture":"{Image}"
}
},
{
"id":"space2_{ID}",
"type":"SpaceView",
"properties":{
"WidthPercent":3
}
},
{
"id":"Name_{ID}",
"type":"Label",
"properties":{
"Text":"{Name}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"FontSize":18
}
},
{
"id":"space3_{ID}",
"type":"SpaceView",
"properties":{
"Width":-2
}
},
{
"id":"Button_{ID}",
"type":"MakeroidCardView",
"properties": {
"AlignVertical":2,
"AlignHorizontal":3,
"ContentPaddingTop" : 4,
"ContentPaddingRight" : 4,
"ContentPaddingBottom" : 4,
"ContentPaddingLeft" : 4,
"WidthPercent":25,
"Elevation":0,
"CornerRadius":5,
"BackgroundColor":-9682177,
"FullClickable":true
},
"components": [
{
"id":"Followlabel_{ID}",
"type":"Label",
"properties": {
"Text":"Follow",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"TextColor":-1
}
}
]
}
]
},
{
"id":"divider_{ID}",
"type":"Label",
"properties": {
"Width":-2,
"Height":1,
"BackgroundColor":-1633771777
}
}
]
}
3. Fantasy Team Player List
Preview
Blocks
Parameters
1st :- ID
2st :- Player Image
3nd :- Player Name
4rd :- Team
5th :- Playing status
6th :- Points
7th :- Credits or Price
8th :- Sell %
How to get Click on players
Schema
{
"name": "Player List",
"metadata-version": 1,
"author": "Sumit Kumar",
"platforms": [
"kodular"
],
"keys": [
"ID",
"Image",
"Name",
"Team",
"Linups",
"Points",
"Credit",
"Sell"
],
"components": [
{
"id":"Horiz_{ID}",
"type":"HorizontalArrangement",
"properties": {
"Width":-2,
"AlignVertical":2,
"Clickable":true
},
"components": [
{
"id":"space_{ID}",
"type":"SpaceView",
"properties": {
"WidthPercent":3
}
},
{
"id":"PlayerImage_{ID}",
"type":"Image",
"properties": {
"Height":45,
"Clickable":true,
"Width":45,
"Picture":"{Image}"
}
},
{
"id":"space1_{ID}",
"type":"SpaceView",
"properties": {
"WidthPercent":3
}
},
{
"id":"PlayerVert_{ID}",
"type":"VerticalArrangement",
"properties": {
"AlignVertical":2
},
"components": [
{
"id":"Name_{ID}",
"type":"Label",
"properties": {
"Text":"{Name}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"FontSize":15
}
},
{
"id":"Teamname_{ID}",
"type":"Label",
"properties": {
"Text":"{Team}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"FontSize":12
}
},
{
"id":"Linups_{ID}",
"type":"Label",
"properties": {
"Text":"{Linups}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"FontSize":12
}
}
]
},
{
"id":"space2_{ID}",
"type":"SpaceView",
"properties":{
"WidthPercent":11
}
},
{
"id":"selected_{ID}",
"type":"Label",
"properties":{
"Text":"{Sell}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf"
}
},
{
"id":"space3_{ID}",
"type":"SpaceView",
"properties":{
"Width":-2
}
},
{
"id":"points_{ID}",
"type":"Label",
"properties":{
"Text":"{Points}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf"
}
},
{
"id":"space4_{ID}",
"type":"SpaceView",
"properties":{
"Width":-2
}
},
{
"id":"Credits_{ID}",
"type":"Label",
"properties":{
"Text":"{Credit}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf"
}
},
{
"id":"space5_{ID}",
"type":"SpaceView",
"properties":{
"Width":-2
}
}
]
},
{
"id":"divider_{ID}",
"type":"Label",
"properties": {
"Width":-2,
"Height":2,
"BackgroundColor":-1633771777
}
}
]
}
4. Shopping List
Preview
Blocks
Parameters
1st :- ID
2nd :- Image
3rd :- Title
4th :- Price
How to get click on favorite and Share
I have used heart 
you can use any material icon
Schema
{
"name": "Shopping",
"metadata-version": 1,
"author": "Sumit Kumar",
"platforms": [
"kodular"
],
"keys": [
"ID",
"Image",
"Title",
"Price"
],
"components": [
{
"id":"spacebtw2_{ID}",
"type":"SpaceView",
"properties":{
"HeightPercent":2
}
},
{
"id" : "Arrange_{ID}",
"type" : "VerticalArrangement",
"properties" : {
"WidthPercent" : 95,
"AlignVertical" : 2,
"AlignHorizontal" : 3
},
"components": [
{
"id":"image_{ID}",
"type":"Image",
"properties": {
"Width":-2,
"HeightPercent":25,
"Picture":"{Image}",
"ScalePictureToFit":true
}
},
{
"id":"titlevert_{ID}",
"type":"VerticalArrangement",
"properties": {
"WidthPercent":95,
"AlignVertical":2
},
"components": [
{
"id":"space1_{ID}",
"type":"SpaceView",
"properties": {
"HeightPercent":1
}
},
{
"id":"title_{ID}",
"type":"Label",
"properties": {
"Text":"{Title}",
"FontTypefaceImport":"Gilroy-ExtraBold.otf"
}
},
{
"id":"space2_{ID}",
"type":"SpaceView",
"properties": {
"HeightPercent":1
}
}
]
},
{
"id":"hori_{ID}",
"type":"HorizontalArrangement",
"properties": {
"WidthPercent":95,
"AlignVertical":2
},
"components": [
{
"id":"price_{ID}",
"type":"Label",
"properties": {
"Text":"₹{Price}",
"FontSize":22,
"FontTypefaceImport":"Gilroy-ExtraBold.otf"
}
},
{
"id":"spaceforward_{ID}",
"type":"SpaceView",
"properties": {
"WidthPercent":3
}
},
{
"id":"favorite_{ID}",
"type":"Label",
"properties": {
"Text":"favorite_border",
"FontSize":27,
"FontTypeface":7,
"Clickable":true
}
},
{
"id":"shareSpace_{ID}",
"type":"SpaceView",
"properties": {
"WidthPercent":3
}
},
{
"id":"share_{ID}",
"type":"Label",
"properties": {
"Text":"share",
"FontSize":27,
"Clickable":true,
"FontTypeface":7
}
},
{
"id":"BuySpace_{ID}",
"type":"SpaceView",
"properties": {
"Width":-2
}
},
{
"id" : "Buynow_{ID}",
"type" : "MakeroidCardView",
"properties" : {
"AlignHorizontal":3,
"BackgroundColor":-12303292,
"AlignVertical":2,
"ContentPaddingLeft":15,
"ContentPaddingRight":15,
"ContentPaddingTop":4,
"ContentPaddingBottom":4,
"CornerRadius":5,
"Elevation":0,
"FullClickable":true
},
"components": [
{
"id":"Buynowlabel_{ID}",
"type":"Label",
"properties": {
"Text":"Buy Now",
"FontTypefaceImport":"Gilroy-ExtraBold.otf",
"TextColor":-1
}
}
]
}
]
}
]
},
{
"id":"spacebtw_{ID}",
"type":"SpaceView",
"properties":{
"HeightPercent":2
}
},
{
"id":"divider_{ID}",
"type":"Label",
"properties": {
"Width":-2,
"Height":2,
"BackgroundColor":-1633771777
}
}
]
}
5. Transaction
Preview
Blocks
Parameters
1st :- ID (as you can see I have given 6 digit random)
2nd :- Icon
3rd :- Purpose or Title
4th :- Amount
Schema
{
"name": "Transaction",
"metadata-version": 1,
"author": "Sumit Kumar",
"platforms": [
"kodular"
],
"keys": [
"TransactionID",
"Image",
"Purpose",
"Amount"
],
"components": [
{
"id" : "Maincard_{TransactionID}",
"type" : "MakeroidCardView",
"properties" : {
"Width" :-2,
"ContentPaddingTop" :4,
"ContentPaddingBottom" :4,
"ContentPaddingRight" :12,
"ContentPaddingLeft" :12,
"AlignVertical" :2,
"AlignHorizontal" :3,
"CornerRadius" :5,
"Elevation":5
},
"components": [
{
"id":"Hori_{TransactionID}",
"type":"HorizontalArrangement",
"properties": {
"AlignVertical":2,
"Width":-2
},
"components": [
{
"id":"image_{TransactionID}",
"type":"Image",
"properties": {
"Height":30,
"Width":30,
"ScalePictureToFit":true,
"Picture":"{Image}"
}
},
{
"id":"space1_{TransactionID}",
"type":"SpaceView",
"properties": {
"WidthPercent":2
}
},
{
"id":"PurposeVert_{TransactionID}",
"type":"VerticalArrangement",
"properties": {
"AlignVertical":2
},
"components": [
{
"id":"purpose_{TransactionID}",
"type":"Label",
"properties": {
"Text":"{Purpose}",
"FontSize":15,
"FontTypefaceImport":"Noway-Medium.otf"
}
},
{
"id":"Transactionid_{TransactionID}",
"type":"Label",
"properties": {
"Text":"Transaction ID : {TransactionID}",
"FontSize":12,
"TextColor":-1633771777,
"FontTypefaceImport":"Noway-Medium.otf"
}
}
]
},
{
"id":"space3_{TransactionID}",
"type":"SpaceView",
"properties": {
"Width":-2
}
},
{
"id":"Amount_{TransactionID}",
"type":"Label",
"properties": {
"Text":"₹{Amount}",
"FontTypefaceImport":"Noway-Medium.otf",
"FontSize":22
}
}
]
}
]
}
]
}
At last guys as you have seen I hope it might help you These are my listview that I have created for you If you like any one of them then do not forget to like the topic and share your opinions
Video
Downloads
App Link :- https://drive.google.com/file/d/1slpcS8Zlxg9jx0g1UjWSdR-tUm4FwPst/view?usp=sharing
Aia Link :- https://drive.google.com/file/d/13FJb6TpDPwfpxctazVRqBsKod-2gRNja/view?usp=sharing
Direct Download :- MultipleListView.aia (464.9 KB)
Schemas
https://drive.google.com/drive/folders/1s-jI80SrpqWxvRu8ozZBUj3j2NrgXyUg?usp=sharing
This guide help me lot
Dont forget to see the part1
Note :- Current version is not working of dynamic component with schema so use 2.0 version
And I thanks to @yusufcihan for his precoius extension
If you want a change then suggest me
