5 Different Listviews using Dynamic component Extension | Guide

List is Loading slowly.

@VSatish no actually i kodded it like only when the image is loaded, it will get the next list, or else it will miss some images and some will not appear

1 Like

you can try it Ayurvedas (6).apk (9.8 MB)
If any error, then say me :slightly_smiling_face:

Ohh Thats why its Looking bit slow. :sweat_smile:

2 Likes

Because the Schema function is released, I converted the first one to JSON.
The first:

{
    "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
                }
            }
        ]
        }
    ]
}

The block part, (sadly you cannot call method block in the Schema)

Second,

{
    "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}"
                                   }
                               } 
                            ]
                        }
                    ]
                }
            ]
        }
    ]
}

Third,

{
    "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
                                }
                            }
                        ]
                    }
            ]
        }
    ]
}

Fourth,

{
    "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"
                            }
                        }
                    ]
                }
            ]
        }
    ]
}

*If you need the extension of Image loader, the id is thumbImage_(id)
Fifth,

{
    "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
                            }
                        }
                    ]
                }
                
            ]
            

        }
    ]
}

*If you need the extension of Image loader, the id is thumb_(id)
Rewritten AIA: ForthcomingAquamarineMacaw (Schema rewritten).aia (380.8 KB)

There is currently something wrong with the big picture (In the 4th and the 5th). It will stretch so wide.
I have no idea why but you can just remove it from the code, and create with blocks

5 Likes

Great :heart_eyes:

1 Like

#offtopic

I also Tried to make Schema for my Design but that was a Successful Failure.
Now i will Try Again with Your Schema as Guide.

1 Like

@WatermelonIce one question does the components load faster by using schema instead of blocks ?

I don’t know. But it definitely saves blocks :+1:

3 Likes

Hello, its me again, I am writing the third Schema. I have a little question:


What are you setting to?

Let me check :sweat_smile:

Actually I was setting button shape to rounded but that time I was getting some error, so I used the get property block.

1 Like

If you want to set it to rounded just put 1
Default: 0
Rounded: 1
Rectangular: 2
Oval: 3

2 Likes

Yes I knew it, but that time I don’t know that, therefore I used that blocks :sweat_smile:

Guys, I have just wrote all schema, please check this updated post:

1 Like

Thanks @WatermelonIce for the great contribution, Can I add it to guide :blush:

Ofc you can, it is your guide and everything belongs to you!

1 Like

@themaayur you have miss the closing bracket in all schema. It is important.
you should put the ``` under the last }

Oops, In which listview. I even didn’t copy properly :sweat_smile:

All of them :upside_down_face: