[F/OS] Recycler List View - Render larger data sets efficiently using `RecyclerView` for AppInventor & Distros

icon Recycler List View

An extension for rendering larger data sets efficiently using RecyclerView for AppInventor & Distros.

:closed_book: Documentation

:black_small_square: Events


Event raised to create UI. Don’t bind any data to the UI here.


root : AndroidViewComponent


Event raised to bind data to UI.


root : AndroidViewComponent
position: Current position.

:black_small_square: Functions


Initialize RecyclerList inside a layout.


Create component inside a layout. For more details see: Dynamic Components


Create components inside a layout using JSON template. See Creating Templates


Set properties of a component.


Returns the root AndroidViewComponent of a child component.


Find a component using tag inside a root component. Returns AndroidViewComponent.


Set unique id of a component.


Get unique id of a component.


Returns true if the given component is dynamic.



Scroll to position.

:black_small_square: Properties


Get / Set data count.


Recycler layout managers.


Recycler snap helpers.


Use these blocks to define layout orientation of recycler list.


Get position of first and last partially and fully visible items.


We will create a simple project that renders buttons inside card. When a button is clicked, it shows snackbar with the id of the button.



:computer: UI



  1. Lets start by initializing the recycler view inside ListContainer. We will use GridLayoutManager because we want to create multiple columns. If you want to create single coulmn lists, use LinearLayoutManager instead. To create a Masonry Layout, use StaggeredLayoutManager. Next we will use NoSnapHelper as we don’t wan’t any snapping. Moreover, snapping only works with LinearLayoutManager. Use LinearSnapHelper to snap items to center & PagerSnapHelper to create a ViewPager snap effect. Next set reverse to false and set spanCount (Number of columns) to 3. Next set the count to 90.


  1. We need to inflate our UI inside OnCreateView. Remember: only create UI, don’t bind any data here. The parameter root is actually a VerticalArrangement. You can style root view just as you would style a vertical arrangement. Now we will create components using CreateComponent block. It takes a layout in which you want to create view, the name of the component, a tag to identify the component inside root view and properties in either a dictionary block or a json string.

    To get a component reference using the root view, use GetComponent block and pass it root view and tag of the desired component.

  1. Inside OnBindView event, we will bind data to the UI. Here we have access to the root view and position. Here we will set the position as text of the button by using SetProperties block.

    To handle click events on a component, it is recommended to set a unique id by joining component name with the position to that component using SetUniqueId block so that you can access the position later in OnClick event.

  1. Now we can handle click events using Any Button.OnClick event from AnyComponent section. First we will verify whether the click event was not already handled and the component is dynamic using IsDynamic block. Next we will save the uique id of button to id variable by using GetUniqueId block. We will also create a position variable. To extract the position from unique id, we will replace the word button from unique id. Now we can use this position to show a snackbar.

:file_folder: Project Files

Download Extension


Latest Version


[Guide] RecyclerList - Google Spreadsheet - Custom Search - How to Add/Delete/Update records
How can i load big data(12600rows) from csv file using kodular dynamic without lag or freeze
Dynamic Cardview: App Crashing
Spreatsheets and search bar and click
Help needed with Airtable - Large data - Custom Search
How can i load big data(12600rows) from csv file using kodular dynamic without lag or freeze
[Guide] How to use RecyclerList extension with Airtable - Custom Search
How to use RecyclerList extension correctly?
How to clear list on recycler list view please help me
I want listview extention with catch image function, i will ready to pay
Scroll list animation
Getting exact position of dynamic components
How to create a 4 column grid view using dynamic component extension
Clock Component In Recycler List View Extension Help Plz To Built
Dynamic component crash.....Please help...I used 500+ item and my dynamic component crashing
Want to add timing, downloading & add to favorites in Mp3 Player
Recycler List View: How to Use?
Need help with Youtube API3 to get all items in list
Dynamic Cardview: App Crashing
List View - disable any click in the list after picking
Recycler View Extension Bug Plz Help Me To Fix This
(Guide) Advance Search With RecyclerList View Extension
[Guide] Schema Template - How to use with Recycler List Extension
Listview with image with 2 Button Like facebook Friend request layout
How to load very large listview without stuck screen
How to clear list on recycler list view please help me
When loading a great amount of dynamic components, the app crashes
Json arranjamento vertical assincrono
Make Loading Things Faster. Multiple Questions
How to implement On screen scroll add list system with Recyclerlistview and airtable and Gsheet
Horizontal RecylerView
Fixing Issues with Recycler List View Extension: Search Results and Screen Transition Crashes
( Relp )How do I show the text inside the notifier?

Animations are also coming in next update…


It lags :man_facepalming::man_facepalming::man_facepalming: fix it first…


Sure why not. Can you share any details?

1 Like

wow, great job, Extremely helpful extension :heart: but unfortunately it’s written in kotlin :sweat_smile:

1 Like

Well kotlin is way too awesome to ignore. Plus you can learn the basics about creating extensions using kotlin with this extension as a sample project.



It creates lists faster without lagging…

Awesome work @zainulhassan

Now i become addict to your extension.

:heart: :heart: :heart: :heart: :heart: :heart:
:clap: :clap:

Single card three button , text from different lists…

(earlier i’ve tested with 1000 buttons, no problem in creation, it creats in microseconds - Best alternate for Dynamic component Extension (My view only))


Thanks buddy. Always a pleasure to make open source projects. Plus if possible, share the project so others could learn too.


How to set a “tag” to a component created with Schema?

1 Like

Also if we want to create a custom search in ListView how this will work ? Is there a way to delete components in order to re create them ?


You can use id and the extension will set it as a tag. But that id doesn’t need to be unique. But make sure to use the tag for one component inside single list item.

You can filter data and store it in a list. Then set count to be equal to length of list. The recycler view will rebuild itself automatically.

I am thinking about changing count to data that would accept a list. And then you will have access to data item inside bind view.


Thank you for clarifying it

1 Like

I haven’t tested schema yet but hopefully it will work. If you have any issues, just mention and I will try to help. Plus if you can share the project containing schema blocks, please do so. It will save me a lot of time. Regards.

Have you tried the search feature on it, according to the normal method, or is there a change in the method of blocks?

1 Like

exctension that I think will make many people prefer kodular!!

1 Like

This extension works as a dynamic component extension ? So there is no big difference in blocks except only in procedures Is this true?


Yes possible, you can do it. Matter of few micro second your list will appear even search items too…

yeah sure, i have re created a sample project with the help of gsheet of having 500 items…

RecyclerList_2.aia (102.6 KB)


Version2 (Search option enabled and everything using single recycler component but different arrangement and same procedur

RecyclerList_3.aia (124.2 KB)

@Ammaraldewani you can check up now.


Can it be used with databases without data delay problems? I mean, for example, placing more than one component of the database within the blocks and recalling them gradually?

like baserow , googlesheet ?

Yes no issue. This extension create components in a lightning fast… Expecting function, remove or delete… re creation is not a big matter.

1 Like