MIT App Inventor - How to use RecyclerList extension - 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 Zain UI Hassan 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

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

3) 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. 

4) 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  

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 will be familiar with settings components propertes from dictionary blocks

For example

1) We create a Horizontal Arrangement inside root and we set properties

• Align Horizontal to center
• Height to 5%
• Width to 90%
• and Background Color

2) We create a Label in the Horizontal Arrangement and we set properties

1. Font Size 18
2. Font Bold true
3. Text Color black

And finally we have to bind/assign data to labels. All we need 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 name with the position to that component using SetUniqueId block so that you can access the position later in OnClick event.

For example I altered a little bit my 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 will be 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

Foe example 

You can download test aia from here. For a more advanced guide with UI customizations and custom search you can see MIT App Inventor - How to render larger data sets efficiently using RecyclerList Extension