Using Firebase to populate my ListView

Question

I am using Firebase as a Database for my App. I have a problem when I want to populate my ListView with Firebase.

Here is a picture of the result, code, and Database I am using. So I'm asking myself if the problem is with the code or on how I am structuring my database. Thank you.

Result - The result should actually be: The word Test Should be there where the link is, but instead its being added as a new element:

Firebase Database:

This is the method I use to populate my ListView:

private void populateUserInfoList() {
    firebase = new Firebase("https://top-ten-317ef.firebaseio.com");
    firebase.child("ToptenListItem").addListenerForSingleValueEvent(new ValueEventListener() {
        @Override
        public void onDataChange(DataSnapshot snapshot) {

            for (DataSnapshot child : snapshot.getChildren()) {
                String TopTitle = (String) child.getValue(Boolean.parseBoolean("toptitle"));
                String TopPosterPic = (String) child.getValue(Boolean.parseBoolean("topposter"));
                ToptenListItem info = new ToptenListItem(TopTitle, TopPosterPic);
                TopArrayList.add(info);

            }
            Collections.addAll(TopArrayList);
            ToptenItemAdapter adapteri = new ToptenItemAdapter(getContext(), R.layout.itemrow, TopArrayList);
            itemListView.setAdapter(adapteri);

        }

        @Override
        public void onCancelled(FirebaseError firebaseError) {
            String message = "Server error. Refresh page";
            Toast.makeText(getContext(), message, Toast.LENGTH_SHORT).show();
        }


    });
}

You've included a picture of the JSON tree in your question. Please replace that with the actual JSON as text, which you can easily get by clicking the Export button in your Firebase Database console. Having the JSON as text makes it searchable, allows us to easily use it to test with your actual data and use it in our answer and in general is just a Good Thing to do. — Frank van Puffelen, Sep 23 '16 at 01:03

score 0 · Accepted Answer · edited May 23 '17 at 12:00

Instead of a list I suggest you to use a RecyclerView, Android created RecyclerView as a ListView improvement, so yes, you can create an attached list with ListView control, but using RecyclerView is easier and better. You can read more in this post: RecyclerView vs ListView

Also, you can just recover the adapter for your list using a FirebaseRecyclerAdapter which will do all the work for you populating the list and retrieving you all the data that you want(I usually user custom objects in my code which equal the values of my firebase database, in this way, you can use them in your FirebaseRecyclerAdapter to improve the data retrieve)

For example, here i populate a listview of users with a profile image using a FirebaseRecyclerAdapter:

 private void initializeRecyclerAdapter() {
    LinearLayoutManager linearLayoutManager = new LinearLayoutManager(this);
    linearLayoutManager.setReverseLayout(true);
    linearLayoutManager.setStackFromEnd(true);
    mRecyclerUsersView.setLayoutManager(linearLayoutManager);

    Query allPostsQuery = FirebaseUtil.getUsersRef();
    mAdapter = getFirebaseRecyclerAdapter(allPostsQuery);
    mAdapter.registerAdapterDataObserver(new RecyclerView.AdapterDataObserver() {
        @Override
        public void onItemRangeInserted(int positionStart, int itemCount) {
            super.onItemRangeInserted(positionStart, itemCount);
            // TODO: Refresh feed view.
        }
    });

    mRecyclerUsersView.setAdapter(mAdapter);
}

private FirebaseRecyclerAdapter<User, UserListViewHolder> getFirebaseRecyclerAdapter(Query query) {
    return new FirebaseRecyclerAdapter<User, UserListViewHolder>(
            User.class, R.layout.user_row_item, UserListViewHolder.class, query) {

        @Override
        protected void populateViewHolder(UserListViewHolder viewHolder, User user, int position) {
            setupUser(viewHolder, user, position, null);
        }

    };
}

private void setupUser(final UserListViewHolder UserViewHolder, final User user, final int position, final String inPostKey) {
    //Set the items for every new view
    UserViewHolder.setIcon(user.getPhoto_url());
    UserViewHolder.setText(user.getEmail());
    final String postKey;
    if (mAdapter instanceof FirebaseRecyclerAdapter) {
        postKey = ((FirebaseRecyclerAdapter) mAdapter).getRef(position).getKey();
    } else {
        postKey = inPostKey;
    }
    FirebaseUtil.getUsersRef().child(postKey).addListenerForSingleValueEvent(new ValueEventListener() {
        @Override
        public void onDataChange(final DataSnapshot dataSnapshot) {
            //Add users to the newGroup item
            UserViewHolder.setPostClickListener(new UserListViewHolder.UserClickListener() {
                @Override
                public void onUserClick() {
                   // mNewGroup.addUserToGroup(dataSnapshot.getKey());
                    mNewGroupUsers.addUserToGroup(dataSnapshot.getKey());
                }
            });
        }

        @Override
        public void onCancelled(DatabaseError databaseError) {
            //TODO ControlOnCancelled
        }
    });
}

And, as you can see, my User object is so simple(the names of the object variables must equal your firebase items, for sublevels you can use Hashmaps inside your object):

public class User {
private String display_name;
private String email;
private String photo_url;


  //[...] get/set methods and constructors

Finally, here is my viewHolder user class:

public class UserListViewHolder extends RecyclerView.ViewHolder {
    private final View mView;
    private static final int POST_TEXT_MAX_LINES = 6;
    private ImageView mIconView;
    private TextView mAuthorView;
    private UserClickListener mListener;

    public UserListViewHolder(View itemView) {
        super(itemView);
        mView = itemView;
        mIconView = (ImageView) mView.findViewById(R.id.user_image_profile);
        mAuthorView = (TextView) mView.findViewById(R.id.user_text_profile);
        mView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.onUserClick();
            }
        });
    }

    public void setIcon(String url) {
        GlideUtil.loadProfileIcon(url, mIconView);
    }

    public void setPostClickListener(UserClickListener listener) {
        mListener = listener;
    }


    public void setText(final String text) {
        if (text == null || text.isEmpty()) {
            mAuthorView.setVisibility(View.GONE);
            return;
        } else {
            mAuthorView.setVisibility(View.VISIBLE);
            mAuthorView.setText(text);
            mAuthorView.setMaxLines(POST_TEXT_MAX_LINES);
        }
    }

    public interface UserClickListener {
        void onUserClick();
    }
}

Feel free to ask any doubt! hope that it will help you!

Can i see the viewholder class – Diorit Bajrami Sep 23 '16 at 21:01 — Diorit Bajrami, Sep 23 '16 at 21:01
I added it at the end of the post ;) – Francisco Durdin Garcia Sep 24 '16 at 18:33 — Francisco Durdin Garcia, Sep 24 '16 at 18:33

Using Firebase to populate my ListView

1 Answers1