Android Kotlin RxJava MVVM Retrofit2 on RecyclerView | Glide | Example 2020

hey guys welcome back to my channel in today's video i'm going to show you how you can use rx java using the retrofit also i'm going to show you the list on a recycler view while making the api call so let's start with adding the dependencies so go to file select structure and click on this plus sign and we need to add some dependencies like recycler view so let's add this we need retrofit so let's add this retrofit two with retrofit we need the converter so let's add that as well we need glide because we are going to make the api call and display the image and we need the viewmodel so let's add the lifecycle extension extensions yep and we need the rx adapter so let's add this one let's sync our project and we need few more dependencies which we can't from there so i'm directly adding in the gradle file this is for rx server and rx android let's sync our project now and since we are going to use the viewmodel so let's add the compatibility source we need source compatibility and then we'll need the target compatibility let our project to be sync now now this is the url which we are going to hit through the retrofit so let's start with adding some packages one package for the keeping the network related classes inside it i am creating one quartal in class that is for our retro instance and another class for retro service that is actually the interface and one model class like the data class so this api is the books related so i'm giving it a name as the book list model let's write the code for our retrofit inside our retro instance so this class will return us the retro instance so base url we have as i show you so let's copy it the same url we are going to use but we need some part in the service class let's keep it aside i'm creating a function which is going to return the retrofit instance so we always use a converter factory for the json but additionally we need to use this factory for rx 7 so this is the only change here we have for rx java so this is mandatory step so don't forget to add this now let's go to our service interface and here we need to create a separate function with the get so that api is the get so we are going to use http method as a cat give it any name it's up to you and this function is going to take input from the user as the query so query is like i'm going to add a text edit text where user can enter any book name and it can be searched and displayed on the recycler view so this query will come from the ui and this is the most important when we are using just retrofit we were calling call and this is the data class here which we are going to use in our service here we need to use observable instead of call so just keep it in mind if you are using rx java then use observable and instead of call but make sure you do not call from the util class make sure to call from rx01 if you call the java.util package then you will see the error and this volume need to be as a parameter which you are going to pass from query now let's write the data class so let's see what we have in our api so it have array of items there you go and inside volume and inside we have description title publisher and this is the image url so first of all we need array of items so add a list of items so what kind of array list will holding so it is the volume let's create another data class and this volume info is a separate class which is going to hold some book info object so let's create book info as well now and book info is going to hold title as a string type second publisher listing type same another is the description and next parameter we need for image so since it is the separate object so we need another data class for images url only and it has two parameter just copy that value small thumbnail we are just going to use a small thumbnail so that's it for these network classes let's create a separate package for our view model so this is the mvvm approach and we need to create a separate viewmodel for our activity so i'm keeping in the separate package itself so let's implement this viewmodel so this view model is going to have one book list live data so that is going to be the mutable live data this is going to be our model type now i need to initialize it simply i'm creating a separate function which is going to return this book list observable and just to update the recycler view on in our activity so we are going to use this in our activity now i'm creating a separate function to make the api call through the retrofit using rx7 and we need to take the input from the user like the book name what they are searching so let's take it from the activity and pass it to our api and now this is the part where we are going to this is the only change where we are going to use for rx java so we need to subscribe on and use subscribers make sure this smallest billing mistake can lead to be a compile time error so make sure it should be subscriber dot io now observer and here we need to pass the main thread now subscribe now we need to write another function which function we are going to use so we need to pass this function inside the subscribe where we need to keep observing the few methods so i'm giving it a any name and it is going to return the observer of type book list model and we need to overwrite these four functions on complete on error on next on subscribe and then pass this function in the subscribe and now when we are we got the data on on error then we need to inform our activity so simply pass it now because we see the error while making the api and on next function if we see that is the success it is going to return the book list model simply pass it on complete is i'm not going to implement it this is usually used to close the progress indicator if you have any and similarly on subscribe this function is used to start the progress bar or previous indicator if you have any since i'm not having so i'm not implementing those two yeah i think we are done with our implementation for our viewmodel we need to call this function and let's make this function as a private because we are not going to call we are going to call just make api function from our activity let's go back and implement our activity first thing we always do like a ui so i'm just adding uh added text on top so that user can enter a book name and we can make the api call with that query parameter and get the list of books and under that i will be adding a recycler view as i said like we are going to display book list on the recycler view now we are done with our layout file so let's initialize our activity now so we need to initialize our recycler view now write a function for it the same function i have already show you in so many videos what what exactly steps we need to do so we need to add a linear layout manager we need to add a item decoration for the separator to display a line and then we need to set the adapter so all the three steps you are going to use implement here you and now we need adapter but we haven't created any adapter so we need to create an adapter as well before we create an adapter let's initialize our edit text where user is going to enter the book name so i'm giving this function name as the initialize search box so that is the added text so let's initialize it as well and i am adding it on a text for text watcher on the text [Music] exchange listener so that if user is entering any character we make the api call so this is usually we do when we implement any kind of search so inside on text change we simply make the api call whatever text user has entered so i'm i am giving it as a name the load api data and the separate function from here we will simply initialize overview model and we'll call the make api call function from the viewmodel now we need to set the observer on our viewmodel so get bookly stop server dot observe and it is going to return the arraylist of book list model okay it is going to return just the object of book list model and that inside will contains the array list of volume info so in case we'll check if book list model is not equal to null then we'll update our adapter else will show a toast message to the user we can get in we can show any message error message yeah so we are i think good for this activity we just need now adapter so let's create a separate package for our adapter inside this i'm going to create a kotlin class and i'm giving it as a name you can give any name book list adapter so it's better and the how you can create adapter i have already shown you in my many videos so i'm following the same steps here only difference is what kind of a data yeah receiving here we need to implement the three function in recyclerviewadapter then we need to create our viewholder class myviewholder i'm doing exactly same what we did in our password here you here is the book list data that is arraylist of volume info object you can double check yes then as usual we need to implement these functions so it is going to return the size of our book list data here we need to inflate a layout so we don't have any layout so let's create another layout for our recyclerview raw in this we need one image view to show the book image and then we need a title we need publisher and we need description so three text view we need here layout is pretty easy you can create your own layout or the way you want to show data in your recycler view so it's totally up to you we are done with our layout so now let's pass the layout name here we need to get get our text view and image view so let's grab those and we'll need to just set the data what we are receiving in volume info object let's get those values so one is title second one is publisher and this one is the description the last one is image view so book image need to show we need to get that now we just need to set these values set to the text views text inside the bind function so whatever we are receiving we just need to set it similarly we need to set the publisher and description now for image view we need to use glide so let's implement that so first of all we need to grab the url the url which we need to respond which will be responsible for getting the image i think that's it for our recyclerview adapter and now let's create an instance of our adapter in our activity we need to initialize this adapter in our init recyclerview function and we now set our adapter to our recycler view if you want to implement click listener then i have already video for that available on my channel so you can take the reference from there and once we got the data then we need to set our adapter so what list we received now we are setting it to our adapter okay this is we need to change it to the that instead of fell items and now we need to notify call notify data set change function of our adapter so that let's get refresh now most important part since we are going to make the api call so we need to add the internet permission in our manifest file so don't forget this and we are acting good for now we are not passing the query parameter so let's pass the query parameter and we need to pass this to the api view model dot make api call and pass the input parameter there you go so now our adapter is ready let's run our application and see let's give a name we are able to run successfully okay so description that that's great description is so big and it's grabbing whole screen so i think we made some mistake in our layout let's check it description it's too big so i'm giving limiting it to the three lines and the height is match parent instead we need to give the wrap content let's run it again and see give your name jungle so we can see now that that's great but still i can't see the images let's see what kind of error we are getting okay yeah i got it got it so we need to go to our android manifest file and you need to add one line here that is android colon this one use clear text and now let's run it and see there you go so you can see the images as well now yeah that's pretty good let me give some another name new york yeah so we can see as soon as we are entering it making the api call and getting the list and updating the recycler so guys that's all for today's video thank you so much for watching please like comment and share thank you

Channel: LearningWorldz

Views: 8,076

Rating: 4.8816566 out of 5

Keywords:

Id: 3-TAwhn7Bcc

Length: 41min 12sec (2472 seconds)

Published: Sat Oct 31 2020