How to load limited items from Firebase into ListView

If your Firebase database contains lots of items and you wish to load only limited items from it, so that it loads faster, then you can make use of Firebase Query.

To load limited items from Firebase database, follow the steps given below.

1. Add a ListView listview1 and a TextView textview1 in VIEW area.


2. Create a CustomView custom.xml. This should contain as many TextViews as data to be displayed at each position (let them be textview1, textview2, textview3).

3. Select custom.xml as the CustomView of listview1.

4. Add a FirebaseDB component specific to the firebase path you have in your database.
I have added FirebaseDB component Chat: chat where chat is the path in firebase database, and Chat is a DatabaseReference to created in the app to the Firebase path chat.


5. Add a new number variable limit.

6. Add a String list str and a Map list map1.

7. In onCreate event:
a. Set the number variable limit to 6 (or to the number of items you want to load from Firebase).

b. Then use an add source directly block and use following code:
query = Chat.limitToLast((int)limit);
query.addValueEventListener(valueEventListener1);

Note that here Chat is my FirebaseDB component name. Change it to your FirebaseDB component.

This code will query for the last (limit) items in FirebaseDB Chat. Here the number variable limit has been set to 6 so it will query for last 6 items.

c. At the END of onCreate, close onCreate, declare query and define valueEventListener1 by using following code in add source directly block:

}
com.google.firebase.database.Query query;

ValueEventListener valueEventListener1 = new ValueEventListener() {
@Override public void onDataChange(DataSnapshot _param1) {
try {
str.clear();
map1.clear();
GenericTypeIndicator < HashMap< String, Object>> _ind = new GenericTypeIndicator<HashMap< String, Object>>() {};

for (DataSnapshot _data : _param1.getChildren()) {
str.add(_data.getKey());
HashMap <String, Object> _map= _data.getValue(_ind);
map1.add(_map); }

Note that here str is name of the String list and map1 is name of the Map list I added earlier.

This code takes a snapshot of the results of Firebase Query, and adds all keys in the snapshot to String list, and adds values at each key to the Map list.

e. After this add the blocks:
ListView setListCustomViewData
and
ListView refreshData.



f. After this use another add source directly block and put following code:
} catch (Exception e) { showMessage(e.toString()); } }
@Override public void onCancelled(DatabaseError databaseError) { } }; {

8. Add event textview1 onClick. Here set the number variable limit to limit + 6. Then use add source directly block to put following code:
query = Chat.limitToLast((int)limit);
query.addValueEventListener(valueEventListener1);


9. And event listview1 onBindCustomView. Here set the text of the three TextViews in custom.xml using data from the Map list map1.

10. That's all. Save and run the project. It will display 6 items in beginning and every time textview1 is clicked, it will display 6 more items.

Video illustration:

Comments

  1. So, in the latest version of Sketchware, "add source directly" was removed and now I am a little stuck trying to figure out a work around. I'm not an experienced programmer so forgive the naivety. What would you suggest?

    ReplyDelete
  2. And how can i filter listview data to display only certain records based on my edittext.getText

    ReplyDelete
  3. Please make A tutorial about create a new blood Donation app

    ReplyDelete
  4. I want to retrieve all children from a special child of child

    ReplyDelete
  5. Hi sir I am a fan of your useful tutorial in youtube and blogs can i ask a question how to get the last data in listview that are using firebase i want to transfer the last data of the listview to textview , thank you sir i will wait for your response have a great day.

    ReplyDelete
  6. Can equalsTo be replaced with contains or something similar

    ReplyDelete
  7. Can I use FAB button instead of Load more text view ?

    ReplyDelete
  8. .Add source directly don't work

    ReplyDelete
    Replies
    1. Los códigos son muy antiguos se necesita una renovación

      Delete
  9. Please help .. !!

    How to combine data from 2 databases into one listview?!

    ReplyDelete
  10. What are the variables to be changed, when more than one firebase database components in one activity in the above ASD blocks?

    ReplyDelete
  11. I just want to add a notification feature to my chat app

    ReplyDelete

Post a Comment

Popular posts from this blog

Simple car racing android game in Sketchware

Creating a Drawing View in Sketchware

Enable Fullscreen for Youtube videos in WebView

How to enable upload from webview in Sketchware?

List of Calendar Format symbols valid in Sketchware