Android (Kotlin) API call from MVVM using Coroutine, Retrofit, RecyclerView | Image library Picasso

hey guys welcome back to my channel in today's video i'm going to show you how you can use co routine in view model and then we'll make the api call and then we'll get the data from the api and then we'll display it on the recycler view so let's get it started by adding some dependencies in our project so first of all we need to use the retrofit 2 so i'm making i'm going to use the retrofit to make the api call so i'm adding that dependency first and since you're going to use retrofit so we need a converter so i'm using going to use the json converter so i'm adding that dependency now and in this video i'm going to use the picasso just to show the thumbnail on the recycler view so i'm adding that dependency also we are going to use the view model so i am adding the viewmodel dependency let's apply and sync and go to our build.gradle file here we need to add one more dependency that we cannot find over there so i am adding it manually so i'm adding the coroutine dependency over here that's it and we need to sync and then we'll go back to our main activity and since we are going to make the api call so i am adding the user permission or i can say internet permission in our manifest file now i am going to create a class that is for the retrofit so i'm adding a retrofit instance class instead of separately we'll make it a package and then there we are going to move that class so it's better to keep it in the separate package the network one inside this i'm creating a retro service class that is interface actually in retro instance i'm creating a companion object inside it will be defining the url and then we'll create a separate function to get the retro instance this is the github url and i'm going to use that as i said i'm going to create a separate function for getting the retro instance here we'll pass the base url what we define just above and the converter factory so converter factory we just added the json converter so we are going to use that inside our retro service interface i'm changing it to the interface now we need to define our function but that function need to be defined as the suspend function because we are going to use the routine so it should be suspend function and this is the get api and here we need to define the repositories and inside it we need a query parameter so i'm defining a query that is going to be the string type and this is going to return a data class so i am define going to define our recycler list as our data model class i'm creating a separate package for that inside the models package i'm going to keep or creating that class it's the same name and this class is going to be the data class here what parameter we need to have will check the url and see what is the response we are going to get it here is our json which will come inside the response so it's going to return me the items array of items so i'm keeping it inside the array list of certain another data class so i'm giving it as a name recycler data and inside data class you are going to just display the name description let's get the exact name it's here description make sure to copy paste though we have the same name and we need to pass it inside the arraylist type we're going to use the after url so it is inside the owner class so let's define another class as the owner and it's going to keep the same name of the string type and will pass this inside the recycler data with the same name as owner there you go now i'm seeing the red line that is error okay mr colon it's done now let's go to our main activity and add a layout i'm just adding a linear layout because we are going to use the fragment over here so i'm just simply adding one layout instead of directly adding the recycler view so in this video we are going to use the fragment and there we are going to add recycler view that's it for this layout and now i'm adding a uh fragment uh empty fragment i'm gonna have the name recycler list fragment you can give any name but i have some default parameters and i'm not going to use i'm just simply defining a function where we are going to add the fragment to our fragment manager first of all we need to create a instance of our fragment so we already have a function over there that is the static or you can say companion object so let's check what is the function name it's inside companion object that is the new instance let's copy it and use the same function but i see that is taking two parameter but we don't need to pass these any any data to the fragment so i'm removing all this so in case you need to pass some data from one activity to fragment then you can use this but since i'm not going to pass anything so i'm removing all the parameters okay now we need to get the instance of fragment manager we can directly access that and now we need the fragment transaction that we can get from the fragment manager dot begin transaction that returns the fragment transaction here we'll pass our fragment instance of our fragment and then we'll call commit that's it so this will simply add our fragment to our main activity now i'm creating a view model as i said like we are going to use the mvvm so i'm creating a separate view model as the main activity view model you can give any name so it's doesn't matter and is going to be our recycler type inside the init block will simply initialize it now i am creating a function which is going to return this live data based on this live data will be setting up our observers and now this function will be responsible for making the api call to our github search so this here is viewmodelscope.long that is going to be the i o type so this is basically the function for our coroutine so it's basically creating if it's making the api call in the ion instead of the main thread and this function will return as the instance of retro retrofit this function need a query so i am passing some keyword and that will return us the response that is the recycler list and now we'll call pause data post value and response that's it for our view model so let's close this and go back to our fragment and we'll write the code for our fragment now so first of all we need to initialize our recyclerview so i'm creating a separate function for initializing a recyclerview or the viewmodel and we'll call it from this oncreateview we don't have any recycler view currently in our layout so let's add that so i'm simply changing or text you to recyclerview and i'm need to remove this text and we need to give a id to this recyclerview we'll use the same id here and which is going to return as the recycler view now we need to add linear layout manager to our recycler view so let's add that we need to show a separator or we can say a line between each row so i'm adding a item decoration if you don't want then you don't need to do this step we'll set it to the recycler view again add there should be add item decoration yes now as you know recycler view works with the adapter so we need to set an adapter but we don't have yet so let's create adapter separate package for adapters where we are going to keep it in our project inside that i am creating a separate class for my adapter i am giving it as a name recyclerview adapter you can give any name based on your project and now implement now i'm implementing my adapter this is the array list which is going to hold the data which you need to display on the recycler view so this is going to be the type of recycler data now you need to inflate the layout dot in plate here we'll be passing the layout so we don't have a layout let's create our layout file for our recycler row and this bind function is going to have the recycler data as the data we'll call it from the onbindviewholder and that is going to be the that is going to be based on the position which is currently on the visualize let's add our image view as i said like we are going to use image view we are going to implement the picasso on that so i am adding a image where we are going to use the thumb urls also i'm adding another linear layout which is going to have two text to you on it this text is to display name and description you here we are going to set the data to our text view and the mesio now we'll be retrieving the url so based on this url we'll call picasso here here we need to set the url into the will pass the image view that's it it's easy now we'll set our adapter to our recycler view now i'm creating adapter as a global instance and here i am going to get initializing the viewmodel so from here we are going to actually call over all the functions of the viewmodel and then we'll set up the observer will check if recycler list is not null then only initialize then only set the data to our adapter otherwise show a toast to our user if there is no data retrieve due to any reason then we'll show this source to the user and then we'll call our viewmodel function make api call that's it let's run and see so there you go we are able to make the api call successfully but i'm seeing some ui issue like image is little bit big and texture is not aligned properly but good news is like we are able to make the api call and get the data we see some ui issue we can fix it from the recycler list draw we'll set it to the gravity to the center vertical that's it and let's run and see how it look like there you go it's look better than previously so that's all for today's video thank you so much for watching thank you you

Channel: LearningWorldz

Views: 6,960

Rating: 4.7910447 out of 5

Keywords:

Id: sE9khVYBFgE

Length: 26min 53sec (1613 seconds)

Published: Mon Feb 08 2021