5 Different Listviews using Dynamic component Extension | Guide

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

image

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

image

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

image

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

image

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

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 :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:

45 Likes

It’s really awesome

1 Like

Thanks, :grin: :grin:

1 Like

Good guide. Its very helpful to me

2 Likes

Thanks, :heart_eyes: :heart_eyes:

2 Likes

Great guide @Maayur ! :heart:
Keep up the good work!:+1:

3 Likes

Great guide @Maayur!
It will surely help many users.

1 Like

Thanks @FahadAhmad @ravigarg ,
Actually I was testing the extension for my other project, I tried different listviews and It was So easy to make a custom listview form the extension. So I made a Guide on it.

All credit goes to @yusufcihan’s Extension without this it was not possible.

3 Likes

Suuuuper… :heart_eyes:

2 Likes

Quick Challenge: You can make dynamically any component by this extension
Try to make like playable video dynamic list. For example when in youtube you stop at a certain point it auto-plays that video.

2 Likes

You mean Preview of the video. Right

2 Likes

Yes it should play in the list view itself.

2 Likes

Also if you allow, make this post a wiki so that everyone can contribute with their unique listviews.

1 Like

Making a Wiki will create a mess. But If Anyone has a

PM me I will add it here with Credit :grin:

3 Likes

Great idea! Keep up the good work.

2 Likes

Really great that you made this @Maayur. This will help a lot of people using the extension.

7 Likes

Thanks @Peter :heart_eyes::heart_eyes::v:

2 Likes

Amazing work

1 Like

@Maayur Sensational. Great work! Very good ! Quality work!

1 Like

Great work, great guide. keep up :star_struck:

1 Like