FULL COURSE ANDROID - MVVM, Retrofit2, Live Data, Recyclerview, Glide | API Call | Java | 2020

hey guys welcome back to my channel in today's video i'm going to show you how you can implement mvvm retrofit 2 and recycler view along with i'll show you how you can use the glide library in java so let's get started by adding some packages what we need in our project so i'm adding few packages just to keep the code separate now we need to add some dependencies so let's add those dependencies first of all we need for a retrofit yeah this one retrofit two we need one for recyclerview we need glide second one now we need one dependency for the converter json converter for our retrofit yeah this one retrofit two now one more dependency as we are implementing through the mvvm so we need the life cycle extension as well so let's add that too there you go apply an okay once our projector sync then we'll start so now we need to add some classes so let's add those classes whatever we are going to implement so we need a retrofit instance for network library these two we are going to use for making the api call through the retrofit when we need one class we need for our view model and why i am keeping the name as the movie because we are going to make a api call which will download some images and name of the movies i already found the api i'll show you so let me create few more classes and we need one more separate package for the adapter so as we are going to use recyclerview so we need to create a separate adapter and keep it that in the separate folder so let's create our adapter too yeah so these are all the classes we are going to implement so now start with our view so instead of text view we need here a recycler view so let's add a recycler view and remove whatever we don't need get id as a recycler view that's all for this activity now let's go to first of all our retro instance class and this is the api which we are going to make so let's copy this url and put it here as you are going to hit this url and download that json and then we are going to display that data on our recycler view so let's keep it in there as a base url but the last part we need to use in a different class so let's comment it out and keep it aside now let's create a separate variable for a retro instance for a retrofit now we need a static function which is going to return the retrofit instance so this is the simple singleton uh and here we need to pass the base url and now we need to add the converter as we added a dependency uh json converter so we need to use that json converter here so if you don't add that dependency then here you will see some errors so that's the reason we added the json converter here you can use some other library as well for converting like moshi but i prefer to use the json converter and now this will simply return the instance of retrofit so that's it for this class now go to our interface api service now implement it so as you see like that api is the get api so we are going to implement get it's not the post it's simple get and that is returning the list so we we we are going to create a model class that will be the movie model as we already created but we'll implement it later so let's pass that movie model here give it a name any name whatever you want like get movie list you can give any name of your choice and here we need to pass the second parameter inside the get block which we have commented here so just pass this value from there there you go now it's showing some error i think we need to import something now we need to import there you go so that's it for this class as well so now let's go to our uh retrofit by designing error okay so that's it for this class now let's go ahead and implement our view model or a movie model not the view model just a movie model let's create a constructor for this is simple model class it is going to have two parameter i think uh title we can say and uh another parameter is we have okay we just have three parameters we don't need id so let's ignore it we can create second parameter as a image now we need a segregator for this so and we need to pass it in the constructor as well so let's add it in the constructor simply just creating center and getter footage there we go and we need to set these variables inside the constructorizer that's it for this class and let's go to implement our viewmodel so let's first implement our viewmodel so we need to extend it with the viewmodel now we need to create a constructor now let's create a separate function which is going to make the api call so from here we are going to call our retrofit will make the api calls i am giving this name function as a make api call you can give any name so now we need to create some instance of we need to call api service so we need to initialize it and get the instance of retrofit retrofit instance dot get retro client you and api object of api service and the function we created inside it and we need to enqueue it so we are not seeing enqueue so this is very common mistake which we usually does so the call object it calls it in the import you can see it is calling from the telecom package so just keep it in mind it should not be from the telecom dom telecom package we need to import it from the retrofit 2 call so if you see if you don't see nq function then check the package name here this is a very common mistake when we import packages there you go so when api will be successful here we are going to get the call and now we need to create an observer live data so let's create that so that we can when we get the response from api we just inform our activity which is going to observe this live data and they can update the recycler view so let's create that we need to initialize it in the constructor itself or it's your choice wherever you want to initialize it's not mandatory to initialize in the constructor i'm creating a separate function which is going to return this live data and that's it so our view model is almost ready yeah we need to call it when we got the response so let's send the post value and send our response dot body in case api got failed then we need to simply send null so that we don't display anything on recycler so that's all for our view model now let's go to our main activity and call this view model first of all we need to initialize our recycler view so let's do that copy this id and initialize it find view by id and pass the name now we need to set the linear layout manager to our recycler view so i'm going to use the grid layout manager as this is movie images so i'm going to use the grid and we are just going to use the two columns so that's why i'm passing it to and now we need to set our adapter so we already created a class but we haven't implemented our adapter so let's pass let's initialize it here and then we will write the code for our adapter currently it's showing because it's not extended with the view model so adapter so let's implement our adapter now and then we'll go back to our activity so let's complete this code that should be recycler view dot adapter and now we need to pass view holder and there you go and now simply implement these three functions in our class and now we are creating another view holder our on view holder class let's create it you now let's change our default view holder to my view holder and here simply call super now we need how it the data is going to look like or how the view is going to look like on recycler view so let's create a separate layout for each row and i'm going to use frame layout instead of linear layout there you go and simply i am adding here uh one text view and one image here that's all we want one or we are going to directly display image on the title which we have in the api so we just need a text view for that so i'm just setting the color size and style and most important we need to pass the id which we are going to use in our adapter and here we need to create a constructor for this adapter so that we can get the data and the context from the activity so we need two parameter here one is context and another one is the list of data so list of movie model those two parameters will be passed from the activity and we need another function in case we are not passing the data from the constructor then we can set it explicitly so like we need to refresh a list or many more purposes so adapter every time need updated data so we can set using this function and when we get the data at that time we need to call notify data set change this is the function which always refresh our list view or the recycler view now in this function we need to inflate our view so what layout file we have created so we need to inflate it here so here we need to pass our layout file name so we gave it as a recycler row so just give it here as it is let's call our views here and this getcount function will return the number of items we are displaying on recyclerview here we need to set the value from our list similarly for image view we need to use the glide library to display the downloaded image so here we need to implement glide now so see now so this is the image url we need to pass and you need to apply how it's gonna look like yes our adapter is ready now now let's go back to our activity and use it so we implemented it like two parameter we need to pass one is context and second is list so let's create an instance of list as well we are just passing it simply now here we need to call our view model observer so let's see how we can complete this so i am simply initializing my viewmodel let me declare it and i'm once that initialization is done then we need to call it observer and keep listening that so we need to keep observe that observer the light data so every time if in the live data there will be any change then we'll get the call here in on change so here we just need to set the data to our adapter yeah i think that's all for okay we need to set the data in our variable as well we don't need this here yeah so we are good for now if in case data is null then we can simply show uh no result found a text view on the screen so let me add that text view as well in case we are not able to make the api call due to some reason it got failed at that time we don't have anything on list view so at that time we can show note result found so let me set that text field here and make its visibility to visible here there is no data and in case we have data that time we need to hide it and let's set the by default visibility to go on so that we don't see anything okay that that's all i think oh yeah one more important step we forgot since we are using a mvvm view model so we need to add these two lines compile options in our gradle file so don't forget to these otherwise you will see some errors or maybe a crash in your application so set the compatibility for your compile and target sdk versions that's it and now sync your project and we are i think missing one more thing uh we need to add the internet permission in our manifest so let's add that too so since you're making the api call making the network call we need that permission in our manifest so let's run our project and see we are able to run it but we can't see anything for now i think we are missing something let's see what we are missing okay so we call view model but we did not call make api call okay i found it we did not call make api call function so let's call that view model dot make api file so technically we are not calling any api let's rerun it and see there you go we are successfully able to implement it we can see the title on each image and we can we are able to successfully download the images as well from the api now let me change the grid to one currently we are seeing two now it is showing on a one each we can change that number and we can see that number of columns now let me show you the click listener on a recycler view how you can implement the click on each item so i'm declaring a interface and i'm defining a function inside it on movie click and it is going to pass a movie model object so we are going to take it as an input in the constructor let's define it and inside over on view holder on bind view holder you need to use this item view dot set on click listener there it and here you need to call over click listeners and the function inside it and pass the value what it needed there you go that's it for handling the click of each row now go to our main activity and pass our listener from here so we need to implement it here in our main activity or you can use anywhere in your project i add it and pass this and once that a user will click then we'll get the call back here so i'm showing just a simple toast here so item click and the movie name dot title that's it let's run it and see so let's click it okay you can see now so as soon as i'm clicking on uh item or a movie name you can see that click listener is getting called let me change it back to two now and see your there's no work or not let's run it there you go so guys thank you so much for watching please like subscribe and share thank you

Channel: LearningWorldz

Views: 25,463

Rating: 4.8210115 out of 5

Keywords:

Id: UEXZQId3hIg

Length: 36min 19sec (2179 seconds)

Published: Sun Oct 11 2020