[PAID] Recycler View - An Extension for creating recycler view in your apps

Custom Recycler View

Hello everyone, Today I am publishing my biggest extension ever I made. This extension allows you to create recycler view in your app. This extension works with dynamic components extension by @yusufcihan and you can also use kodular in built dynamic component for making recycler view. This recycler view is different from other. How :- It has grid supported with your desired rows and you can also create the horizontal recycler view too through this extension. This extension also have many animations.

Thanks @David for sponsoring the extension :slightly_smiling_face:

Let see some blocks and their documentation

All Blocks

Properties

image

Available Animation

image

Documentation

component_event(1)

This block raises when the use scroll and you need to change the data in created component. See the usage for more and better understanding

component_event(2)

This event raises when any error occurred like invalid parent view or invalid index or component

component_event(3)

This event is the main event of the recycler view. This will be raised when recycler view calls to create the component. You have create your all component in this blocks. See usage for more info and understanding

component_method(1)

This block create the recycler view in given layout with given orientation. See usage for more info and understanding

component_method(2)

This block add the main or parent component of your design to the parent or view holder of the recycler view. I know it is hard to understand this block. See usage for more info and understanding

component_method(3)

This block changes the ID of the component that you have used in the AddComponentToParent block. See usage for more info and understanding

component_method(4)

This block return the parent or view holder through the component. You have added the parent and component through AddComponentToParent .

component_method(11)

This block returns the container for creating components in it then later you can add those component through AddComponentToParent.

component_method(10)

This block returns the ID of component that you have added through AddComponentToParent blocks

component_method(6)

This block returns the component from the given parent view. It return those component that you have added through AddComponentToParent block.

component_method(5)

This block returns the index of the first visible item of the recycler view.

component_method(7)

This block returns the index of last visible item of the recycler view

component_method(9)

This block returns the true if the recycler view is created or false if not created

image

These are the horizontal and vertical alignment for the recycler view

image

These are two types of property that tells the recycler view to create grid view or linear layout

image

This block set the animation duration for the recycler view

image

This block set the animation that you want

image

This block set the total count of the recycler view. Mean if you have to create 100 component the you will need to give 100 here

image

This block set the rows that you want to create in grid view

Usage

Now I am providing you a little usage for making recycler view

Extension Needed

image

Step by Step

image

You need to create the recycler view first in your desired layout. Also, set the total count of the components that you want to create

image

When the recycler view created it will call the CreateComponent event then you will have to create the component. I have created the component through a procedure.

This is the procedure in which I am creating the component. Make sure to add the main or parent component to the view holder of the recycler view through AddComponentToParent block.

Then you will have to set the data according to the DataBind event. It will be raised when user scrolls the screen and then you will need to change the data. You can take the id of the main component that you have added through AddComponentToParent block through GetIdFromParent block.

Now you are good to go and you have created now a simple design for your recycler view.
You can also use Schema for making components for recycler view.
You can also apply the animation that you want.

Preview

GIF-210620_085805

GIF-210624_091600

GIF-210624_091455

GIF-210624_091352

GIF-210624_091225

Price

Paytm/UPI :- ₹700
PayPal :- 11$

How to buy the extension :

Credit

Thanks to @Mohamed_Tamer for helping me in updating the library.

Thanks to @Shreyash for his super Rush .

Suggestion and issue are welcome

If you like the extension then like the topic
Thank You All

Donate

If you like my work then donate if you can :slightly_smiling_face:

51 Likes

It is indeed a very good extension. looking forward for your improvements and feature updates. welldone.

6 Likes

Amazing extension . :boom:

1 Like

Can we create with schema?

1 Like

Already mentioned in the topic.

You can use any way for making the components dynamically. You just need to add the main or parent view of the design to the view holder or parent variable throughAddComponentToParent block.

As I said It also work with schema. Let know how to use schema with this extension

Blocks

I have used these simple blocks and made a listview with recycler view

There is also same logic that I said in the topic. You have to add the main or root view of the design to the parent or view holder of the recycler view and you are ready.

On data binding I have not focused much. I just used the random item from list so the random name will be shown to our label.

Output

I have taken the schema and whole design from this guide

You can make any design by any method through this recycler view extension.

5 Likes

I want to buy the extension.

1 Like

awesome extension , already i have this extension u can buy this awesome extension and developer support is very good.

6 Likes

I was looking for recyclerview extension for a long time and finally i found it and i bought this extension it is really very nice extension with no bugs with good performance and very easy to use
Thanks sumit for making great extension

5 Likes

Version 2

Hi, Here is version 2 of the recycler view extension with some new features and fixed some bugs that was causing before.

What’s New

  • Smooth Scroll has added(:blush:)
  • Over Scroll effect has added
  • Scroll to position added
  • Get index from parent block has added

Bugs Fixed

  • All animation are now working
  • Export error with phase extension is now solved
  • Apk crash by not using the create components event has solved now

Blocks

IMG_20210715_124111

This event raises when the list is overscrolled with a float parameter named offset. This return offset of the overscrolled. It is a type of effect that is implemented in recycler view in this version. You need to enable it by blocks and OverScroll property.

IMG_20210715_124352

This block scroll the list or design to a given position.

This block return the position or the index of the given parent.

Property for enabling or disabling the smooth scroll on the recycler view.

This property enables or disables the over scroll effect on the recycler view. How it works? See a preview given below.

Properties

Preview

IMG_lbtulk

Over scroll is made with this Library .
You can look the previews of the library for more understanding about this.

Cheers​:innocent:

8 Likes

thank you, it looks great :wink:

Wow overscroll effect looks great​:grinning_face_with_smiling_eyes:

i am interested to buy this extension please send me your contact info that i can contact you in private…

In deephost video recyler it’s free and is for video , I think it sould be free , You can see deephost one , your extionsion is good but I love deephost one

We advise against using anything from deephost because he doesnt support his extensions.

2 Likes

can i use this in your paralax view pager

Version 3

Version 3 of the recycler view extension is released.
In this version, I have added some blocks.

What’s New

  • New blocks added for getting realtime scroll offset.

Bug Fixed

  • While creating recycler view horizontally, a width problem is occuring that is now fixed.

Blocks

component_event

This event occurs when your list scrolling. It returns horizontal offset in x varibable and vertical offset in y varibale.

component_method (1)

Same as above event. Return horizontal offset. This block will work only when you have created the recycler view horizontally.

component_method (2)

Same as above event. Return vertical offset. This block will work only when you have created the recycler view vertical.

I have sent the latest extension to their email. Notify me by PM if I forget you.

Thanks @Franklin_Lopez for suggesting this.

Cheers
Sumit

5 Likes

not working in niotron app builder and mit app inventer
This is only for kodular :disappointed_relieved:

2 Likes

Version 4

Version 4 of the recycler view extension is released.
In this version, A lot of feature and changes are made.

What’s New

  • Move Item listner has added. Now you can move views.

  • Remove Item listener has added. Now you can remove views with position

  • Item change listner has added. Through this block you can update your view with specific position.

  • Views can be draggable now. Draggable property added.

  • Views can be swiped horizontally. Many properties has added fot swiping views.

  • Reverse Layout has added. Now you can make recycler view to work reversly. It may help you to make chat view designs and something.

Bug Fixes

  • Extension was not working on App Inventor and its distros. Now it has fixed :slightly_smiling_face:

Changes

  • Extension now works on all app inventor distros.

  • Extension size has been reduced a lot from 450kb to 80kb. This has possible with super powerful rush. Thank you @Shreyash for your awesome rush.

Blocks Added

image

Three events has been added for item dragging and swiping.

Listners Added

image

These are listeners for telling the recycler view that you have changed anything. They are very necesarry for customising your views.

Note:- You would also need to change your list paramters while using these listners. Otherwise you will get same thing after swiping. FOr ex, If you want to remove an item then you would also need to remove that item from your list(names and title…) and you will also need to reduce the total property of recycler view by 1 as you have removed the item.

Properties Added

image
image
image
image

These are designer properties make view draggable and swipeable.

These features(Draggable and swiping) is available in Custom List View. You can read the docs there and can learn to use thse properties.

Preview

Linear Swiping

IMG_dtgkxw

Grid Swiping

IMG_qwrdjl

Linear Dragging

IMG_gmzcas

I have sent the latest extension to their email. Notify me by PM if I forget you.

Thank you
Sumit​:wink:

9 Likes

Can I create all components like dynamic component extension from this extension?