[PAID] Schema ListView - Render Large Lists with Any Design

Schema List View

This extension helps you to create list view of any type of design with schema very easily. This extension uses recycler view library that allows you to larger no of lists smoothly without any lag.

Features of this extension:

  • Inbuilt Recycler View.
  • Inbuild Image Loader to load heavy images from URLs.
  • Supports schema and template.
  • No separate component creation required.
  • Inbuilt Search Function.
  • Inbuilt Click Listener.
  • 20+ Item Animation.
  • 64+ scroll animations.
  • Supports Grid View.
  • Smooth Scrolling.

All Blocks

Orientations and Layout manager


Scrolling Animations

Item Animators



Let’s see a quick documentation of all the blocks.


This event raises when any error is occurred


This event is triggered when the list is scrolled, you must fill/update the data to your component here with respect to the index.


This event raises when any component is clicked, returns the index, id and the component. You must enable the click listener for the component for this event.


This event raises when any component is long clicked, returns the index, id and the component. You must enable the click listener for the component for this event.


This event raises when list is scrolled


This event raises when list is scrolled fully and reaches to the top end


This event raises when list is scrolled fully and reaches to the bottom end


This event raises when search block updates lists with the given keyword, this will return all the list that you used in Configure block. You must update your data list in order to show new data. Returns the all lists in a single list.


This block initializes the list view in the given container with given configuration


Set the total no. of the item for list view


Call refresh for all items in the list view


Refreshes the list view for a given range


Returns the component with given id from the given parent object


Set the given property of given component


Set the given properties of given component


Load the image to given image or arrangement from given url


Register your all lists in a single list here, these lists will be used to search string and find result.


This block searches the given string in the registered lists, make sure you have configured the lists before.


If you want to show original lists again or clear the search then use this block.


This block updates the item of given index, make sure to update the data in your list


This blocks insert a new item to given index, make sure to add the data in your list


This blocks moves to items of given indices, make sure you update the data in your list


This block removes the item of given index, make sure to remove the data in your respective lists.


This block scroll to the given index


This block scrolls the list to the bottom end


This block scrolls the list to the top end


Returns the index of first visible item of the list view


Returns the index of last visible item of the list view


Returns the horizontal offset


Returns the vertical offset


Set the recycler list view item animator, Note: Item Animator and Animation parameter of Initialize block is different. ItemAnimator only plays animation on add/remove items.


Set the animation duration, this is not for item animator. Make sure to set this property before Initializing else it won’t work.


Set true if you want the animation to be played all time on scrolling list.


Set the no. of columns for grid list view, make sure to set this before initializing the list view.

Documentation generated with Getaix

How to Use

Let’s see a quick usage of the extension. (Usage blocks are of Kodular).

Note: If you are using this extension in any builder other than Kodular then drag a listview component into your project before exporting.

Generate Schema

Since this extension works on schema template principle, here is how you can generate or create template.


There are two schema generators available that you can use to generate your schema.

Guide is also published here:

  1. Create the design that you want to use, after creating it export your AIA.


    Note: Use only those components which are required.

  2. Upload to the generator and enter the screen and author name.


  3. Now click on generate button and you will get your schema.

Method-2(Only for AI2):

  1. Create the design that you want to use, after creating it just select the main/parent component like this.


    Now press Ctrl + C

  2. Go to block section and take a text block and press Ctrl + V.


    You can now use this string template in this extension to proceed.


Let’s play with blocks now.


Before initializing, configure your properties like animation etc.


Here is a list of names that I will use to render data on the list.


Now initialize the list view with template, animations etc.

in : Horizontal/Vertical Arrangement, this will not work with scroll arrangement.
type : Linear/Grid
orientation : Horizontal/Vertical
reverseLayout : pass true if you want to use reverse layout i.e last item of the list will be shown first.
schema : JSON template of your design.
clickListeners: You can enable the clicks on your component directly from here, pass the ids of all the components in a list on which you want to enable the click.
animation : Set scrolling animation
total : Set the total amount of list that you want to show.


Here, you have to fill your data in the components. For example, I am using a simple list view that has a label which shows usernames, so now I will use this event SetValues to set the user names on the label from my above list. Use GetComponent to get the component from the id. You can also perform other tasks here.


This extension provides you direct event to get click on the component, you just need to enable the clicks on Initialize block. This event returns you the id, component and index of the item which is clicked.

So this was the basic usage of the extension for rendering a simple data list.

Add Item


Use NotifyItemInserted to add a new item at any position, just make sure to add the item in your list. Just handle your list and leave the rest to extension

ezgif.com-resize (1)

Remove Item


Use NotifyItemRemoved to remove an item at any position, just make sure to remove the same item from your list.



Move Item


Use NotifyItemMoved to move an item from any position to any new position, just make sure to update your data list accordinly.



Search Feature

This extension provides the search function that allows you to implement search feature very easily. Let’s see how to use it.


For implementing search, first you have to use ConfigureSearch block to register the lists that you want to use for searching strings. This block accepts a list of multiple lists. For example, if you have data like name, surname, address. And you want to search a string in all of these list then just give these lists to this block.


I have created a search bar to get input of the search.
Now track the textbox text and use Search block to search the string, this block will search the given string in the lists that were used to registered by ConfigreLists block.


Once the search is done, OnSearch event will be triggered with the new data, you must update your data list here to show the user new data. sortedList return a list of lists as the search operation were performed in multiple lists(that were registered), so I have used here select list item block to update my original list. This will update and show the new data to users.


Set the textbox empty or search empty string and your original data will be return by OnSearch event to reset the list again, it’s like closing search bar.




IMG_sbtgbn ezgif.com-video-to-gif ezgif.com-gif-maker (1)


For India :- ₹499
Outside India :- 6.28$ + 0.72$(Paypal fees) = 7$

How to buy :

You can buy this extension from AI2 Store
Deep Link for AI2 Store : Click here


Thanks @Shreyash for the super power full Rush .

Thank you
Sumit​ :wink:


Works fine and I tested with 100k items and it loads smoothly. Thanks for this awesome extension


Hello, I have followed his instructions but cannot achieve this effect. Can you give me some instructions? Thanks

Can you show some relevant blocks

Tested on a mobile phone, his display

"name": "SchemaListView",
"metadata-version": 1,
"author": "Unknown",
"platforms": [
"extensions": {
"SchemaListView": "com.sumit.customdesignlistview.SchemaListView"
"keys": [
"components": [
"id": "HorizontalArrangement1{counter}",
"type": "HorizontalArrangement",
"properties": {
"AlignHorizontal": 3,
"AlignVertical": 2,
"Width": -2
"components": [
"id": "Label1{counter}",
"type": "Label",
"properties": {
"Text": "Text for Label1"
"components": []
"id": "Button1{counter}",
"type": "Button",
"properties": {
"Text": "Text for Button1"
"components": []
"id": "SchemaListView1{counter}",
"type": "com.sumit.customdesignlistview.SchemaListView",
"properties": {},
"components": []
"id": "Notifier1{counter}",
"type": "Notifier",
"properties": {},
"components": []

Try the second method of generating a schema.

Which part? Can you give me a little more instructions? Thanks :blush:

this part


I Go to block section and take a text block and press Ctrl + V. , but still can't

{"$components":[{"$Name":"HorizontalArrangement1","$Type":"HorizontalArrangement","$Version":"4","AlignHorizontal":"3","AlignVertical":"2","Width":"-2","Uuid":"942872380","$Components":[{"$Name":"Label1","$Type":"Label","$Version":"5","Text":"Text for Label1","Uuid":"-1170113171"},{"$Name":"Button1","$Type":"Button","$Version":"7","Text":"Text for Button1","Uuid":"1834913060"}]}],"$blocks":["<block xmlns="XHTML namespace" type="component_event" id="h2vQm81n~n!@l$..H2" x="124" y="428"><mutation component_type="Button" is_generic="false" instance_name="Button1" event_name="Click"><field name="COMPONENT_SELECTOR">Button1<statement name="DO"><block type="lists_insert_item" id="SB4q009]v5Tu|UGxK3CY"><value name="LIST"><block type="lexical_variable_get" id="DC;11)5PTF9TJBX-uX2N"><field name="VAR">global name<value name="INDEX"><block type="math_number" id="@Yy0R9F,:}==Ga8O|$Q"><field name="NUM">2<value name="ITEM"><block type="text" id="-5GFUCSjJ5zQ=VorY:?-"><field name="TEXT">Added Item<block type="component_method" id="Qx+S2yXLf[)IMG%y^Q@`"><mutation component_type="SchemaListView" method_name="NotifyItemInserted" is_generic="false" instance_name="SchemaListView1"><field name="COMPONENT_SELECTOR">SchemaListView1<value name="ARG0"><block type="math_number" id="t=!xxH;TRJ6L2D6+~v8"><field name="NUM">2"]}

Use Button1 instead of button in click listeners list in Initialize block. Also you don't need to generate schema for AI2(as you can get it by copying component).

1 Like

in click listeners button text→Button1 , but still not working :pleading_face:

Your schema contains extra invisible components, it's mentioned in a topic to not include them, I would recommend you to read the topic closely once before using the extension. Use the inbuilt Ai2 schema or if you're using generator then be careful while making design.

ok, i clearly understand now, that is working, thank you sumit and all :smiley: :smiley:

1 Like