[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

on_create_view

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

Parameters

root : AndroidViewComponent

on_bind_view

Event raised to bind data to UI.

Parameters

root : AndroidViewComponent
position: Current position.

:black_small_square: Functions

initialize

Initialize RecyclerList inside a layout.

create_component

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

create_template

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

set_properties

Set properties of a component.

get_root_view

Returns the root AndroidViewComponent of a child component.

get_component

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

set_uniuqe_id

Set unique id of a component.

get_unique_id

Get unique id of a component.

is_dynamic

Returns true if the given component is dynamic.

scroll_to_position

smooth_scroll_to_position

Scroll to position.

:black_small_square: Properties

count

Get / Set data count.

layout_managers

Recycler layout managers.

snap_helpers

Recycler snap helpers.

orientations

Use these blocks to define layout orientation of recycler list.

visible_items

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

preview-example-1

:computer: UI

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.

initialize

  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

1.0.0

Latest Version


Opensource

39 Likes

Animations are also coming in next update…

4 Likes

This post was flagged by the community and is temporarily hidden.

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.

3 Likes

Wounderful…

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

6 Likes

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

3 Likes

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 ?

2 Likes

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.

2 Likes

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?

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

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

[image]

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)

VID_20220509085230

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

RecyclerList_3.aia (124.2 KB)

@Mouhammedsyria you can check up now.

4 Likes

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