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:

If you like this guide then you can support by donating :upside_down_face:

79 Likes
Customized List View
[F/OS] - Dynamic Components Extension (for every component) 2.2.2
How to create recyclerview in kodular
Custom Search Bar with Simple & Dynamic Listview | Guide
How to make youtube videos in list view with video ID
Need New Listview Extension
Dynamic components slow loading
How to create listview Like this -
Parallax Effect In Kodular (Step-By-Step Guide)
Help me to creat this type of list view in my app
How to add these button on listview
How to change the position of dynamic button
Items with Dynamic Component
How to add time and number of viewers?
vvhvhhvI want to fuyfyufyudo the same design for the n
Control of a specific dynamic component
Need New Listview Extension
How to make an app store?
Help me to creat this type of list view in my app
How can I display databases from Firebase to ColinTreeListView?
Custom Listview
Dynamic images assync loading
Runtime Error in Dynamic Components Extension
Is it posible to have collin tree list view with variable amount of words per element?
Suggest me a free dynamic list view extension
How to make on screen folder?
Regarding Push Notification ( Onesignal )
Hi how to set id
[Free] Youtube Video Thumbnail Extension
How to make this type of Listview
How to Make App like deep host
How to Make App like deep host
Editable listview, possible? Alternative?
List View with Airtable
List View with Airtable
Dynamic cardview showing blank
How to store Images in cache memory?
Attempt to read from null array
How to get the data from firebase
Dynamic CardView Template
How to add new image in custom design listview
Is my opinion right?
[F/OS] - Dynamic Components Extension (for every component) 2.2.2
Dynamic components
Animated Lists (Advanced)
Custom ListView [DeepHost] - Icons from Imager Picker?
Load items as user Scrolls
What unit are the dynamic button set height & set width blocks using?
How can I create a Dynamic component inside another dynamic component?
Listview with icon and text
Horizontal Dynamic Layout
[F/OS] - Dynamic Components Extension (for every component) 2.2.2
Please Assist for Image List View and popup
[PAID] Recycler View - An Extension for creating unlimited component without any lag
Component Dynamic - List
How to show Font awesome icon in Dynamic list
How can I make a Product Catelogue App?
Help giving me idea on how to create a story app
List View...I would like to display a list like this from TinyDB
How to create this type transaction History in our app with firebase
[F/OS] - Dynamic Components Extension (for every component) 2.2.2
Dynamic layout with airtable (or any database)
How to create a 3 column grid view using dynamic component extension
Floating Button, List view air table
[F/OS] - Dynamic Components Extension (for every component) 2.2.2
I want to add share, copy text and favourite button in the list view component, how can i do this?
Listview with image, tag item when looked
How do I (round) an image in a Dynamic List using the following components?
How to change specific value in dynamic component list
Dynamic custom list from firebase
Community doubt in sidebar
How to creat this type of dynamic list view
Material Icons font in Dynamic Labels
What is Schema? And how to write one?
Gamerzzop apk ( help finding bugs )
How to make search For this
Add a list to Dynamic Card
Add a list to Dynamic Card
Image categories
Multiple Listview design by dynamic components extension | Guide
How to change the position of dynamic button
How to change the position of dynamic button
How to change the position of dynamic button

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