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

[zainulhassan]

Recycler List View

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

---

Documentation

Events

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

Parameters

root : AndroidViewComponent

Event raised to bind data to UI.

Parameters

root : AndroidViewComponent
position: Current position.

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.

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.

---

Sample

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.

Preview

UI

Blocks

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.

2. 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.

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

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

Project Files

• APK File : RecyclerListView.apk (5.2 MB)
• AIA File: RecyclerListView.aia (82.4 KB)

---

Download Extension

1.0.0

• AIX File: com.dreamers.recyclerlist.aix (78.5 KB)

Latest Version

• AIX File : Github

---

Opensource

• Github

[zainulhassan]

Animations are also coming in next update…

[Gareeb_bhai (Premium User)]

It lags fix it first…

[zainulhassan]

Sure why not. Can you share any details?

[hades]

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

[zainulhassan]

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.

[Still-learning (1-2-3-4...)]

Wounderful…

It creates lists faster without lagging…

Awesome work @zainulhassan

Now i become addict to your extension.

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

[zainulhassan]

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

[Franklin_Lopez]

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

[dora_paz (Dora)]

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 ?

[zainulhassan]

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.

[zainulhassan]

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.

[dora_paz (Dora)]

Thank you for clarifying it

[zainulhassan]

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.

[Ammaraldewani]

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

[Ammaraldewani]

@zainulhassan

l 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.

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

[Ammaraldewani]

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

[image]

[Still-learning (1-2-3-4...)]

@Ammaraldewani

procedures Is this true?

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

@zainulhassan

if possible, share the project

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.

[Ammaraldewani]

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 ?

[Still-learning (1-2-3-4...)]

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