Android MVVM Retrofit Live Data JAVA Tutorial | News App in Android Studio

[Music] in this video we gonna discuss about mbbm architecture here you can see that in this chart actually this shows that how modules should interact with each other after designing the app also we gonna design a app using this architecture within this video okay so let me take you to the theory part of this model view view model architecture here you can see that the view contains the layout files activity or fragment whereas the view model contains the implementation of the interface the presentation logic and the model is for the business logic and leave out this view part this is a part of mbp and we gonna talk about only the view model part which gonna be the focus of this video tutorial so in this you can see that these are the things which it contains so let me take you to the example news app that we have built up using this architecture here you can see that this app is built up using this architecture within this video so let me take you to the android studio and build or design this app using the android studio and click on create a new project afterwards you have to select empty activity and click on next here you have to give the name of the application so i'm giving the name as mbbm retrofit example okay and make sure the language selected is java then click on finish after that the project will be built out within few seconds okay so now you have to go to in the android manifest file which is located in the manifest folder here you have to give some permissions like i have to give the permission for the internet as the app is going to use the api so the internet is must need it okay right now i'm in the build gradle file which is located in gradle script here we have to add some dependencies so first let me make some space here and then i will open the web browser and search for the dependencies here okay so i'm searching for the retrofit android dependency right now and click on the first result afterwards the site will open and here you have to just scroll it down and search for the android dependency part which is uh being started from the implementation keyword then i'm just scrolling it down let me see so here it is just copy it and go back to the android studio ctrl v paste it okay here you have to give the version as the version is 2.8.1 and 2021 here and now you have to get a json converter so again click on this retrofit configuration and here you can see that json just copy this out ctrl c and then paste it again so here i will just copy it and you know instead of this i'll just paste it which i've copied from the site okay so now click on sync now we have added the retrofit dependencies right now let me go back to the google to add another dependencies so here i will be searching for the glide dependency which will be used for image showing purpose so here we also click on the first result so now it is loading and i'm sorry for the internet being slow okay so here it is just copy this out these two lines you have to copy ctrl c and then go back to the android studio and here you have to paste it out control v okay so these dependencies are added now go back to google again and search for the dependency for google code json converter okay so just click on the first it is just for digitalization purpose copy this out ctrl c and go back to the google sorry go back to the android studio and now paste it okay now uh go back to you don't have to go back to anywhere just i know that dependency it's for the life cycle and this is responsible for the mbbm architecture okay so it is the dependency for live data and its life cycle dependency so android x dot lifecycle then here you have to give the version name for this lifecycle extension it is 2.2 and then zero okay so it is for view model providers library that's why we have added this dependency okay now you have to click on sync now as we have added all the dependencies so now i'm in the layout and i have to create one more file as we are going to use the recyclerview and for recycler view you have to design item so here i have created this for designing a particular row or item for this news app okay so as you can see that first of all change this constraint layout to the relative layout and therefore you have to change this height to wrap content also after that the image view and give its width and height as match parent and 250 dp okay now here you have to give some few properties like margin and scale type for the image so it is center crop and close this image view and add the id for this the most important part is to give the id for any view in xml file okay so now another relative layout with properties width and height as match variant and wrap content and also the alignment parent bottom is true and here you have to give the background color and it is that code hex code for that color so i'm just adding this and creatively out is completed now within this relative layout you have to add the text view so here match parent and wrap content and then id for this text view as tb title so you can see that so it will show you the title for the news and the text color so let you choose the color as fight okay as you can see that now the style so it must be bold other than this padding from the bottom side should be given as 16dp okay this is also completed right now i have closed the relative layout and there is one error let me see okay we have closed the relative layout two times so i have to delete one okay now it is good no error so i'll just scroll down if you have messed up at any way then pause the video and correct your code okay so this is design and now we have to move out to the main activity so here we are and here you can see that this is the default view that we are seeing right now so just remove this textview first of all and then you have to change this constraint layout so do this also make it relatively out instead of constraint layout and here you have to get the background so i'm just giving the background as the black color for this whole relative layout and within this relative layout what you have to add is progress bar as this app is using an api and which is fetching the data from the internet that's why the progress bar is needed as it takes some time to fetch the data so till that time the progress bar will be there also give the id for this progress bar as progress underscore bar again you have to give some another properties like center horizontal and center vertical should be true okay it should be in you know center that's why these two properties now the recycler view the most important part so now the recycler view is added let me give the id for this recycler view and the id is what should be the id for this it is a recycler underscore view okay now this is closed and let me remove this extra space so this is also completed as you can see that our design part is finished now we will be moving forward to the java coding part okay so before that you have to understand the mbbm structure so here you can see that the activity and fragment in the first part you can see yes this part is a part of view that you are seeing on the screen and this is the view model which is providing data for that view okay and it is repository which is having two parts for getting data once from model and sqlite then other one is to use retrofit and web services to fast data from api okay so these two are actually you can relate them like what we have in sqlite is for offline and then the retrofit for online okay now this is all about it and right now you have to create some packages to separate these all things to manage a proper architecture for the mbbm so here i'm creating a package called model and within this model you have to create a class here so let me create that class and the class name is article okay and this has completed the model part again you have to click for the package right click there and then select new then package okay again we have to make constraints also so here again create class give the class name as app constraints okay again create package first of all and after that you have to give the name of the package like repository and click on this repository right click here and within this you have to create java class called article repository okay so again you have to create one more package just select package and then give the name for this package as response okay so within this response you have to create a class and what this class should be is article response okay so again create a package so what should be the name the name should be retrofit okay so within this retrofit you have to click on java class and here you have to give the name as retrofit request okay so again we have to make an interface also so do the same as java class and then select interface and here give the name for the interface as api request okay so this is created again you have to make one more package okay so here the package name should we view and this will contain the main activity so just drag it to the view okay and then click on the refractor so we have dragged it you can see that okay so afterwards you have to create view model okay so let me go for it and here you have to right click and then you then go for the package and afterwards you have to give the name so give the name as view underscore model here you have to create a class view model class okay so it is called article view model okay so again you have to create a new package and give the name as adapter as we are using the recycler view so again you have to create the adapter class so why we are creating these much packages that's why to manage the architecture of mbbm design okay so here you can see that we have created eight packages eight or nine packages okay and each package have its own class and they are well separated so that they can follow the mbbm structure they are following it okay so first of all come to this model class okay the model class is responsible to get the data so uh what should be the data points and that are yet to be taken which is declared in this class okay so what data to be tracked out from there it is decided by this model class so here we are giving it first of all we are getting an image and image could be taken from the image url if you are using an api and then we are serializing it and also giving the exposed okay so that's why we have used that google json converter okay again we have to make another string description and copy these two things annotations like okay and change it to description okay so most of the apis uses the json code or json format of data that's why the android provides these serialize name and expose annotations to use it to get the data from the apis okay so title is done and then description is done and url two images also done now you have to generate what you have to generate is to generate getter and setters select all and then click on ok so you can see that the getter and saturn methods are generated just by right clicking on the spaced area and then click on generate then you can generate them okay so here you can see that this class is error free and now you have to make a method here so what is that method you have to over over load it it's called first of all select none and it is to string okay so uh what it will do it will just change the json format data to to string which we want so we have to keep some you know a format kind of thing here so what is this best board news and then here we are just filtering out our needed data the data which we are required in our app can be filtered out from this function that's why we have given these things you can see that we are just using it for filtering part like from this end point starting point to that particular end point just give me such data otherwise as we don't require the extra data okay so description and then you have to give the next description part and doing the same as in the previous line we have done then again a plus sign and this is the last line so going for the title and then plus and then title then again plus okay and then it is done okay so just a curly brace is required okay so here you can see that almost done but it is showing one error just because we have left out something here let me check out what we have left it out everything is okay the slash sign is there you know this okay let me make some space so that it look good okay you can see that but why this error is occurring actually there is some mistake here so i think in the first line the mistake occurs the best food news we have forgotten to add a plus sign there but let me check for the whole thing not a statement okay i was right so let me see for it okay so let me add plus sign here you can see that the errors got removed so this is also errorly and now i'm just scrolling it down okay and then here i am on google to show you the api which we are going to use news api dot to rg then click on this after that the site will be open it is taking some time as the internet connection is slower so we have no time just to wait for this okay and now i hope that it will open so what this what this api contains this api gives you the news category categorized by it and as well as country wise like if you want to get the news of india and in india you want the particular news category like you want to get the news of sports only or the entertainment only or the business part only then this api can give you that okay and it is done for the different nations also like france england you know many countries it do the same so just a very good api and it's free so here we are and we have to click on this get api key as the site is loaded and you can see in the bottom part the data is in the json format you can see that it is that end point first of all you have to copy this endpoint then we'll get that api in the mean time first of all that end point is needed so just doing it base url and then just paste it here ctrl v okay https secure connection and then we are going for the another string and it is for the api key so for that we have to go back and register so let me go back and click on get api key it is loading here you have to give the name first name like i'm giving techno learning and giving the email address at atul fpc gmail.com and here you can give any password like i'm giving some password of my choice right now as you can see that and then click on i'm not a robot and agree to the terms and then click on submit so the api key is here just copy it and then paste it here done this class is completed the constraints are given and now we have to come in this response article response which is located in response package so for that we have to just make some space here so that we can give some variables here and now i'm making a list and what this list will get actually a list of articles and what does article means is the model class so it is preparing a list of model class items and then generate a method greater and setters for this list and and you can see that again we have to go for that to string method here so are doing the same thing just to get particular text which we required from the data acquired by the api so it is as baseboard news response and then semicolon then plus part and then articles the endpoint okay and again articles then make plus sign again and close it okay so this is error free you can see that no error but we have left something here just make it serialized name okay and then expose okay it is good and the response part is almost completed and we have to move to the retrofit part so just in this interface the api request so make some space here and within this space give go for that get and what uh endpoint will be we are encountering like the top headlines and country and after that this is the country code i n which is used for india and there are many country codes uh which are uh present on the internet you can search for like i think france fr and then d e so you can search it on the internet for the country course then i am selecting the category as business like i want to get the news of business only okay then api key so here i make that api key a variable in that app constraint so we'll just use that okay alt enter okay and then you have to use call so call what article response and then get top head lines okay so just getting the top headlines from there then retrofit request so make some space here and then make a variable private static and then retrofit again public static and then retrofit get retro fit instance okay so it's a method and within this method you have to check for the retrofit f equals to null then what we have to do is just retrofit make this object and then build this and after building this build it's with base url also that base url we have created this within that app constant so we just have to fetch it from there okay so just do the same and you will get the results so base url and then add converter factory and it is json converter factory dot create and then finally build okay so done almost after that you have to do is just make a return statement for this retrofit remove this extra space and remove it from there also this is also completed the retrofit request so it will just request for the data which is caught by the retrofit okay and then adding it to the factory json converter is working there and then creating an object and then finally building it after that we are returning the same now we have to move this to article repository this is located in that repository part where we have to do here in this class first of all make private static final i think yeah final and then string and tag give the reference for this class as article repository dot class get simple name still just to get that reference for this particular class we are using that nan api request repair request okay after that what you have to do is to make a constructor here and just get that api request retrofit request dot get retrofit instance and then create what you have to create a api request here okay so after that what you have to do is to make another method called live data okay so within this template you have to pass out article response and then get dashboard news is a function name okay we're getting the live data afterwards you have to make some final mutable live data then article response okay so mutable live data is being taken out and then it's given name as data so here within this part we are using uh mbbm structure you know we are working on that mutable life data and that with a api with the help of retrofit so here we are api dot request get top headline then enqueue and then finally you know just implement those methods you can see that how we did it and now you have to give the body for these two methods on response and on failure so first the response one if response dot body is not equal to none then what will happen data dot set value and within this you have to give the response dot body okay so this if part is completed and now i'm in this on failure method and here what you have to do is to know just data without set value and go for the null okay on failure results and finally we are here make a written statement return data class classes as referee no error almost everything is good till now and now we have to move backwards and let me see now from where we have to work as i think a few packages are left the view one view model one and then the adapter one so first let me complete that adapter for that recycler view so first of all what you have to do is for this adapter just make a very private final context and then the rt array list and then a list of articles okay articulary list and this adapter so this class should be extended by the recycler view so before that let me see if i can generate something constructor and constructor for these two okay that should be good and right now what i have just said previously just implement that extend it by recyclerview dot adapter and here you have to give the view holder class view folder and that you have to create it that's why click on that red bulb and create this class again you have to implement few methods for this so again the red bulb will appear and click on this then implement methods okay select all and okay here you can see that so we have to work on these methods and that viewholder class so let me first of all come to this view holder and then extended by recyclerview dot view holder again here i have to give some mapping of that particular view that we have created within that news item xml so it is image view and then the text view was there tb title and again you can see that what i have to do is you just implement one method click on red bulb and then this method should be implemented and within this method you just have to map them with the help of that item view dot find view by id again r dot id and here you have to give the id that ids you have given in the xml should be correctly given here okay and do the same for the tv title find view id r dot id and then tv title okay you can see that here you have to return the size of that arraylist so arraylist.site will return it and within this function called oncreateviewholder you just have to write two lines only just to create a view and to inflate that layout from parent dot context here without get context again just inflate it by that particular item that we have created for a particular row in the xml so news item then parent and make it false here attach to root and then we have to return something so just return new view holder and pass this view within it okay so now i'm in this onbind viewholder method and within this method you have to make article articlearlist.k and getposition position and then we are fetching you know particular item from that arraylist and then we just have to you know give this to the holder so holder dot tv title and what this turned out set text and it will have that article dot get set title get title okay not set title so now the glide to load that image article dot get url to image and finally into holder dot image cover again almost everything is completed so just scrolling it down if you have matched it anywhere then please make sure your code is corrected again what these left out view model so i'll just come to this article view model class and within this viewmodel class we have to code this also as we have did it for the another class so here making article repository article repository again and sorry it's a article response you know the variable of particular type but the name given is different don't worry about it i will be correcting it then making live data and you can see that article response and an article response live data again here you have to generate constructor select both but we have generated this constructor wrongly so first of all let me correct this constructor file so what i will doing here i will just you know remove this so just remove the parameters or while creating that or generating that constructor you have to select none so instead of this what you have to pass out is to pass out the application so application and now make that super method and passing that application and here you have to make some corrections so article response make it article repository instead of article response graphical repository and make it to article repository and then come to this article response live data so article repository get dashboard news okay now one more method and that method will be live data return type and then the name is get dashboard news response live data open the body and here you have to return something just article response live data you have to return it and afterwards remove this extra space from here there is one error let me check out why this error occurs let me check out so i forgot to extend it by you know android view model that's why that error occurs here you can see that now no error the class is error free and now the last class is left out is to do and it is the main activity which is located within that view so let me go to that view and then the main activity so this is only left out okay so here we have to create few objects and it is same one for getting the tag or the reference for this particular class called tag and then get the simpler name so for doing this that simple name afterwards the another one for recyclerview it's recycler underscore view and then the progress bar it should also be progress underscore bar okay then again one more it is linear layout manager layout manager and then following this a list and template should be article let me check out it is article and then its name article arraylist and make it here okay and then article view model object afterwards vertical adapter object so almost this part is finished now um within this method call oncreate and from here what you have to do is to make two methods only then slice method in it and another method get articles first of all let's generate this method so this method is called init method and within this method what we will do just to map this progress bar and that recycler view so doing the same for that recycler view here you can see that and now the layout manager so new layout manager and pass the main activity contact within this layout manager then recycler view dot set layout manager pass that layout manager again recycler view dot set has fixed size make it true and then the adapter and the adapter class name is article adapter pass main activity reference within this also the articulary list and then recyclerview.set adapter pass this adapter okay and then article view model so view model providers dot off and then pass the reference of this activity and then get article view model dot class okay so remove this extra space from here and now the second method get article just click on this red velvet and create this method so this is the last method that we have to create right now so let me go with this dot get articleviewmodel.get forward news response live data then dot observe and passing out all this thing and then for this article response you have to go for the lambda function here and make that if condition article response is not null and article spawn.cat articles is not null again one more and and then not article response dot get article dot is empty then what will this if condition do is to make that progress bar into the action set visibility and visible view dot gone okay so the progress bar will no longer be visible then make a list here list of articles article list and then what you have to do is article response dot cat articles and again you have to do is article array list dot add for all and then you have to add this array list within the main array list and then your notifying change to the adapter okay remove this extra space from here also and now i will be just scrolling it this is also error free you can see that and now i will be just running the app to show you the result so let me first of all take you within this api request and show you the difference between country and category news okay you can see that country is given as india and category is business so on result you will understand this whole thing so i am changing the category to entertainment here let me run the application i have clicked on that run button and it is installing and right now successfully installed here you can see that the news from the entertainment industry of india called bollywood is showing up okay so after that just change it to just remove this and make it business instead of entertainment run this again so now you can see that the business news is appearing on the screen okay again i have to change it and i don't want category i want just all the news okay so just run this you can see that the news from various categories are appearing that's why that api is useful okay so now i have to change the country i will just change the country name and give it to d e and then run it so here you can see that the country changed news changed okay so you can use this example very beneficially beneficially also you can subscribe us

Channel: Techno Learning

Views: 3,024

Keywords: mvvm tutorial, android mvvm tutorial, android mvvm architecture, mvvm android java, mvvm java tutorial, news app in android studio, model view view model tutorial, android studio java, android studio tutorial, android app development tutorial, android app development with mvvm, app development with mvvm architecture, mvvm complete study, android app using mvvm, android with java tutorial, java tutorial, retrofit android tutorial, final year project in android studio, livedata

Id: vlfSvPR_SDM

Length: 52min 33sec (3153 seconds)

Published: Tue Jan 26 2021