Android Tutorial 💡 Creating long lists of data using xCLV (xCustomListView) with Lazy Loading - New developers

Peter Simpson

Expert
Licensed User
Hello All,
By now most B4X developers should be aware that you can create long lists or card layouts lists by using >>> XcustomListView <<<, but what many of you are not aware of is the fact that you do not need to pre-load your xCLV (xCustomListView) with all the data at once, doing so can and does in many cases slows down the performance of your applications to an extremely slow crawl. In the link above, Erel not only shows B4X developers how to implement xCLV correctly, but has also added a few link to other associated posts that developers may also find useful, one such useful link is about LL (Lazy loading). Even though the links are there, I personally believe that some developers are not reading the entire post by Erel and are making the fatal mistake of skipping past the images straight to download the example code. Erel has in fact put all the source code necessary to accomplish xCLV with LL in two separate posts, but either too many B4X developers are skipping the links to Erel multiple posts, or developers have absolutely no idea what the term Lazy Loading actually means.

What is Lazy Loading?
Lazy loading is nothing new and has been around for year. It's a technique used to only load the information into a list as and when you are getting closer to viewing that particular information. For example you can only see 10 items in a list on your mobile device screen that actually contains 15 items. As you start scrolling down the list more items will be added to the bottom of that list, the list will be populated like this. 15 items, 30 items, 45 items, 60 items, 75 items etc etc etc until it reached the end of the list. Please note, I'm using 15 as an example but you can set the list population to any amount that you want to within reason. If you are getting your results from a database, I highly recommend that you limit your sql query size to 2000 results, or better still to 1000 results by using the sql LIMIT clause. This will lead to greater performance of your mobile or desktop applications over time as users add more information into databases.

I have attached 4 fully working xCLV with LL examples (1 in each of the first 4 posts in this thread) for new and existing B4X developers to hopefully learn from.

Here is the Lazy Loading example displaying invoices in a list. The B4X logos are randomly selected from the assets folder as each item is being added to the list. There are only 412 invoices in this particular example, but the xCLV can run extremely smoothly with thousands in invoices populating the list.

>>> CLICK HERE <<< to download the Invoices example code.

Invoices.jpg


Thanks again to Erel for creating the B4X suite of development tools. Creating Android, iOS, Desktop and Microcontroller solutions have never been easier to accomplish as B4X is basically the same language throughout all 4 RAD IDE's...
 
Last edited:

Peter Simpson

Expert
Licensed User
Here is the Lazy Loading example for loading airport information from the SQLite database that has 7698 rows of airport data.

In my example video from last week, I was loading all 7698 rows of data directly into the xCLV and it populating extremely quickly. I strongly suggest that you DO NOT replicate what I did and load all the data at once. I have changed the sql query to limit the results to 2000 rows of data. I have a few fast devices that allowed me to accomplish populating all the data relatively quickly, slower devices would definitely struggled to accomplish the same feat.

>>> CLICK HERE <<< to download the Airports example code.

Airports.jpg


Enjoy...
 
Last edited:

Peter Simpson

Expert
Licensed User
Here is the Lazy Loading example for loading Images in this case vehicle manufacturer logos from the assets folder. There are only 126 images in this particular example, but I've tested it with a folder of around 600 images and the xCLV ran extremely smoothly on my test devices.

>>> CLICK HERE <<< to download the images example code.

Logos.jpg


Enjoy...
 
Last edited:

Peter Simpson

Expert
Licensed User
Finally last but not least, we have the last three examples of xCustomListView using Lazy Loading. This time the examples are loading data directly from a RESTful API image server provider on the internet. I'm using my free Pixabay developer API Key which allows developers to perform up to 5000 image search requests per hour for free.

PLEASE TAKE NOTE: I HAVE REMOVED MY PERSONAL DEVELOPER API KEY FROM THE SERVICE MODULES.

To test these particular examples for yourself, you will NEED to sign up HERE to get your free developer API Key. Doing so will allow you to not only test the two example applications in the links below, but you can also create your own image search applications using B4A, B4J and also B4i. Click HERE to see what Pixabay are all about.

The differences between the three example codes are as follows.
  • The Activity search has all the image search routines in a activity module.
  • The Service search has all the image search routines in a module.
  • The Class search dark mode has all the image search routines in a class module, images have rounded corners and the item click event opens a new activity showing more photo information.
>>> CLICK HERE <<< to download the Pixabay Activity search example code.

>>> CLICK HERE <<< to download the Pixabay Service search example code.

>>> CLICK HERE <<< to download the Pixabay Class search dark mode example code.

Standard orange theme
Pixabay.jpg


The dark mode theme example click event takes you to more information about the photo.
PBResults.png


Enjoy...
 
Last edited:

Peter Simpson

Expert
Licensed User
Thank you @MarcoRome, let's hope that new B4X developers find this thread and learn the code to better understand xCLV with LL. I've even put a lot of thought into the title to try to catch the eye of new developers using B4X applications.
 
Last edited:

Xfood

Member
Licensed User
congratulations and thank you for sharing them, they will be of great help to me. Thanks.
 

AnandGupta

Well-Known Member
Licensed User
WOW ! WOW !!
Not only for new developers but many existing members too, including yours truly.

Allow me,
"You remind me of Erel and Klaus".
Working hard for benefit of other members. Thanks you. 👍

Regards,

Anand
 

DroidLyon

Member
Licensed User
Sometimes a like👍 isn't enough .... Thank you so much Peter for an excellent contribution to the community :)
 

Peter Simpson

Expert
Licensed User
"You remind me of Erel and Klaus".
Thank you for the high acclaim, but my name should never never never be mentioned in the same breath as @Erel, @klaus, @DonManfred and plenty of others who have given far more than I have to this great community. I had a free Saturday as my better half Joanne was away with her best friend for the weekend, so that just left our dog Eva and myself in the house. I had a few hours spare on Saturday before going out for a game of snooker, so I created these examples for this great community.

But thank you anyway @AnandGupta 👍

Sometimes a like👍 isn't enough .... Thank you so much Peter for an excellent contribution to the community :)
You and the community are more than welcome.

Thank you :cool:
 
Last edited:

Peter Simpson

Expert
Licensed User
Firstly I have to say a huge thanks to @klaus who spotted a layout issue in the Invoice example, I have since rectified the issue and re-uploaded the Invoice example.

Hello all,
This is a quick message to let developers knows that I've added CSBuilder to the Activity.Title in all the examples above, I've also moved some of the code around to hopefully help newer members to get to grips with the code flow. I've added a third example to Post #4 (screenshots below). The third Pixabay example is based on a class, it's visually themed to mimic dark mode, images have rounded corners and the click event will open a new activity showing more image information from the original web page, see Post #4.

New dark theme example with active click event
PBResults.png


Enjoy...
 

Peter Simpson

Expert
Licensed User
I am using UltimateListView. It is, in my opinion, the best implementation of very long list views so far. Easy implementation for beginners.
Each to their own especially as the ULV is an excellent at displaying long lists. I like really do like the ULV as it's packed with some excellent features that xCLV is also capable of doing, @Erel has posted plenty of examples. But sadly the ULV also comes with one massive downfall as it was released way before the full B4X family of RAD tools were created and integrated with one direction in mind.

Sadly the ULV can't do this in under 11 minutes, actually not at all.
 

Mahares

Well Known Member
Licensed User
Great job Peter. I know the main objective with this tutorial is to demonstrate xCLV and the effect of Lazy Loading om speed which Peter highlighted very well. If you want to even lower the response time, please allow me to add a couple other SQLite tips that can help it:
1. Create an index using the 'name' column since it is the one being sorted.
2. Since the airports table has many fields and there are 5 or 6 fields not used in the query but loaded with data, I would use explicitly only the column names I need for the query to speed it up like: SELECT Name, City, Country, etc......
3. I would do away with the LIMIT in the query and use all 7698 records instead of 2000 in this case because the app has a search by name box feature. If you are searching for an airport that is not in the list of 2000, you will not find it despite being in the table. I ran it on an average device and the 7698 records table loaded in 2.65 sec and the searches by airport were extremely fast (.03 sec)
 

Peter Simpson

Expert
Licensed User
Great job Peter.
Thank you for your kind words, I knew there was a good reason why you were not in my ignore list ;)

1. You are correct with this point. But this is one of about three or four airports databases on my online SQL server, so I quickly converted one over to SQLite and created that demo, so I wasn't really bothered about it.

2. Without looking I believe that I'm using all the records that I've selected, I doubt if I used SELECT * if that's what you are saying. I'll quickly check it tomorrow and change it if need be.

3. If my memory serves me correctly, when you type the search looks through the whole database for results, it has absolutely nothing to do with the limit of 2k, all search results are brought back that matches the search. If you search for the word 'airport' then it will limit the results to 2k as almost all the airport have airport in their names. There are nowhere near 2k results that will match anybody's normal search, 'london' returns 9 or 10 results.

I tested the airport population speed returning all 7k+ on only a few of my devices. I tested on Nexus 5 and 6p, pixel 2 XL, 3 XL and 4 XL, a couple of Samsung devices, last year's Huawei Y6 2019 and an HTC from 2018 too. The 6p, 2, 3 and 4 XL and galaxy edge devices had absolutely no issues whatsoever returning all 7k+ results in well under half a second, the other deviced struggled when populating the table with 7k+ results, they took a couple of seconds.

If you want to talk more then please PM me, as I really do not want to and I refuse point blank to fill up this thread with chatter about databases blah blah blah, especially when it is supposed to be about xCLV using LL 🧐

Thank you for your feedback, but I'm currently watching football, I'm watching the greatest team the world has ever seen ⚽
 
Top