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:

90 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
Dynamic components slow loading
Need New Listview Extension
Parallax Effect In Kodular (Step-By-Step Guide)
How to create listview Like this -
Multiple Listview design by dynamic components extension | Guide
Help me to creat this type of list view in my app
Dynamic layout with airtable (or any database)
Load items as user Scrolls
I get this beautiful design can i put it on my app?
How to add these button on listview
Dynamic custom list from firebase
Need New Listview Extension
Control of a specific dynamic component
vvhvhhvI want to fuyfyufyudo the same design for the n
How to add time and number of viewers?
Items with Dynamic Component
How to create this type transaction History in our app with firebase
How to change the position of dynamic button
How to change the position of dynamic button
How to change the position of dynamic button
How to change the position of dynamic button
Image categories
Add a list to Dynamic Card
Add a list to Dynamic Card
How to make search For this
Gamerzzop apk ( help finding bugs )
What is Schema? And how to write one?
Material Icons font in Dynamic Labels
Custom Search Bar with Simple & Dynamic Listview | Guide
How to creat this type of dynamic list view
Community doubt in sidebar
How to change specific value in dynamic component list
How do I (round) an image in a Dynamic List using the following components?
Listview with image, tag item when looked
List View...I would like to display a list like this from TinyDB
[F/OS] - Dynamic Components Extension (for every component) 2.2.2
Help giving me idea on how to create a story app
How can I make a Product Catelogue App?
How to show Font awesome icon in Dynamic list
Component Dynamic - List
How can I create a Dynamic component inside another dynamic component?
Need help showing airtable items in custom list
Please Assist for Image List View and popup
[F/OS] - Dynamic Components Extension (for every component) 2.2.2
Is it possible to turn all these blocks into dynamic component
How to make horizontal list view
How To modify colin tree list view using json file
I Want to develop interface like this please help me if anyone knows
Can any one make a list view extention?
How to display total dynamic cardview
How to set with airtable and which will be the best server
Know More deeper about chatview!
How to style listview elements in such a wonderful manner?
Fetching airtale column data separately
Airtable Post Image+Text System
I need a exetion devploper or a helper and I will pay for it
How to add pre designed horizontal arragment in dynamic card view
Retrive data from firebase and use the data in list view using Dynamic Component
I have a problem with pos screen
Help I need the development of a list cards
Extracts parallel data when you click a dynamic button inside a dynamic card
[OS] Custom YT Channel App + Admin App
What unit are the dynamic button set height & set width blocks using?
I want to add share, copy text and favourite button in the list view component, how can i do this?
Horizontal Dynamic Layout
Listview with icon and text
Animated Lists (Advanced)
Custom ListView [DeepHost] - Icons from Imager Picker?
[F/OS] - Dynamic Components Extension (for every component) 2.2.2
Dynamic components
[PAID] Recycler View - An Extension for creating recycler view in your apps
[F/OS] - Dynamic Components Extension (for every component) 2.2.2
Is my opinion right?
Attempt to read from null array
How to store Images in cache memory?
How to get the data from firebase
How to add new image in custom design listview
Dynamic CardView Template
Floating Button, List view air table
How to create a 3 column grid view using dynamic component extension
Dynamic cardview showing blank
List View with Airtable
List View with Airtable
Editable listview, possible? Alternative?
How to Make App like deep host
How to Make App like deep host
How to make this type of Listview
[Free] Youtube Video Thumbnail Extension
Hi how to set id
Regarding Push Notification ( Onesignal )
How to make on screen folder?
Suggest me a free dynamic list view extension
[F/OS] - Dynamic Components Extension (for every component) 2.2.2
Is it posible to have collin tree list view with variable amount of words per element?
Runtime Error in Dynamic Components Extension
Dynamic images assync loading
Custom Listview
How can I display databases from Firebase to ColinTreeListView?
Help me to creat this type of list view in my app
How to make an app store?

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 @themaayur ! :heart:
Keep up the good work!:+1:

3 Likes

Great guide @themaayur!
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.

3 Likes

You mean Preview of the video. Right

3 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 @themaayur. 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

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

1 Like

Great work, great guide. keep up :star_struck:

1 Like