Custom listview - recyclerview ui extension [Paid]

ABOUT THE EXTENSION
The purpose of this extension is to make wour work minus hard, by simplifyng the mount of blocks you could use to create designs for listview, second and the most important, make the user experience better, make your apps fluid.

The extension is based on RecyclerView, which means that support all its features. But what’s recyclerview? Android Developers page says:

“A flexible view for providing a limited window into a large data set.”

But what does this exactly means? Well, some koders asked on what’s the difference between using this and dynamic components. There are a lot of differences, First, let’s suppose you have a big list data and need to show it in a ListView, but you need custom design on your listview, then you could choose on using Dynamic Components, but there’s a problem, We know dinamyc components create widgets when we want to, so, if we do this for every item in our data list, there will be a LOT of widgets in our screen, this is a memory killer, doing this will produce a fluidity issue, the user experience will not be pleasant.
So what does the RecyclerView do for this purpose? It simply as its name says, recycles the views(widgets in this case).


Look, when you scroll the listview(recyclerview, I’m referring they both the same) the widget at the start goes to the last plus one, and then calls the OnBindView event to edit the content for the new position.
So the widgets that this generates are just the necessary to fill your screen. That is why Android recomends on using RecyclerView for listing data into widgets.

How the extension works?
As showed up above, the Android’s RecyclerView works this way, add the recyclerview to your arrangement, load your widgets design to every row and finally calls the event OnBindView to edit the widgets. This extension provides all of these features.
But older extension has a problem, for create a simple design you should use a lot and large blocks, but now there’s a way to change this. How? Using styles, styles are a group of properties-values that you set to your widgets, so you just have to edit the widget’s properties that you want.
This is an style:


In the block above, I’m just changing the Height and Width properties of Label. There’s another way too, using it in variables, that let us use them in many widgets

Ok and there’s another way, suppose we want to apply just some properties of the style. There’s a block for doing this.

Look, secondlabel will have thos labelStyle’s propertis Width and Height but also will have two more ‘FontSize’ and ‘FontTypeface’

Ok, now let’s see the parent field and what it means. both firstlabel and secondlabel in above blocks, have ‘top’ in parent field, this means that they are ‘top’ children, ‘top’ is added before they, it is an arrangement and will contain these labels. Ex.

SUPPORTED WIDGETS

  1. Arrangements
  2. Buttons and ImageButtons
  3. CardViews
  4. Images
  5. Labels
  6. ProgressBar
  7. RatingBar
  8. TextBox

The properties
As you saw up there, the properties blocks start with an ‘S’ and there are also some values that are supposed to be used to those properties.
Some properties you can change to the widgets:

–Margin and Paddign(Supported for all the widgets)


New CustomListView Extension
After Kodular introduced Dictionaries, I found a way to make the extension use fewer blocks. Now you can make all the designs you want to, using fewer blocks.

–Width, Height and Weight(All widgets)
image

–Stroke, Background and Gradient(All supported for all the widgets)

–Gravity(All widgets)
image
For arrangement disposition : image
–Click property
Specifies if the widget should have a click listener, and set it back to the OnWidgetClicked event.
image

–Button icon(buttons only)
image

–Image Properties (images only)

image

  • ImagePath : url, file path or asset to your picture.
  • ImageRoundedPicture: Specify if all the pictures that you set to the image should be cropped circle.
    image
  • ScaleSize: Specify the image quality from 0 to 10(max quality).
  • ScaleType:

–RatingBar Properties

–ProgressBar Properties

image

–Labels, Buttons and TextBoxes properties

image

Some default values for the properties

LISTVIEW PROPERTIES
recyclerproperties

–Widget EditionBolcks
These blocks allow the edition , when you scroll the listview, the widgets that changes its position needs to be edited according to the position they are.


BLOCKS:

The advantage of this new version is that you can edit properties to many widgets just using one of these blocks. This block s have three ways for usage.
image
Fisrt way, edit the widgets sepparated by commas, and pass the values in a list, ex. colors. Red for label1, blue for label2 and lightblue for label3.
Second way, edit those widgets but just apply the same color for all.
And last, apply the change to one widget.

  • There’s also a block to get TextBox’s text
  • rowPosition is given by events OnWidgetClicked and OnBindView

EVENTS

  • OnBindView
    image
    Called when widgets are coming visible for every scroll. EditBlocks should be used here.
  • OnWidgetClicked
    image
    Called when a widget is clicked, you can use EditBlocks here too to perform actions like changing colors, text, visibility or other properties here.

LISTVIEW PROPERTIES
recyclerproperties

FINALLY, USAGE
Is very simple, first add the ListView to your arrangement, then start the design by using the ‘Add’ blocks, and apply styles for them, then Display the listview with data(list), ex. list of lists.
Finally, configure OnBindView to change the widgets.


SOME NEW FEATURES

  • Edit many blocks with just one block.
  • Load pictures, from assets, from file or from web url.
  • Capacity to round your pictures for images.
  • BACKGROUNDS [GRADIENT(many colors as you want), OVAL, CIRCLE] for every widget.
  • Round corners and borders, with custom color and width.
  • Transform the pictures, with scale size for larger images.
  • Images support scale type.
  • Shadows for every widget.

Allowed Background Color formats
Captura
For adding borders to your widgets, just add StrokeColor to your styles

VERSION 2

  • Responsive design.
  • Fixed button design problems.

VERSION 3
*Fixed font size bug.
PREVIEW AND DEMO APK
[NEW DESIGN EXAMPLE]

BUY

Buy now this extension.
Price: 8$

Extension will be send by email after pay.
[BUY VIA PAYPAL](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6UL97RUDHDJEL

10 Likes

Post some screenshots and post the video directly here.

Screenshot_20200515-101850


Just me?

2 Likes

No I am also with you,:joy::grin:

1 Like

Is this better than Dynamic components extension?

1 Like

I want list to to be separate, it look like its in 1 white page.

The you can use card view and place other components in that card view.

geting error
j1

ok thank you ?

1 Like

Sorry​:sweat_smile:, Images are updated

Why did you mark my comment as solution? I uncheck it.

1 Like

The Extension is based on Recyclerview, is recommended for better performance, look at android developers documentation. And the Extension uses glide too, recommended for loading images.
Concepts are a little bit complicated, first, by using dinamic components, you’re adding widgets to the count you want to, for example I could do a “listview” using dynamic components for a data of 50 items, the dinamic components will create 50 widgets. But what is the data is larger? 100…150 you will have 150 widgets in screen. Wre know , as many widgets we put in screen, the app gets more lagged. The difference is that the RecyclerView, creates just the count of widgets that are necessary to fill your phone screen, and when you scroll, the widgets change their position.

1 Like


Here an image that explains it, widget at first position is moved according to your scroll, all the next widgets do the same. That’s why it’s called RecyclerView, it recycles the views(widgets in case of kodular)

3 Likes

Why you mark his post as the solution again???

Just bought it man.
I really need some performance boost with my custom lists.

Finger crossed, as soon as you send me the extension I’ll check it out!
Thanks!

Can you try to simplify this? Also add a description what each block does.

2 Likes

I just edited the post.

[NEW DESIGN EXAMPLE]

1 Like

Nice extension, I might buy it.

  1. How many sample AIA files will you provide?
  2. This is a suggestion: maybe add an event OnScrolledToTheEnd? So we can load like 20 posts at a time, so it doesn’t take that long.
3 Likes

can you show or give an example how to set recycle list, i got every thing but din’t understand how to set recycle list.
will we have to set block for it or it work automatically.