[Guide] How to use RecyclerList extension with large data sets - Basic guide

RecyclerList extension makes it easy to efficiently display large sets of data. You supply the data and define how each item looks, and then the RecyclerView library dynamically creates the elements when they're needed.

As the name implies, RecyclerView recycles those individual elements. When an item scrolls off the screen, RecyclerView doesn't destroy its view. Instead, RecyclerView reuses the view for new items that have scrolled onscreen. This reuse improves app’s performance and responsiveness.

In this guide I will show you how to use RecyclerList extension created by @ZainUlHassan with MIT App Inventor

Lets's start, go to http://ai2.appinventor.mit.edu/ and create a new project and

  • In Designer View
  1. Import the extension to your project

  1. Add a ListView component and hide it -This requirement is needed only when using AI2 otherwise the app will crash

  1. Create your layout, for example I will use a list that will contain clients names and I want to have a horizontal arrangement with a label inside and each label will show client's name.

  1. Insert a Vertical Layout that will serve as the Recycler List's container and hide Horizontal Arrangement

  • Block's View

For testing purposes I have created a list that contains 1200 items that I will use to fill my recycler List but you can import data from any database such as Google Spreadsheet, Airtable, Baserow ...

Now lets start coding

  1. Initialize the recycler view to ListContainer, your Vertical Arrangement
  2. Set layoutManager to LinerLayoutManager because we want to create just one column ( If you wish to create multiple columns lists, use GridLayoutManager instead or if you want to create a Masonry Layout, use StaggeredLayoutManager)
  3. Next set snapHelper to NoSnapHelper as we don’t want any snapping
  4. Define layout orientation of recycler list to vertical
  5. Set reverse to false
  6. Set spanCount to 1 (number of columns) .
  7. Add gap decorator in order to set a gap between list items
  8. Set RecyclerList's Data to your global List

After that we will create our UI using onCreateView block

Note that with this block we only create UI we don’t bind any data here. The parameter root is actually the VerticalArrangement that we will be using as ListContainer.

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. If anyone ever used Dynamic components extension then he/she is familiar with setting components properties from dictionary blocks.

For example

  1. I created a Horizontal Arrangement inside root and I set properties
  • Align Horizontal to center
  • Height to 5%
  • Width to 90%
  • and Background Color
  1. I created a Label in the Horizontal Arrangement and I set properties
  1. Font Size 18
  2. Font Bold true
  3. Text Color black

And finally I binded/assigned data to labels. All we need in this example is to set text to get dataItem

Result is

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

For example I altered a little bit my design and above code and added an empty label as space after first label and a button

and I assigned a unique Id to each button so that I can use it later on when any button clicked event

Now we are able to identify which button for example was clicked using when any button clicked event.

To do that we must first verify whether the click event was not already handled and that the component is dynamic using IsDynamic block. Next we have to save the uique id of button to id variable by using GetUniqueId block. We will also need to create a position variable. In order to extract the position from unique id, we will replace the tag we used when buttons were created from unique id - in my example tag was b. After that we can use this position to show a notifier

You can download a test aia to see how it works Basic_RecyclerList.aia (84.8 KB)

For a more advanced guide with UI customizations,custom search and use of Google Spreadsheet as database you can see MIT App Inventor - How to render larger data sets efficiently using RecyclerList Extension

14 Likes

Hey, nice helpful extension , solved my problem of previous othe extension being laggy for handling data, but im facing an issue that after searching the text as shown in the link shared for larger data sets, the components dont update until scrolled and even the results arent very accurate in my case

Please post a screenshot of your blocks, search was tested on a very large database that contained 5 columns and16000 rows and worked pretty fast and accurate


This may not be the best piece of programming please don't judge, and most of it has been taken from the example in the link above. I just added the part to fetch the data from youtube and convert it into a list.

1 Like

Update , search results are working accurate, its just that screen is not updating with the updated recycler list. How to force update/refresh to show updated list. For now when i scroll down and up it refreshes and shows the correct list.

Waiting for help !!!

Any admins can help ?

For update you have to use once again recyvler set data.

For refresh you swipe down or pull down to get data from the database and repeat the process.. Simple.

BTW, you have not mentioned where do you get your datas

(PS. I am not admin but i know how to handle the recycler view with little knowledge )

1 Like

i read the extension developer's readme text, got to learn he has used a notifyafterdatachanged function in the latest version. One must call it after updating, and he has shown it in his sample .aia also. Hence problem solved