Firestore Data to Recyclerview | How to Retrieve Firestore data into Recyclerview | Android Studio

hey there everyone welcome to another video fox android so in this video we're gonna learn how to fetch the data from the firebase cloud firestore directly into the recycler view of our android application light so let me just give you a brief pronunciation of what we're gonna get so if you can see on my mobile screen i have this button if i just press this button and we go to the next activity so you can see we have various items inside this recycler view basically it contains the first name last name and age of the user so as you can see in our firebase project we have various documents here right and each document contains the data about the user for example this contains the first name last name and age of the user right so if i open another document it contains the data of some other user right and we have fetched all that data to the recycler view and if you can see here we have also ordered it in the ascending order of the name right so the whose name starts with a appears first and then bcd in the ascending order right so we're gonna learn how to fetch the data and order it in certain way and also how to apply the queries on the data while fetching from the cloud firestore right so if you want to implement the same to your android application make sure you watch this video till the end so without much to do let's get started so guys if you're new to this channel make sure to hit that subscribe button and press the bell notification icon for saving notification of the upcoming videos and by the end of the video if you like the video make sure to hit that thumbs up button as well so okay guys the very first thing we need to do is to connect our project to the firebase project right we need to connect the app so for that we used to go to tools firebase and window will open up right so if you have already connected your project to the firebase you can skip this right then just uh search for firestore so let me just scroll it up so cloud firestore get started connect to firebase so this will just open up our browser so here you can create a new project and if you have the existing project you can connect with that in my case i have the project so i'll just click on that click on this connect button so okay our app has been connected so you can see connected now we need to add the dependencies for that just click here accept changes now it will just implement all the dependencies that we need and build the project so let's wait for that okay guys the dependencies has been added to our project so let me just close this assistant window so this is the activity where we are going to implement the cycle view right so let me just leave this and put a recycler view here so let's just constraint it to the parent horizontally and vertically and let me just give it a id of recycled view only so now for the individual item of the cycle view we are going to create a new layout resource file so for that just right click on the layout layout resource file the root element for this layout will be the card view and let us just name it as item click ok so we have got the layout file here so let me just rearrange this so i'm gonna quickly design this then i'll explain what i've done right and audio [Music] now so case we have designed this individual item right so let me just explain the hierarchy right so inside this cardview layout we have a vertical linear layout and then we have three horizontal linear layouts inside which we have two text views and i have given the id to every second text use in which we are going to inflate or populate the data right so for example first name last name and each so that is all we need to do in the front end part so let us just go to the back end code so let me just go to the main activity now to store the data of an individual user we need to create a data class right or model class which will store the data of every user so for that let me just create a new java class go here new java class let me just name it as user and now in my case i'm going to store the user's first name last name and age right so it can vary according to your application so whatever data you want to store you can declare those variables here so for example let me just declare first name last name and the page so let me just focus on one thing here make sure that the spelling of this particular variable matches with this field name right for example here the spelling is first name right and n is capital make sure that these both things are same otherwise while fetching the data you will face the problem you will not get the data inside this cycle view and you will not be able to find the error so first name last name and h and make sure the type of the variable should also match with this for example here the first name and last name is the string type and age is a number so that's why i put in long for the age right so that is all you need to do so let us just create getter and setter method so for that just right click generate getter and setter right select all the fields and this will be created so this is required while you are fetching the data from the firestore right the firebase will be using these methods and we also need one constructor so right click generate constructor so this is for our application right and for the firestore we also need an empty constructor as well so just create the empty constructor here right that is all we need to do inside the model class so for feeding the data to the recycler view you all know that we need adapter for that so let us just create a adapter class let us name it as my adapter it will extend the recycle view dot adapter and let me just pass in my adapter dot my view holder right now let us just implement certain methods so click here alt enter implement methods implement all these methods and now we need to create a inner class so for that public static plus and we are going to name it as my view holder and this class will extend recycler view dot view holder right so now we need to override a method so click here alt enter create constructor matching super right so we have got this so now we are going to declare two variables here the first one will be context right and the second will be a array list of the type user it will contain the user class objects right so let us just name it as user array list and now we are going to create a constructor for this so right click generate constructor select both these elements press shift and down arrow okay we got the constructor so the very first thing we are going to do is we are going to return the item count so item count will be the length of this rls so user arraylist dot size right so that is it we need to do in this particular method so inside this myviewholder we are going to refer to all the elements of the item a particular item for example in my case i want to populate the data into these three fields this uh first name last name and the age right so i'm going to refer all these elements so let me just quickly do that so all right we have referred to all these three elements right that we are going to populate with the data so after that we are going to override this method oncreate viewholder so inside this we are going to create a reference variable for the view layout inflator dot from we'll pass the context here and now we are going to pass the layout that we have made here the item layout resource file right and here we'll return the object of myviewholder right and we'll pass this view inside this as an argument and the last method we need to overwrite is this onbindviewholder so inside this will create object of user class and we'll get the object from this arraylist using this position so i'll user rlist dot get and we'll pass the position here now we have got the element the user object right so folder dot first name dot set text so user dot first name right and similarly we'll do for the other two things so in the third case we have converted the integer type right the long type data to a string using string class right so that's why we use this and inside this we have set the first name and the last name so that is all we need to do inside this adapter class now we'll just go to the main activity where we want to implement this so let me just declare certain variables here okay so we have deleted certain variables and we have referred to the cycler view and we have set certain attributes for the cyclic so the very first thing we are going to do here is we are going to initialize the firebase firestore right so for that uh we will use firebase firestore dot get instance so we'll get the instance for the files tool now uh we have the user array list so inside this will be storing the whole data so let us just in initialize it new arraylist and the type of which will be user and now let us initialize the adapter as well so new my adapter so the very first thing we need to pass as an argument is the context and second thing will be the playlist so i guess it is small my yeah so we have initialized all the things right so now for getting the data from the firestore we'll just create a new method event you can name it according to your application i'll just name it as even change listener now let us just create this function now inside this function we will refer to the collection so db.collection and the name of our collection is users i guess this is the collection name so i'll pass users right and dot add snapshot listener right new even listener so now this is the callback method this callback method will be called in four cases the first one is the when a new data is added right or someone has modified the data or remove the data and when you run the application and you attach this listener for the first time it will get all the data from the firebase so we are going to use this now in case you want to order your data right while fetching from the firestore you want that your data should be already in certain manner so for that you can just use order by right for example you want to order it by the first name so the name of the field so name of the field is first name and i want it in the ascending order right so directions.ascending all right so you can also apply some queries here for example dot greater than you can just play around with these things so for example in this we are going to put put the data in ascending order according to the first thing right so now uh on event will be called so we'll will get the value inside this as a query snapshot right so if there is some error we'll get it here so first we'll check if error is not equal to null that means there is some error then let us just log the error and return from this particular callback method now we'll return from here only if there is any error right so in case we get the data we'll be using for loop for so if dc.cat type is equal to document change dot type dot so we have three methods added modified and removed so here we'll be using added only right for example this will be called whenever our data is added and it will always be called for the first time when we are launching the app you can also use modified if the data is modified what you want to do with that if data is removed what you want to do with that right so edit so now if data is added we will fetch that data to our array list right so let me just put the semicolon here so we'll put the data in user arraylist dot add so dc dot get document we'll convert it to the object of user class right so when we look through this for loop we'll get all the data inside this user array list right so after that we will call myadapter.notify dataset change so this is how we'll get all the data from the file store and we'll put it inside the user array list right so now when we just open this activity it will take a time to fetch the data so we do not want the user to see a blank screen right white screen or a blank screen that doesn't give a nice user experience so for that what we'll do is so whenever the activity is launched right we'll raise a progress dialog right so let me just quickly do that so the very first thing we are going to do is we are going to show the progress dialog bar and inside this if there is error we'll use if progress okay we need to declare it outside this method wait so if progress dialog is showing then we're going to dismiss it and i'll just simply copy this and put it here as well so okay guys that is pretty much everything we need to do to implement this feature to our android application so let me just check that if everything is sorted we have the layout manager i guess we are missing something we have haven't set the adapter to the cycler view so this actor view dot set adapter and we'll set this adapter so let me just quickly install this app to my cell phone and check if it is working fine or not right so case the app has been installed to my cell phone as you can see on my mobile screen if i just tap on this button so here you can see we have fetched all the data and the data is ordered in the ascending order according to the first name right so we have got all the data so let us just check one more thing that if we add another document so let me just quickly add the document now now if i just add this document the data should get updated in the recycler view without refreshing it right let's just save this and if i just scroll it up you can see kiara sharma 18. so that means we can uh listen to all the events in real time as well if someone changes anything in the user's collection it will automatically be updated in the recycler view so i guess we have successfully implemented this feature to our android application right so i also hope that you guys have understood the code in case of any doubt you can always ask me in the comment section or you can dm me on instagram the instagram username will be there on your screen right now and if you like the video make sure to hit that thumbs up button and in case you're into this channel make sure to hit that subscribe button press the bell notification icon for seeing notification of the upcoming videos so that is it for today's video see another video bye [Music] you

Channel: Foxandroid

Views: 37,409

Keywords: android studio, firebase, firestore, recyclerview, firestore data to recyclerview, firestore recyclerview, firestore query, firestore order by, retrieve data from firestore to recyclerview, firestore ui, recyclerview adapter, firestore adapter, firestore document to recyclerview, firestore database to recyclerview, firestore android studio, firestore collection to recyclerview, firestore query recyclerview, firestore orderby recyclerview, 2021, foxandroid, android studio tutorial

Id: Az4gXQAP-a4

Length: 22min 3sec (1323 seconds)

Published: Wed May 19 2021