2. Retrieve Firebase data to RecyclerView

hello everyone welcome to my youtube channel in previous video i have already shown you how to create real-time database and firebase and how to set the rules for that so if you have not posted my previous video then just go to description there i put the link for my previous video or you could simply do one thing just click on the suggestion on the right side of the screen okay so here you can see this i've already set some data into this real-time database everything every these stuff i have already shown in the previous video so first watch that and after that continue watching this one so in this video i'm going to show you how to connect this firebase database with the android apk and how to fix the data and also how to fetch this image and show into the android app let me just show you what exactly i'm going to show you in this video so i have started this my emulator is already on so my app is open so you can see this we have fetched the data from the database and the image is faced from the different links which i have stored in this one because it's a different link rahul puja sort of sameed anamika rohit there are six records and if we check in our app we have exactly six travel for btec ec here you can see this it is being matched abc adwords gmail.com and if we modify it the data over here is will be also modified okay so i'm going to show you how to exactly fetch these data and show it to this recycler view for that just move back to this one and first thing i'm going to create a new project so that you start with a fresh you take a fresh start and understand everything so i'm going to click on new project select empty activity click on next and set some name so my name is fbase video face means firebase and i've selected the api 28 that is android 9.0 pi and language is java so just click on finish this will create a new project and this creation totally depends on your system configuration how much fast it will be done okay so mine is taking a little bit of time okay so now everything is ready okay so first thing what we have to do is we have to just click on this tool first thing we have to connect this our app with the firebase database so i i'm going to show you how to do that for that just click on this tools click on firebase make sure your system is connected with the internet while you're performing any task in the android because so many times it downloads something from the internet and if it can't able to download then it's going to show the exception so make sure while whenever you are working with android your system is connected with the internet so now you have to just click on this real-time database click on this get started with the real-time database click on this one connect to firebase click on this and this will open up your firebase console you have to log in with your account in which we have created the project so in previous video i have created this one but i'm going to use this fbase because i have stored the data in the f base that doesn't make any difference so click on this one and it will start connecting it will take few seconds for sure [Music] you have to just click on this connect your android studio project is connected with your firebase android app now move back over here at week's video click on this this will actually add dependency into your griddle so click on this and here you can see this griddle build importing yeah now everything is now our stuff is added next thing what we have to do is just move back over here close this one we don't need this and over here open the project which you have created that is fbase for me just click on this and here you have to whatever name you have given just click on that and after that just click on this one click on the settings and here we find two project because my this the same database is connected with the other app as well that is the other project is f based let me just show you this one f based is connected with this one and for now i have connected with this app based video so just click on this and click on this one google underscore json dot sorry google dash json services.json just click on this it will download a file here you can see this just save this move back over here copy this minimize this one move back to the project click on this right click and paste it with this paste yeah there we go you can change the name i'm going to change this one to google and dash sage services.json and click on refactor and overwrite yeah now we have this now our project is connected with the firebase database okay so you may not find that file which you have added right now when you click on this select project extend this and now here you can find this let me just yeah here google services dot so now this one is added in our project this is very important file without this you can't able to transfer the data over there okay so next thing what we have to do is we have to add some dependency into this gradle build.gradle so just double click on this and move back over here some dependencies are added while we have connected this like firebase dot firebase database and these stuff are added so we are going to use fuel dependencies these are let me just open this firebase ui real-time database uh for that we have to add the dependency this one okay com.firebase ui database and another is circle image and another is glide library we are going to use this glide light temporary here you can read this glide support fetching and recording and displaying video and images and animation gif we are going to show the image so without playing this is not possible to show the image so i'm going to add the dependency for this one this dependency okay so what i did is i have put all the dependency on in one place and my notepad and i'm going to just copy these all and i'm going to put this in the android so this one and i'm going to just make some space for that and i've also used recyclerview card view to create the card view is to actually create the item each item view for the recycler view okay so i guess five is two time i've added so let me remove one i'm going to remove this one okay so firebase ui yeah everything is ready now you can also pause the video and write it manually or you can search it one by one and just click on this sync now it will take few seconds download all the dependencies and now my stuff is ready next thing what we have to do is now our dependency is added so next thing what we have to do is i'm going to provide the link for these all three urls so that you can add the dependency from here in the description of this video so just check out that okay so next thing we have to move to the manifest and just double click on this and here we have to add the internet access uh give the internet permission to this app because this is going to face the data from the firebase without internet that's not possible so for that you could just write user permission android name is android permission dot internet like this now you have to just save this and close this next thing what we have to do is we have to move over here so let me just minimize this one go to resources layout and first thing we have to add a recycle view so let me get just get rid of this one and go back over here search for recyclerview here you can see this just drag and drop it over here and just click on this to constrain these from all side because if you don't constrain it it will show an error click on a split and we have to set some id for this one so i'm going to set the id so id will be rv that is recycler view so now this recycler view have some id now move back to the main activity and here we have to register this so cycler view like this one next thing recycler view is equal to we have to type cast this cycle view find view by id r dot id dot and we have put the id rv after this what we have to do is we have to just write recycler view dot set layout manager and inside this one we have to set new linear layout manager and we have tried this okay so for now the task for this one is done next thing what we have to do is we have to create a model class model is nothing but which type of data you are going to fetch we are going to fetch the four data from our firebase so let me just show you that is course email name and url so we have to create the model for according to these data so back over here and just right click on this click on new select java class and here we have to write i'm going to leave this one main model and just hit enter and inside this one i have we have to just create four variables string and one is name another is course and another is email and another is s-u-r-l s-u-r-l okay so make sure these uh name are exactly same as this one that is course email name as url order making can change but the name and ame course c-o-u-r-s-e e-mail e-m-a-i-l-s url name are saying after this what you have to do is you have to just click on alt and insert and we have to just select the catering status and select all by pressing the serial key and click on ok this will create the getter and status and after this we have to again press the ctrl and insert key sorry alt and insert and if you just click on constructor just click on ok now our constructor is also ready and one more thing what we have to do is we have to just create a one zero or constructor that is for firebase so we need that so you have to just write like this okay so now our model class is ready here you can see this we have the getter and status and we have the constructor with the arguments and one default constructor with zero arguments so let me just close this after this we have to just create a new item so that we can see let me just show you here inside this one this is a recycler view and here we have one item that is that there are different items with sorry the same type of items with different data so this is one item in the recycler view this is another item in the recycler view this is the another view in the recycler view this is another view in the recycle so we have to create one view inside the recycler view for that just move to the layout just right click on this select new layout resource files like this one and i'm going to name this one name underscore item and click on ok and this will create a view like this i'm going to click on a split and i'm going to use this one i'm going to use card view for this one so just change this one to [Music] card view cardio widget card view this one okay so let me just move this a little bit wrap content height will be wrapped content change this one to trap content you have to set few more properties for this one that is card corners corner radius will be 6 db and elevation it will be 6 db and after this we have card use compact padding just change this one to true now everything is ready for this one okay so now we have to add few items that this one because we need one circle image and three text boxes to show the data so all these data will be put inside the related layout and this will be match parent for width and wrap content for this one height and we have to set the padding so padding will be of 15 db like this inside this is a relative layout we have to put the circle image view first so i'm going to put the circle so we have added the dependency for this one so that's why it's showing on the top if you can't able to see this it means that you haven't added the dependency so add that dependency just double click on this and this will ask for the height and width so i'm going to set the 80 tp and the height all will be 80 dp like this after this i have to set the source for this to check the default image so i'm going to set this one yeah here you can see this image is visible over here and i'm going to set the layout center vertical let's go center vertical and change this one to true and i have to set the id for this one id img one and i have to set this civic border with 2db you have to set the border color hashtag ff like this and finally close this one so now our image view is ready to show the image we have set the id also next thing we have to put one text now that will be the name so i'm going to put that text view and this one will be match match parent and wrap content okay so it will be id for this one that is txt name or name text after this i'm going to set some text for now so that will be student name and to set the text style that is bold after this i'm going to set the text size 25 sp and text color will be black so for that either you can set as 0 0 0 or you can set simply text color black so layout is a relative layout so we can set where exactly this needs to be write off id img one so now here you can see this this is on the right of this one and i have to set some margin for this one so margin left that will be 10 db like this yeah this one is looking nice after this we have to set the for one more for the another that is email id and course so i'm going to just copy and paste it once again and i'm going to change the id for this one this will be course text and this will be course name [Music] 25 sp not this is this will be normal so i'm going to just delete this and this will be not right off this is right of image and you have to set this one below layout below at the red id and id will be named text like this this one is looking nice the margin will be 10 db now again we have to copy this once again and paste it over here and we have to change this one to course text from course text to email text and this will be email id and this will be below off below course text like this now this one is looking nice and our view is ready now our menu item is ready so now we have to just set this into the recycler view and we have to show the data okay so for that we have to create the adapter class so move back over here right click on this click on this java class and select main i'm going to name this one meet adapter click on enter after this what we have to do is now our raptor is ready so next thing we have to write over here extends firebase recycler adapter and before we do anything we have to create the view order class so i'm going to name this in class my view holder this will extends recycle view dot view holder like this one and inside this one we have to register the circle circle image view and it will be img and we have three text view text view one is name another is course another is email and now we have to actually just click on this create constructor matching super my virtual class now this type of stuff is will be created and inside this one we have to register this img first img is equal to we have to type cause this so to circle image view then we have to find that view from item view dot find view by id r dot id dot img one like this and after this we have to set the name so name is equal to and this is a text view and again from item view dot find u by id r dot id dot text name like this then we have course is equal to text view item view dot find view by idr dot id dot codes text finally we have email is equal to text view item view dot find u by id r dot id dot email text like this one after this what we have to do is we have to just move back over here just click on this and we have to write like this our model class main model you can name whatever you have set the model name so main model dot comma sorry main adapter adapter and we have to fetch the my view holder like this one after this just click on this and implement methods select all these two click on ok and now two methods which we have over here and again if you click on this create a constructor matching super just click on this one and this will create a constructor over here this one okay number constructor is also ready and we have two methods again now first thing what we have to do is we have to just move back over here in the view holder on create and here we have to bind this view that is main item with the recycler view inside this one so just click enter over here and we have to write view view is equal to layout inflator dot from and where we have to get this parent view group here you can see this view group this parent is over here parent dot get context and outside this one dot inflate r dot layout dot and our item name that is i have given this main item and we have to put comma parent we have to pass these stuff and finally the faults like this attached to it and finally we have to return this view so i'm going to just replace this with new my view holder and we have to pass this view now move back to this on view on bind new holder and here we have to write few lines of code so we have to write like this we have to use this holder that is my viewer type so and right use this folder dot name dot set text and we have to set the text that is from the model dot get name in the same way we have to set for other so holder dot co start set text and inside this one we have to write model dot get course finally we have to write this holder dot email dot set text model dot get email like this one and finally we have to use supply temporary so glide i just added the dependency for that so i can use this glide dot width and here we have to use this holder dot img i'm going to set the image so img dot get context and this one i have to load this dot load model dot get s url we have set the name as url and after this dot placeholder i'm going to use this r dot tribal if there is no image so i can use this anything c o double m o n underscore google sign in button i can dark i can use it for default i can use this and circle crop it will be and if any error occur then again i want to see something so r dot tribal dot common sign in button i can talk normal okay so if there is anything error occurs if it can't able to load the image so it will show the image this one this image you can see small g over here so it will show like that if that shows in your system then there must be some error you have to see it or search it on google and just into holder dot ing so now that's it so now we have set the image and we have did all the binding we have created the constructor default constructor so now our adapter class is ready finally what we have to do is we have to move back to our main activity so move back over here and here we have said the recyclerview so we have to actually put some code over here to actually fetch the data from the recycler sorry face the data from the fireworks and so that the recycler so for that i've already provided the link for this one so for that just click on this real time database and you have to just go down here you have to copy this code that is fiber recycler option chat this chat is not nothing but this is the model class where you have to pass the model class so just copy this and move back over here and just make some space and paste it and in the chat what we have to do is we have to just change this one to our model classes main model so we have to change this one to main model and we have to actually just enter alt enter import class and we also have to import class for this one alt enter okay so we don't have this query okay not not an issue we don't need that set in the place of query we have to write like this firebase firebase database dot get instance dot get reference dot child and we have to pass that database name so so move back over here and here you can see this this one this name you have to pass over there that is students so i'm going to write the students over here the double quotes make sure this spelling that word is right and change this one to main model our stuff is main model also we have to change it over here so main model now our error is gone we don't have any error and finally we have to write a few more line that is main adapter okay so we don't have created the adapter variable over here so i'm going to create one main adapter main adapter like this okay so main adapter and we have to write like new main adapter and inside this one we have to pass the options this variable from here and finally we have to connect to the recycler view dot set adapter we have to set the adapter and this is main adapter okay so now the stuff is ready i guess i missed something in the dependency so actually i have to add few more to more line of code so i'm going to add this you have to uh paste this outside this uh after closing this record august sync now and move back to the main activity and here we go so now our code is ready everything is set and done so let's start this and let's check if this one is working or not so open this this is f base this time it should be fbase video and the data will be same you can see this f base video and let's see okay so let me close these two once again and let's check open this once again so there must be some issue [Music] let's check that okay so what's the issue a default route okay let me just check that if my internet is working or not yeah in my internet is working for me sit in our error opening okay so what we have to do is we have to put some more line of code we have to just enter alt insert and we have to overwrite some methods that is on start and we have to override this on stop select these two and click on ok and on start what we have to do is we have to perform some operation that is start listing so super dot on start main adapter dot start listening and on this one we have to write main adapter dot stop listening like this now start this and now check this if this one is working or not just open yeah here you can see this f base video let me just close this and rest start this one f paste video okay here you can see this this is working and now data is being fetched from the database and it's showing over there so now move back over here and where is my database and here you can see this i'm just going to change this abcs gmail.com to rahu gmail.com let's check this if this one is updated or not if i hit enter and move back over here you can see this gmail.com so now i have your literally be sure that this data is being fetched and shown over here so this is f based video here you can see this and another another app is fbs video so both are different and working very fine okay so in the next video i'm going to show you how to search in data instead of this one and after that i'm going to show you how to edit update and delete the data from this android app with the data inside this one so till then subscribe share with your friends thanks for watching

Channel: BTech Days

Views: 31,181

Keywords: retrieve data from firebase to recyclerview, retrieve data from firebase in android recyclerview, firebase recyclerview, how to retrieve data from firebase, firebase, retrieve data from firebase, retrieve data from firebase in android, retrieve data from firebase to listview, firebase database to android recyclerview, firebase data to android recyclerview, get data from firebase to recyclerview, show firebase data to android recyclerview, retrieve data from firebase android studio

Id: ePKC5ZEqeNY

Length: 32min 45sec (1965 seconds)

Published: Tue May 04 2021