Android Tutorial 💡 Part 2 Examples - Creating long lists using xCustomListView with Lazy Loading - Newer developers

Hello All,
If you're not experienced with using xCustomListView (xCLV) with Lazy Loading (LL) when it comes to loading long lists of data, then I strongly suggest that you read the following post first >>>💡 Part 1 Basics <<< as this post is all about getting you introduced to the very basics of xCLV with LL.

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 many years in computer programs and also on the web, for example Google, eBay and Facebook used LL for displaying long lists of images and general information. It's a technique used to only load information into a list or card as and when you are getting closer to viewing that particular information. How exactly does LL work. Let's say 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. Using the LIMIT clause is highly recommended for better performance but not essential.

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
Longtime User
Edited: I've updated this project from the code to the database, this was done to speed up the results and to remove the results limit of 2k.

Here is the Lazy Loading example for loading airport information from the included 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. Slower devices will take slightly longer to accomplish the same feat.

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

List population time = 0.47 seconds to populate 7698 airport names

Airports.jpg


Enjoy...
 
Last edited:

Peter Simpson

Expert
Licensed User
Longtime 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
Longtime 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:

Xfood

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

Peter Simpson

Expert
Licensed User
Longtime 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:

hatzisn

Well-Known Member
Licensed User
Longtime User
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.

Task: Write a sentence that describes tranquillity, peace and joy.
Solution: My wife is asleep/out with her friends ;);););)
 

Peter Simpson

Expert
Licensed User
Longtime 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
Longtime 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

Expert
Licensed User
Longtime 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
Longtime User
@Mahares this example is just for showing how one could populate an xCLV with a simple database. Your comments are not really for me as I agree with with your comments as your feedback is correct.

One should in fact index one or more fields(columns) a table to help decrease the time that the database engine takes to process an SELECT statement, thus the data is retrieved much faster than not using indexing. As this is only an example and not an end product, I decided not to copy and past all the relevant field names one at a time as I was suffering from lazyitus at the time 😁, this mean that I just used SELECT * which is fine as for this basic example.

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