Building a Complete Android App : Jetpack Compose, MVVM, Coroutines & Dependency Injection

foreign [Music] [Music] thank you thank you so this is going to be the application which we are going to build in today's video we are going to fetch some news from the server if there is no news we are going to show this state that as of now there are no news but let's say we checked after some time we again made one request to the network and if there are proper news articles available we are going to show news in this form every news article will be shown on full screen and like many popular social media apps if we scroll up we are going to see the next news okay we can also scroll back we can check multiple news like this and this is going to be our News application and inside this application we have implemented so many things we have implemented UI layer we have implemented data layer we have implemented dependency injection as well we have implemented all of the things with retrofit core routines flow and data source data source implementation dagger held and mbvm approach all of those things and this is a fully functional Android application it follows best practices and this is built purely in Jetpack compose so let's start today's video where we are going to implement this please watch this video completely and please share your feedback please share your thoughts in the comment section and please hit the Subscribe button let's start coding let's create a new project we are going to select this empty activity we are going to call it news in short this is going to be our package and we are going to go ahead and our project is getting created let's remove these things we will code everything from scratch now the next thing is let's go to our build.gradle let's use 34 as the compile SDK API okay let's modify these Java versions Also let's use 17. in both of these places and here also we are going to use 70. let's use Stargate SDK also 34 and now we can finally sync the project the next thing is as I mentioned that we are trying to create more than one module in this application development video we are going to utilize some of these dependency in second module as well right let's say we create a module for internet related things when we try to make our API calls we will try to just check the internet status we will try to show some kind of error alerts if internet is not present right so these internet related thing we will put in a separate module we'll call it let's say utilities module and some of these dependencies will be utilized there as well so instead of writing these dependencies duplicately in both of these modules we can utilize Center dependency management system and if we are trying to develop modular Android application we need to make sure we are using some kind of technique to achieve Central dependency management okay we can put some kind of dependency in a place and we can utilize from that central place in every module there are two common ways either we can use version catalog this is in early stage we can also use build SRC directory for our Center dependency management system which is a proven Technique we are going to utilize the same in this video so let's start and to create build SRC module let's first choose project window template and we need to select here we need to click on this directory and we will just name it as build SRC okay and let's click on enter so where directory will be created inside this the first step is let's create a file and let's name it build.gradle load kts then inside this build.gradle dot kts file first step is we need to import the code 10 DSL plugin we can import that from kotlin DSL and the plugin name is kotlin DSL this one okay and we need to use this inside the plugin block we need to just write kotlin DSL this plugin we need we need to also use the repositories block and we need to write Marvin Center okay then we can just sync the project and then our Gradle and build folder will be generated now the next step is we need to Define these dependency inside our build SRC module okay how we can do that first of all let's select this and let's create One Directory okay and we are going to take Source slash main slash Java now inside this Java folder we can create one class or let's say one Singleton class we can use object and we can call it dependencies okay and we can create one another class for the respective versions so we can call it versions let's select the object plus itself okay inside dependency we need to define the dependency part and inside version we need to define the respective version so if you are not familiar every dependency has the dependency part before this colon and after colon it has the respective version so let's say if I tell you we need to Define this inside our build SRC module so let's take this dependency come here paste it comment this now you can define a name for this dependency so let's say core KTX by lazy we are going to use lazy initialization and we can Define the dependency part of it so we need to just take what we have before this colon now after the colon we can just take this part we can come to versions We can Define here one version core KTX okay and we can just use the version whatever we have okay this way we can break down this dependency core KTX into two part one for dependency part and then the respective versions We can Define here we can also make it const because this is not going to change any time soon in the project and this is going to be a cone strand itself all right now with the help of these two things what we can do here is we can remove this we can take dependencies Dot core KTX okay which we have defined inside our dependencies file now this dependency need a version so we can just use with the help of dollar symbol version stored core KTX this way we can break down all the dependencies into these two files dependencies and versions similarly I have defined all of these dependency we were using inside our build out Gradle kts inside app module we have the versions as well we have the dependencies as well now we can utilize these inside our build.gradle so we can remove these and we can access from our build SRC directory we can just sync the project now our project is ready and this is the first step in order to achieve modularity inside any project if you are going to build a modular application you need to build multiple modules and those modules will be needing the dependency and if you have all the dependencies in a central place which is our build SRC so we can just access the dependency from this module okay let me show you this so let's say we have one another module coming up and that is going to be Android Library let's call it utilities and let's click on finish so a new module will be created and inside this module we are going to put which we are going to use inside our project okay so this utility also has a build.gradle kts file and if you see this is also having some kind of dependencies right it has the KTX dependency so what we are going to do we will use from over dependencies dot core KTX okay we now need to Define here and you know what is the main advantage of doing that one of course the modular approach another thing is let's say multiple developers are working in a team they are working on different different modules so some developer they were working on this utility module and they started using here some different version and some other developer who were working in app module they were also having the normal static dependency with some different version right so let's say here 1.9.0 were there and somehow someone were using 2.3.0 or something else right so these two dependency will be having two different version inside the same project that should not be the case it can lead to some unwanted issues okay that's why this Central dependency management is the key to go and now inside our utilities we are using from build SRC we can remove this now the next thing is this app Compact and material dependency so do we have yes we have this app Compact and material so we just need to access from there okay like this material we can remove these and few other thing we are going to use Java 17. we need to change here as well inside this also and we are going to use 34 as the compile SDK now we can sing the project and now our project has one new module called utility if you just go to the setting files you will see we have these two module app and utilities and if some of you are wondering that why don't this build SRC is mentioned inside citing stored grader that's because this is a normal directory so now the next thing is we need to use this utility module inside our app module right so we need to do one thing we will go inside the dependency we will Define one object class we'll call it modules we are going to Define here the new modules which we have created right we can just take this path first let's take this module name utilities let's define it with one constraint name utilities and we need to define the path basically we need this module path okay and we can Define it here now we can close everything now if you want to add a module inside another module okay if someone asks you or if you are in a situation that can you add this module inside the app module I want to use utilities module file or functionality inside our app module so we can do that with the help of build.gradle kts we need to integrate here the path to the new module and we can do that with the help of implementation project and we can access from our modules dot utilities now this statement is saying that I am integrating this sub project which we have created with the name of utilities so whatever we will write here inside this module will be available to this app module as well okay now we can sync the project so far our project has turned into a modular application where we have this app module and utilities module we have the central dependency management system with the help of build SRC okay now inside our utilities module we already have one utility function in mind that we are going to make API calls inside this project and we want to make sure when we are initiating API call we are sure that internet is there right so we can Define one class or let's say Singleton class okay and we can call it core utility okay and inside this we can define a function now inside this function I am going to paste some code and this is going to use context so let's add this as a parameter okay this code is going to tell us that if internet is present or not this is showing some error because we have node added the network or Internet permission so let's add this and this is going to be added inside the Manifest of this utilities okay we can also add another one for internet now did you notice we have to manifest as well one for the app module okay and another one for our utilities module and utilities is as of now just having this functionality to check internet and this code needs the permission to access the internet and network state so the permissions also we have added inside the Manifest of utilities module now the next step is we will just open our main activity because this is the launcher activity as of now inside this we need to set up the application screens we can use composables of course so we can design one composable and we can call it news in short entry point okay so we can call it like this and this is going to be a composable inside this either we can design the screens here itself or we can also use one navigation graph separately as a composable and later on we can add that navigation graph composable here okay but before that let's add few more dependencies because we are going to use core routines we are going to use dependency injection with the help of dagger Hilt inside this application so we will just go inside our dependencies file so here we will add the dependency for Hilt and we also need to add the versions so we will just add these versions as well now these error will be gone we also need to add the plugins so we will just close everything we will go to the build.gradle.kts and inside this we also need to add two plugins okay so one plugin will be kotlin kpt and another one will be this comb dot google.dagger hit Android now one more last step we need to do we will just go to the product level build.gradle dot kts and here we will also add one class path plugin for our hit dependency okay so these are the steps we need to take in order to implement Hilt inside our application now our health setup is ready and we can use heat dependency inside our application module so we can just use implementation and we can just take one dependency from over dependencies object which is a Singleton class object we can just take Hilt Android and with the help of kapt we can take dependencies Dot Hilt compiler and hit Android compiler as well and we can click on this sync now and our project will be synced we can also add kapt and correct error types equal to true okay now we can finally sync the project and we can just use Hilt inside our application so this was the dependency part if I just repeat for you what we have done so far we have added heat dependency inside our dependency single done class object these are the dependencies we have added we have defined respective versions also then inside build.gradle.kts project level we have added this plugin okay and inside our app level build.gradle dot kts we have added this code in kpt and hit plugin and we have added the dependency to use hit okay now we can utilize hit inside our app module so the first step in order to use Hilt in any Android application will be we need to Define one Hilt application class okay so we are going to Define one application class and we are defining it inside our app module Source directory and inside our code we are going to Define here one application class to do that we can just use any class and we can call it News application okay we can remove these comments and we are going to extend this with application class only one application class can be there inside a project and this News application class is going to be our entry point with this entry point what do I mean I will show you in a moment okay so if you are new to Android this application class is the first step which will execute when user will launch our application okay inside this we need to override owncreate method we are going to add one log statement just to show you we need one tag so to use a tag we are going to Define one companion object and we can Define one tag variable and why I am defining this as a constraint because this value is not going to change any time right and this is a compile time constant and we can use static block which is defined using companion object so we are going to Define here one tag and then we can use this tag string inside our look we can write coming inside oncreate now this is a simple application class but as we are going to use dependency injection and we are using Hilt so we need to make sure that our application class knows that this is going to be a hilt project okay so to do that we need to use one annotation hit Android app and this annotation we can only add inside our application class we can take this and we need to add inside manifest we need to add inside application tag here we need to use name and we need to add our News application okay this is the very first step and now our health setup is ready our project is kind of a hilt application and we can use Hilt anywhere inside any class from here onwards so the moment we will launch our application we will see that this own create method will execute let's launch it again we can see the same Loop so application is one very important class inside any Android application project let's minimize this and let's start further now we need to define the application navigation inside our main activity basically all the screens we are going to have inside our project we are going to Define somewhere right either we can Define it here but then it will be a messy code so it's better that we Define a separate composable and from there we will just import the composable here okay so let's define one app entry point this is going to be one composable let's take this and let's define one composable with function app entry point and inside this we can Define one another composable which is going to have the actual implementation of navigation okay so we can Define app navigation graph okay this is going to be one composable again and for this and this we are going to Define in one separate file so let's open this UI folder once and here Define one new folder let's call it components now our UI package will be having this component folder and inside this let's define one file and let's call it app components and here we can Define this composable which we was talking about and we will call it app navigation graph and we are going to import this inside our main activity okay and inside main theme we can just use one surface with one modifier and we are going to take the entire screen space so we can do that with modified or field Max size we can also use one background color and this is going to be a white color itself okay let's take this in next line and this app entry point we are going to place inside so this is one very simple syntax we have the theme opening scope here then we are having just one surface composable this is like we have one entire screen space contained here and within that we are going to put our app entry point which eventually is going to have the destination from our navigation graph which we are going to Define here now one more step we need to do to make sure that our activity is also respecting dagger hit rules we need to annotate our activity with Android entry point okay and this is one Hilt annotation and this is coming out of dagger Hilt Android and this annotation we need to use in all of the Android components like Android activities fragment services and so on now our compiler will understand that this main activity is also a part of heat okay and if any necessary yield dependency will be needed further here so compiler will be injecting those all right so don't get confused I will show you step by step just stay with me so now inside our app navigation graph we are going to implement the navigation and to implement the navigation as we are going to use Hilt as well we can use one dependency which is kind of Hilt related navigation for Jetpack compose to do that let's close all the other files first and let's go to build SRC and independencies let's minimize this and we are going to Define one new dependency for Hilt navigation compose and we are going to add this dependency Android X Hilt navigation compose we are also going to Define one version for this dependency inside our versions file we can just take the same naming convention and we can Define one constant and we are going to use version 1.0.0 we can use this inside our versions so this is the new dependency we have defined here is navigation compose with this dependency syntax and the respective version we are going to use this inside build.gradle of app module you can also find it inside app module here build.gradle kts all right we need to add this dependency with implementation dependencies dot Hilt navigation compose and we can sync the project our project is synced now we have this app components inside UI components we are also going to Define one navigation package here let's call it navigation so that it can be separate and inside this let's define one file again and let's call it app navigation and we are going to move this app navigation graph composable inside app navigation file inside app components we are going to Define few different composable which we are going to Define shortly but this navigation graph composable we are keeping inside navigation package so all the navigation related things we are going to keep here all right now we have added the dependency so we can access this nav host all right and inside this we need to add the nav controller and one graph or the starting destination ok we can add one Lambda here for the navigation graph building part but before that let's create one variable nav controller and we are going to use remember nav controller this one now we can use this and add it here for a star destination we need to Define some kind of routes right so either we can define something like this that this home is going to be the entry point but this is not safe because if later on you change this string somewhere you misplace this sparing so this star destination will not match right so the best practice will be that we Define one Singleton class we call it routes and inside this we Define one cone strand for home screen like this okay let's take this and add here from routes dot home screen now you see that all the navigation related things we are keeping inside this package it will be very easy as our project will grow that it will be easily able to find all the things related to navigation here okay now inside our nav host we are going to Define one composable and we are going to add the route for it which is going to be the home screen as of now and one Lambda inside this we are going to define the home screen but before that we need one home screen composable right so we can go back and inside UI itself let's define one package and inside this let's create one file and we are going to call it home screen we can just use one composable we can call it home screen and inside this we can just add one surface for now and it is also going to take one entire screen space with modified or fill Max size and we can add one preview one composable function home screen preview inside this we can add our home screen itself okay one error we have because we need to import this again because now we have defined this inside our navigation package here all right let's go to main activity and let's check once again we don't have any other unwanted annotation we can remove that okay now we have our home screen composable so we can close this close main activity and routes as well and inside our navigation we are going to define the screen for this route home screen okay so we can just use home screen composable which we have just designed okay so this means that if someone will come inside the navigation host and they will try to navigate to this route which is home screen so they will be shown with this home screen compostable now inside this project we are also going to implement view model repositories because we are going to make some API calls to find out some news to show inside our application all right so the next step is we are going to Define one package for view model and one package for the repository all right and this is going to be the main part of mbvm because inside mbvm we have one view then we have one view model and we are also going to have one repository which will be responsible to fetch data either from server or from Mobile Local database all right so let's define one viewmodel first and let's call it news view model and let's extend this with view model itself and as we are also going to use Hilt here let's annotate it with Hilt view model so I have seen this comment in the videos that how we can define a view model this is the normal step just define a class extend it with viewmodel and you are done then you can keep all the logic here we are also using dependency injection in this video so we are using hit it for it and we are annotating our view model with hilde view model why because if you want to inject it somewhere inside our composable this Hilt process will make it super easy I add one init block and inside this I add one log so for that first let's define one companion object also and let's define one constant tag and let's use it I know that so many of you will think that why we are defining a companion object just put here as a well tag and something like that right but that's not a good way just follow the practices when you are developing and it will be super beneficial in the long run and now we can use our tag and we can call it init block of news view model okay so I just want to show you that how easy it is with hit to use viewmodel inside our jetpack compose application to create a variable instance of this view model inside our home screen let's go to home screen first and inside here we can just access it with the help of view model we have one variable name USB model and the viewmodel type It's News view model and we can initialize it with hit view motor okay and we can run the application it will throw an error but I want to show you that error as well if we just check the details of this error it is saying that at the rate held view model should contain at least one inject Constructor okay it's saying that if you are using at the rate hit view model annotation there should be at least one Constructor to inject the dependency at the runtime to solve this error we need to use one Constructor first and we need to add The annotation inject okay now we have one empty Constructor so as we are accessing this news view model inside our home screen so compiler will be able to inject this news view model at the runtime if we run our application now that error will be sold and our application will launch smoothly see now we are not having that error and our application is launched this means that Hilt has injected one instance of newsb model inside our composable and the best way to make sure is we can check the log inside locat and if hit injected one instance inside our home screen of this news view model so this init block will be executed and we will be able to see this log inside the locat so if we just add this we can see that init block of newsb model that means when held injected this view model inside our home screen it was successful and we are able to see that this init Blog has been executed so now the next part is we are going to add one repository so to do that let's create one file and let's call it news repository okay our news repository class is created here we need to fetch the data from some data source so first of all we need to find out one API from where we can fetch some kind of news response and we are going to use this website news api.org and it has few apis which can give us some data like we have this API news api.org V2 everything we can query a value and it will give us some articles which will have some author name titles and URLs and description so many things we will find out this response and then based on this we will create our composables now we can go to the documentation part and here are some endpoints everything top headline and so many things so if we just go to the stop headline so we can utilize these apis to do that first of all we need to add retrofit dependency so we'll just go inside this dependency part let's minimize this and we can add some dependency which we are going to need in order to make API calls we are going to use retrofit to make Network goals we are going to also use OK HTTP Json and Moshi converters and login Interceptor basically these are the things which will help us to see the API call URL endpoints with the parameters we pass and the respective response we get inside our locat we can also use Moshi or Json converters I will show you which one we use and how we use them let's define the versions as well so we can add the versions and if you are following along with me and you are coding so you can just pause the video here you can utilize these same versions from here and if you want to use the dependencies I will show once again you can pause it here you can just take these dependency and these versions all right and now we can sync the project and we will be able to use the retrofit and these dependency inside our project okay our project is saying so now we are going to define the data layer of our application as of now we have this UI layer let's take this main activity inside UI layer itself let's minimize this let's create one package and this package is going to be the data layer package of our project and inside our data layer we can create few sub packages one for retrofit related apis so we can just create one API now we need to go to the finder to Define few other packages we can Define one package entity and this is going to have all the pojo classes right so now we will be having these two packages here we can Define one package for data source okay first of all we need what kind of data model we need to Define for our response so we can just try to hit the sample API and once I hit this I am getting some response we can paste that inside jsonware and format it so we are having something like this we have one Json object we have some status we also have that how many results we are getting we have one array articles inside this we have multiple object and each object have response like this we have some author title description and URL and so on okay so let's start designing the data response so inside the entity package we can Define one class and it can be a data class because this is going to contain some response and we can call it news response so we have one status all right so let's take this key use one status of string type next thing is we have one total result of integer type we can Define it of integer type okay next thing we have one array of Articles or one list we can say and we can Define it like this list of article okay and this article is going to be a data class again so this article object has so many things author title description URL Etc so let's take author first let's define author of string type next we have title of string type and some description of string type again we also have URL and URL to image of string type and we also have published at Edward day or date it has been published we also have some content I think this and description no these are the different things so we can just take this as well now this article object also has a source object if I show you inside viewer this is our object it also has an object called Source okay so we can use this we can create one variable source and let's say we Define one class cold Source okay and we can create one data class for this source and it has ID and name right so we can just use one ID as a string and one name as a string okay our response is created now we need to create one API interface where we can put out the API endpoints but before that we will need the new dependencies which we have recently added inside our build.gradle DOT kts okay so if I minimize everything this is the application module this is the respective build out Gradle file here we are going to add the dependency from over dependencies file of retrofit then we need the dependency for okay HTTP then we need for Moshi and Moshi converter and one last for logging Interceptor okay then we can sync the project we will see all of these things in action just in a moment now we can close this we can come inside source our data layer inside API we can create one interface and we can call it API service okay inside this we can access all the end points we can Define functions for all the endpoints with get post and so many other things if I just show you if we import retrofit HTTP then we have so many annotation if we have some get URL we can use this if we have post we can use this we also have four query body and so many other things so now let's go back to the API endpoints website so this is going to be one sample URL let's paste it inside our interface okay and we can Define one function get news ok and let's say get news headline or something and inside this we can Define some parameter now as we can see that country is one query which we want to pass inside this function right so we can write it with the help of query annotation okay we can Define the field name which we want to pass inside query that is going to be this country we can pass one parameter as country of string type inside this function okay and we need to pass the API key as well so let's add another one as a query and let's call it API key we can also pass API key as a string and this API key we will get from this website we can add it as a default value we just need to replace this I will replace it but I will not show the key here because anyone can misuse that key so don't show your API keys to anyone else as this is going to be a get URL so we can just Define get we can import it it will import from retrofit and we can Define this much URL as the base part and we can take from here V2 slash top headlines we can add it here okay this function is going to return us one response and this response is going to be that news response pojo type which we have defined all right now this function as of now is a normal function but we are also going to utilize core routines okay so before we move towards core routines I just want to show you because we are at the point where we are using this URL so as of now we have just used a small part of it from where the initial part or the base URL will come from okay so for that let's define one dependency injection layer and let's call it d i okay inside this we can Define one file it's going to be a normal file let's call it app module now we are going to annotate this from module and this is coming out of dagger that means this is going to be a dagger module and we use modules to define the third party dependencies okay and where we want these dependency we want in entire application so we want to make sure that all of the dependency we create inside this module should be accessible inside this entire project so we can just use Singleton component class okay so this is the normal process in order to define a module for dependencies inside dagger hit okay if you are not so sure about dagger Hilt so comment down in the comment section that we need dagger Hill tutorial as well I will create one separate video for dagger head series okay where I can explain you all about dagger head and how we can utilize dagger Hilt in and out okay so first of all we need one retrofit dependency so we can Define one function provides retrofit okay and this is going to return us one retrofit object let's import it and we can return here one retrofit object so to create one retrofit object we can use this retrofit dot Builder and retrofit use Builder pattern I have explained how we can Define with Builder pattern at our Channel native mobile bits you will be seeing the Builder pattern video also if you want to check out you can check this video now let's move forward so to create one retrofit object we can just use this build method okay but this is the very simple retrofit object we also need to add so many things here so the first thing we want here is that if our application is making any API call we should be able to see the logs inside locat that what is the end point our application is hitting what is the status what is the response we are getting and so many other things so we can Define one HTTP login interceptor okay and this is going to be of type logging Interceptor itself one object and we can use Isco function apply okay and here we can Define that what kind of logging Interceptor label we want and we have multiple levels dot label dot basic body or header or none if you choose none you will not see any URLs or anything if you want to choose body so all of the details will be shown and if you just want to see that end point and the status you can choose basic so we are going ahead with basic now we also need one HTTP client to associate with our retrofit so we can take that from okay HTTP client dot new Builder and we can use a scope function again inside this HTTP client we want to add one Interceptor and that is going to be our logging Interceptor all right now our HTTP client is there but if you want to add some kind of time out inside our apis so we can do that with the help of we can use a read timeout we can provide some kind of duration for timeout and we can provide some kind of unit seconds this means that all the API calls our retrofit with our HTTP client will make will time out after 60 seconds okay we can also create one Moshi object with the help of Moshi dot Builder we can also add one Cortland Json adapter Factory here for all the Moshi related conversion and we can use build okay so these are few things which we are going to take inside our retrofit object our final retrofit object so we are going to customize it now we are going to add one base URL first so from where our base URL will come as this is going to be a app level thing we can Define inside data one Singleton class and we can call it app constants inside this we can Define one constraint app base URL our base URL we can take from our service as this is going to be the base URL okay so from V to top headline we have defined the path here then we have defined these things as query and the first remaining part this much we are going to Define as the base URL now we are going to use this when we create the retrofit object app constraints dot app base URL all right now we need one client so we are going to use our HTTP client dot build it will give us one client object now we are also going to add one converter Factory with ADD converter Factory and we can just use Moshi converter Factory dot create and we can pass the Moshi object which we have created over here all right now this is going to provide us one final retrofit object and we can just use here the provide annotations and Singleton annotation as well this means we have created one dependency one retrofit object and we can use this anywhere inside our application and Dagger here it will inject this object after doing all of this work we no need to write this logic everywhere and this is going to be a decoupled code it's not tightly coupled at all it's very Loosely created at a separate place and this is following dependency injection protocol and we can just inject it anywhere we need all right now let's minimize this now we have retrofit now as we are defining some dependency here inside our app module we also will be needing this API Service as a dependency at some point of time inside our repository from where we will be calling these functions right so we can create one dependency object for this API Service as well and to do that we need to Define one function let's say provides API service this function will take retrofit as a object and as we have already defined retrofit dependency we'll be able to get it and this function will return API service which is this right now inside this function we can use return and we already have the retrofit here so we can just use create we can pass API service class dot Java and this will return one API service dependency we just need to use Singleton and then provides annotation of daggerate okay now we can use retrofit object anywhere we also have the API service dependency we can use anywhere the next thing is we need some kind of data source so let's close this we need one data source for this so inside our data source we can create one interface and let's call it news data source okay inside this we are going to Define one function so we can just take this this is the quickest way we can remove these queries and all we don't need to pass API key because we will add the default value inside our interface here okay so we just need to pass one country and we will get the response all right we can remove this now we need to provide the implementation for this data source so to provide the implementation we can create one class and we can call it news data source implementation okay this class is going to implement news data source interface and the movement we implement this we are going to take this overrided method let's remove this now inside the implementation we need to call this API service method somehow for that we need the reference for this API service right so basically we are saying we need this API service object inside our news data source implementation class and that's why we have created inside app module one dependency provider for our API service right so we can use one inject method with the help of Constructor inside this class like this and we can write Constructor we can just import this inject statement and inside Constructor we can just use private variable API service like this and now whenever we will create this class instance dagger Hilt will provide us one API service object which we can use inside this function like this return API service dot get news headline we can just pass the country like this okay so you see what we are doing here we have one API service where we have the method which provide us some response we created when data source implementation with the respective data source of that function okay inside the data source implementation we are injecting API service dependency and we are calling the respective function inside this interface API service all right now let's close all of these things and one thing I want to do here is right now these functions are normal these are node suspended function right because we are not using core routine anywhere let's go to dependencies and here we will add the core routines dependency so I have these two dependencies Co routine core and core routine Android you can pause if you are coding with me and you can just write down these dependency and we are going to Define One Core routines version and we are going to use the same version for both of these core and Android related dependency let's sync the project and now we will be able to use core routine related code as well and one more thing if you are not familiar how to use core routines what are core routine why we should use them and so many things related to core routines just comment down in the comment section that you want me to cover core routines as well separately although I have it in my plans in my future plans but just I want to hear from you that how many of you are new to core routines all right now let's close the dependencies file now we can just go to the build.gradle file of app module and we can just add the dependencies which we want to use we want to use core routines dependency core as well and co-routine Android as well now finally we can sync the project and we will be able to use core routine dependency inside our app module which is this all right let's close this file and now we can make this function as suspended function all right and this get news headline will be a suspended call to the network now now if we will go to the data source we will have suspended added here as well if we go to the new source implementation news data source implementation we will see one error because this is not suspended as of now now that error will be gone now let's close all of these things now let's open the news Repository which is inside app Source Main and inside UI repository news Repository okay so basically our repository needs this data source right this one so that we can call this function so first of all we need to add this as a dependency inside our app module let's come here let's minimize everything this is a module for dagger Hilt where we are writing all the dependency related code so we are going to write provides then Singleton and we are going to write provides news data source so if you want this news data source we have the implementation right which provides us one news data source but for this implementation we need API service right so this API Service as a dependency we already provides so we can add here API service and it will return news let's minimize this first news data source all right and here we can use return and we can just call news data source implementation and we can pass API service okay and this will provide us one news data source which we can inject now inside our repository so first thing we need to use inject annotation then we need to use Constructor and inside Constructor we are going to have the data source which is news data source and from where dagger here will inject this from here where we have created the dependency all right now inside our repository class we can Define one suspend function based on our data source okay so we have one headline function it will take country as a string as a parameter all right and it will return us response of news response OK this is defined inside data source as well all right so now here what we will do we will just use written a statement and we will return the response from our data source dot get news headline we will just pass country and we will fetch the response from this data source we will return which is the same written statement for this function now I want to make this function more enhanced we want to enhance this function even further why because when you make one network call you have three possible different states one when you are making a request at that time you are having some kind of loading inside your application you can show some kind of loader or something that's one state another state is when you have successfully fetched the data so that is a success state with respective data response the third state can be one error state where you fetched some kind of data from server but you was not successful you ran into any error and we will also provide that what kind of error we are getting right so that we can update our screens composables accordingly so to define a mechanism where we have these three possible state only maximum three we have something called sealed classes so to do that let's go to our utilities package this is basically one utilities module and inside our main class we can Define here one seed class and let's call it resource state okay this is going to be one sealed class so the first step is going to be loading okay and this is going to be of type resource State generic and the next now second state can be a data class success and we can hold generic data type and it is going to have some kind of data let's say of generic type again and this will also extend or it will also be of type of resource state all right now the third one can be one error class we are defining it as a data class again because we can also provide some kind of error of type generic like it can be a string error or integer error code or something again it will be of resource state t okay this is one very basic sealed class which we have defined if you are not sure what is the sealed class we have one separate video for seed class implementation and you will be seeing on the screen right now you can check out this video as well so now as we have our resource state with three different it states we can modify this function all right so let's create one same function let's comment it first so now we are going to take this first part of this function this is going to be same but we are going to enhance it with few other things we are going to use flow all right and we are going to pass a flow of resource state by default it's going to have news response all right now we are going to return one flow and inside this flow Builder let's write based on different different conditions okay so first of all whenever this function will be called initially we will emit one resource state of loading to make an API call we will emit loading State we will say that okay we are making this API call but right now the state is loading okay then we will fetch the response from data source like this we are going to take this in one variable and we are going to call it response now here retrofit is going to help us we can add one check that if response is successful this is successful will return true if the API call is Success else false this is coming out of retrofit Library itself and we are also going to add one more check that if response body is node null okay so we can just add like this if it's not null that means we are having a successful message from the retrofit library that your API is successful and we are also having some response like we are not getting in null response or something then we can emit resource state DOT success and we can pass response dot body and as this is not going to be null because we have added this check just here we can make it like this now we are saying that we are sure that body is not null because we have already checked it that body is not equal to null now if this condition fails that means if retrofit tells us that your API call is not successful or we are getting null response we can emit error state okay we can use resource state DOT error and and we can pass here some manual message that error fetching news data okay we are having one error here because this resource State error we have defined it as generic but let's make it any that we can pass any type of value inside error okay but as we are just passing as a string we can also make it 1 string type all right now it's fine we have one error State handled as well so this is our flow statement we can also add one catch block here okay and we can use this as one exception that if we are getting any exception inside our flow we can emit one error State again based on this localized message if you are getting anything else we can pass some error resting we can just say sum error in flow okay and that's it okay so this is going to be our function here we are just checking B is doing some conditions that if we want to make sure that we are having success state or error or loading State all right now let's close all of these things let's go to our view model now inside our view model we need to call this function to get the response or error or loading state so we need to call this function and to call this function we need repository access right we need here the repository so let's add one dependency provider inside our app module for the Repository we can call it provides Singleton dependency only and we can call it provides news or let's take it from there provides news repository and this repository will return US News repository object now if we go to the repository once we need data source so we can add this as a dependency inside this method and we can return news Repository and we can pass news data source because we needed the data source here to call this function even further right now inside our view model we can access news Repository like this and here it will inject this at the runtime okay so we can remove these things we don't need it anymore now inside our news view model we can Define one function get news all right and inside this function we can call the function from our news repository this one but it will throw us one error because this get news headline is a suspended function and we can call one suspended function only from a core routine okay so we need to do here some changes first of all we need to use viewmodal scope and we need to use One Core routine Builder which is launch all right now if we want to make sure that our API call runs on the background thread we can use dispatchers these are a part of core routine itself and we can choose all of these threads with the help of dispatcher we are going to choose IU thread and this will make sure that all of the API call operation happens on the IU thread which is going to be a background thread and that's a good thing because if you have seen my previous video where I was talking about asynchronous programming we always want to make sure that our applications mean thread is not doing so much of work so now we can call the function from our repository get news headline this function need country as a parameter so we can add one parameter here as well country string and we can pass it here okay and as this function is returning a flow we can collect this and to collect a flow we can use collect latest and this collect latest function is a extension function of flow and this will give us the response basically the flow which we are getting out of this function all right so we can Define here news response okay and we can Define one mutable State flow and a state flow which we will use inside our composable screens you will understand in a minute so let's define one private variable news and this is going to be a mutable State flow and the flow type will be exactly same like resource state of news response okay so we can use it here and we can initialize it with one initial loading State okay so we can pass it here resource state DOT loading like this so this is one mutable State flow now we want to expose one flow to our screens also so we can use one state flow and the type will be same resource state of news response and we can assign it with news so now you must be wondering that why we are having these two variables so if you notice it carefully this underscore news is immutable State flow okay so we can assign the value to this inside our viewmodel itself all right now when we are passing this news to our UI we want to make sure that UI cannot change the value right so State flow cannot be changed that's why we are exposing it to the UI and here we can change the value of our news mutable State flow with news response okay so in this function we are just opening one viewmodal scope on the background IU thread we are calling the method from over retrofit we are collecting the latest response news response and we are assigning it inside our mutable State flow and once this value will change automatically it will be assigned inside our news State flow we can use this inside our UI now one more thing we want to make sure that whenever this viewmodel is getting created let's call this function okay so let's add init block here and let's call get news we can do one more thing for now inside our app constraints we can Define one country and let's use us for now and we want to make sure we are passing this country inside get news function so you will get some news for this country which we have defined it here okay so let's make it private for now because we are just calling it from init blog now let's try to close all the tabs we can just go to the home screen so as we already have news view model instance here we can create one variable news response and we can access it from newsview model news and we can use this extension function collect as state okay so whenever this news will change we will be having the updated value inside our composable because we are collecting it as a state and if you are not familiar how to work with a state in Jetpack compose I have covered it in various videos on our YouTube channel you can check out these videos and you will understand how to handle the state in Jetpack compose all right now we have the updated response here I am just trying to show you that are we getting the API response can we show that then we will make this app beautiful now inside the surface composable we are going to add one when expression and this is going to take our news response okay and inside this we are going to handle all of the possible resource State why because we are accessing this news and this is a resource State this resource state has three different states we are going to handle all of these so inside our van expression first state we are going to handle from over resources State loading okay and we are going to do something here then the second one if resource state is success then the last one if resource state is having some kind of error whatever our resource state will be there it will update and we will get callbacks here accordingly because we are collecting this as a state so whenever anything will change inside this our state will update and our composable will compose here based on that respective State we will show something inside our screen so let's say if we are coming in any of these State first of all I want to add one log okay we have some tag as of now I think we don't have so we can Define here let's say tag and let's call it home screen okay now we can use this tag and inside loading let's add it here success and this one inside error all right now let's close other files let's open our app components file and this file is present inside this components let's create here one composable okay and let's name it loader okay now inside this we can use circulars progress indicator we can customize it let's give some custom size let's say 50 DB for now we can customize it little bit more let's add one padding 10 DP and let's add some color as well for now let's try to use color dot black okay now we can take this component and whenever our loading state is showing up let's add this loader composable so now let's try to run the application once and let's see if we are getting this loader or any of these logs right so we can see that we are coming inside loading and inside success as well that's why we are not able to see the loader as of now so we can comment the success state for now just to see the loader part and customize it even further to do that let's go to news comment out this so we can see our loader is showing up but this is not how we want our loader to look like we want it here in the center right so let's use one column composable okay and let's put it inside column so now our circular progress indicator is inside one column composable now we can customize our column composable with modifier and our modifier is going to take Max size then we are going to add some kind of padding as well here as well ADP okay now we are going to align it so horizontal alignment with alignment center horizontally we also want some kind of vertical Arrangement because we want it in exact center so we can use Arrangement Dot Center okay and now if we try to run this it should come up in the center yes so our preview is updated and we can see that our loader is in Center let's modify this little bit 60 DB yeah now it's fine and let's use one color from over theme color which we already got when we created our project so first of all let's import this and we would need this purple 40. now we can use this purple 40 color directly okay so we can see that our loader color is purple now so at least our loader component is design now now we can use this inside our home screen so as we are already using it inside our home screen now let's move to the success State let's minimize it little bit inside success let's use response variable and we are going to take this news response as we are going to Typecast is as response success okay we can also take it inside a bracket like this and we can just take data ok so now let's try to access something from this response let's take this log here below it and let's see how many items we are getting inside the data right so we have these total results so if our API is giving us some response we will have some kind of value inside this total result variable okay so if you just see we have this model right if we get some data we have some total result Also let's add response Dot status this is fine now let's try to run the application once again let's see if we are getting some kind of data here so if we just add this home screen here so we are just getting loading continuously why because we have node uncommented this okay now we are coming inside this success block and we are getting status as okay and total result is 36. so let's try to see that what URL we were hitting so this is the URL we were hitting and if we just try to hit it how many items we are getting we are getting total result as 36 so our API is getting cold successfully and we are getting result correctly now we can also add one check inside our error State we can just take error and we can cast this news response as resource State load error we can take it inside one bracket and this is going to be a string okay so we can just take the slope down and inside log we can print the error message this one okay and as this is a string no need to use curly braces as well now our basic setup is ready it's very very basic I know but for now let's try to see the list of the data which we are getting okay so we can just add one another composable and we can use that inside app components as well okay let's minimize this composable let's create another one news list so now we are going to call this news list from our success block let's call this and let's pass some data let's pass response okay let's add it as a parameter now here we can use one very basic lazy column for now let's remove these things inside this we can use items we can add response Dot articles and one Lambda block we can use it this one okay now inside this we can show some kind of text so let's say we just want to create one composable normal text component okay and inside this we can use one text composable from jetpack compose text value we can pass as a string we can use it here okay and we can modify this text little bit with modifier so we can just take modifier dot fill Max width so that we can take the entire space horizontally then we can set some kind of padding let's say 8 DP on all sides okay N4 height part let's set prep content height okay this is one very basic text which we can have we can also add some kind of style with text style inside this we can pass font size let's say default 18 SB and font weight and let's say normal for now this is that X component which we want to show inside our list and for every article we will get one callback inside the slander so from article we can access title if it's node null else we will show note available this is the response we are getting a list of Articles every article has a title for now we are just showing that let's try to run the application and let so we are getting some data okay yes I know this is very basic but at least our repository view model Hilt dependency everything is working fine we are getting the data from the network via our data source repository and view model to our composable screen now we are going to make it beautiful with the help of Jetpack compose so the first thing I want to do here is I want to show some kind of news icon when our app is loading and for that we need to add splash screen dependency inside our build SRC dependencies if I close everything this file is inside build SRC dependencies so we are going to use this core splash screen dependency we are going to Define one version for it this is going to be the button which we are going to use you can pause and take this version as well you can take this dependency as well if you are coding alone let's close this and now inside our app build.gradle kts we are going to use splash screen dependency okay let's sing the project so we can just go to our main activity as the next step and before set content we can use install the splash screen so for our app logo we are going to use our Channel logo itself okay now we need to Define one theme y because if you just go to Android manifest we have some predefined themes which is used in application and activity okay so now what we need to do is we need to Define one theme for our splash screen its parent is going to be team dot splice screen inside this we can Define few item that what kind of splash screen background we want so we need white color then we can Define that what logo we want to see inside our splash screen so we can use logo which is going to be our Channel logo itself and we can say that after our Splash is done what theme which we want to show after display screen so that is going to be Style theme dot news in short which is our default theme okay now we can just use this splash screen theme as the starting theme inside our application tag and activity and that's it that's the thing which we need to do in order to set up our custom splice screen so if we run the application we will see that our logo will be shown at the splice screen okay now it's looking much better right if we kill the application we launch it again we will see our logo and then our application will start we can change this launcher as well let's try to see if our logo will fulfill this if we run the application now let's see if our logo is changed yes we can see that we have our Channel logo here it's not coming in the entire space but it's fine for now so now let's go back to our main activity and let's update the UI of our application so as of now our main activity has the app entry point inside one surface okay so inside our app entry point we have the basic navigation setup ready inside navigation graph we have this destination for home screen where we are showing the home screen okay if we go inside this here again we have the surface we need to modify it here what we are going to do now inside our home screen we are going to use vertical pager let's minimize this and inside our vertical pager we need the state so let's define one variable pager State and we are going to use remember pager state okay and this API is kind of experimental as of now so let's obtain for experimental Foundation API it will come it will come into stable apis in future and this remember pager state is going to take these two things initial page and initial page offside fraction so we can Define initial page as 0 and initial page offset fraction as 0. in float okay and let's use one Lambda here and let's Define item count let's say 100. we are going to change it we are also going to implement pagination in future part of this video series but for now let's define 100 now for our vertical pager let's use this state we have created as pager State now we are also going to customize it let's use one modifier and let's take fill Max size so that it can take the entire space of the screen we can also define various other things we can Define some padding page size page spacing and so many other things right so let's define page size and we can use page size dot fill this one and let's use some kind of page spacing and let's use 8 DP let's import this this is basically if we scroll the page up how much space there should be in between of these two pages I will show you this okay and we are going to take here one page this is going to be one integer type of course like Edward page number we are at in at any given point of time now inside this we can take all the things which we were having okay we can remove this surface we don't need it anymore because we are already having surface in the parent screens okay so inside vertical pager what we are doing we are having these three states all right as of now we are not using this page but let's add it inside this composable news list so now basically we also need to remove this composable because we are not showing normal list we are showing this pager we can create one new composable news row component okay and this component this composable is going to have two things one page number that at which page number we are at then it is taking response dot articles dot get the value at that page number so that if we are at zeroth page we are going to take the first article value okay but we can add one safety check here that if response dot articles is node empty that at least one article is present then only show this news row component so we can just go to our app components and we can Define here one composable news row component it is going to take one integer page and it is going to take one article okay so this response dot articles will give us one article object and then we are already having this page from our vertical pager okay now we can import this all right so we are having this home screen where we have this view model which is giving us news response we have created one pager State we are having our vertical pager and we are handling all of these states once we come inside success we are just showing news row component based on the response we are getting okay so now let's go inside this news row component and let's modify it so for now if we just use our normal text component so let's try to see this page number so let's add some more string from article article Dot title this we can take in some new lines now let's try to see this however application will look with this vertical pager so our application is running we are having first news then we scroll up we are having the second news we scroll up again we scroll up again we can also go back right like this we are having our news that means our vertical pager implementation is also working fine now let's modify this news row component okay so first thing is we need one image library to show images from these URLs so we can try to use coil Library we can just go to the dependencies and we can add this coil Library we can go to the versions and we can add coil Library version okay we have added this Library you can pause the video and you can take this if you are coding along you can also take the version we can go to build dot Gradle of the app module don't get confused this is of our app module okay and we have added dependency inside this all right let's close other tabs and here we can use implementation dependencies Dot coil Library okay we can sync the project and inside Android manifest one weird thing I have not added the internet permission is still our API calls are working fine let's add the internet permission maybe I have added but later on removed that's why from Cache or somewhere it's working fine but we what we need these two permissions internet and network State okay now we have added this coil Library as well let's close this and let's go to our and let's go to our home screen and let's go to news row component we are going to modify it with one column composable because we are going to take so many things in vertical orientation let's create one preview one composable preview for our function news row component and we can add news row component here now we can just say let's say 0th for page and for article we can create one article object one dummy article and we can pass few things for our article let's say author we can pass Mr X 4 title we can pass hello dummy news article okay and do we need to pass any other things all of these things are nullable so we can just pass null to all of these things we also have one way that in data class itself we can assign the default value as null there we can do that but for now I just want to add one dummy article here so we are just passing it like this now let's try to modify our column further so we are going to use one modifier we are going to use fill Max size because we are going to take the entire space and we are going to add some padding let's say ADP for now we can modify it later we are going to use one background let's say white color this is pretty straightforward as of now so now we can add one image and for model we can access this URL to image okay so we can access so we can access article dot URL to image and for Content description we can just pass empty or null so we can see that one image is updating but let's try to modify this little bit with modifier we can take the full width so we can use fill Max width okay 4 height we can just give wrap content height as of now and we can also add some kind of group and that we can use with content scale dot group it is extending and as we are giving content height as prep so it is taking entire space that's not correct way so we can use one custom height here and we can say 240 DP see now it's perfect now it's fine because this entire screen is dedicated for one news article at a time so we can use it like this then we can use basically different content scale fill bounds is better actually or fit is also nice we can use any one of these also I have one placeholder image which I am just adding and this is kind of like this right so we can add a placeholder inside this async image this is coming out of coil Library which we have just added so we can add one placeholder and for this we need one painter resource we need to pass the ID for the image so that is going to be r dot driver dot our image we need to import this R first and that is going to be the placeholder image this one and if we ran into some error while showing up or downloading the image we can show error image as well with painter resource we can use the same image ID okay now if we try to run this we will see some kind of image placeholder image before our image actually shows up so we are going to go ahead with group let's see crop is little bit better and if I try to run the application now you will see that some kind of placeholder image will show up before our actual image loading so if we scroll up we can see that one New Image is showing up every time okay that means one new article is loading up right now we can add another value for our title right so our image part is done now we can add some kind of space in between let's say dot size 20 DB we are adding some kind of space then we can add our normal text component and we can just pass some article dot title if it's node null else we can just keep it empty so if we see the application now it's coming up but let's try to highlight that title so we can just come here we can create one another composable okay we can say heading text component it is going to take text value again okay so we are going to take the same text but we are going to modify the style we could also pass the value here itself but I want to show you little bit simpler so we are not complicating it okay so we can just pass the font size as 24 SP and we can make it as medium so let's try to use this for our heading part of it so it should update if we run the application now it should update okay so it's updating if we change something here let's say let's make it bold so it's updating but medium looks fine okay so we have added the title let's add some space below this title this time we are going to add let's say 10 DP okay we can also do this with height but I just prefer size inside spacer then we can add normal text component and we can pass article Dot content or we also have description so let's try to go ahead with content first if it's null don't show anything okay so it's having some smaller content I think in API itself we we have it like this so if we just try to see the description but this dodo Dot and for Content this plus 2925 character is it coming from server let's check it so we have this description yes we have this 2. here somewhere it's fine but at few places it's coming like this as well and for content yes we have this plus three Triple Eight characters and it's coming from server so our application is working fine it's fine so we can add two normal text component and let's try to show both of these things or I think it's almost similar so what we can do is we can just use one of these description we can use let's increase the size of it what do you think should we increase the size let's try to see some other phone families in practice so we can use sense Sheriff this one we can use this one okay this looks nice so we can use this more a space but we can try to change the color Okay so let's say we have something in blue yes but let's try to use one purple color from over theme so we can just use purple 4D and this is looking much better if I zoom it our screen is looking nicer now okay so this is our normal text component now below this let's add what other data do we have so inside our article we have author we have some Source let's do one thing for author we are going to Define one new text component or one new component where we will show multiple values together so let's minimize everything for now we are going to take these things below row composable let's minimize this we are going to take the preview below our component okay so now I am going to Define one composable for author details component other details component and inside this we are going to take one row composable okay we are going to use modifier with fill Max width because we are going to take entire screen width and inside this let's use normal text component or let's use yes let's try to use normal text component itself let's try to use one author name if it's present okay initially and by default this value is going to be empty if it's not provided and we are also going to take author Source or simply we can call it Source name this is going to be string by default empty value as empty string okay and we can put it here so let's say author name and Source name we can use this inside our news row component so we are going to remove this and inside this we are going to pass article dot author if it's present or not let's make it nullable itself if the values are node there and let's remove the default values we can just do it like this that if author name is not equal to something like this with also then we are going to show this we can just access with it same way we can access for Source name we can pass here it okay now we can just pass article dot Source if it's not null then its name okay and if we are passing author details component we will see one block inside one row we will see the author name and the source name so for this only author name is present okay one another thing to note here is our normal text component is taking full Max width that's why it's not able to show that to text so let's replace this with normal text composable for now and we can just change it to text okay for this as well and in between we can just add one spacer and let's call it modifier Dot weight one float so that empty space will be equally divided in between and let's go to the wrong import delete it and it should be fine now if we run the application we can see both of these details are present we can add some kind of padding in start and end so we can just say horizontal padding or we can say start let's say 10 DB and and DP okay so some empty space will be provided like this one another thing we can do is if we want to put this author block at the very bottom right so we can just come here and instead of this we can just add here one weight we can just try to see how it will looks like and we can add one float so it's coming at the very bottom if we scroll we have it here okay and the space which I was mentioning right you can see the difference between these author detail component and the next page if we increase that where we can increase inside our home screen if we increase that inside our vertical pager let's say 80dp so if you will scroll you will see more space see between the next image and the author component you can see there is more space between the image and author component so let's make it ADP itself it's fine and this name and other things we can just give some kind of padding Okay so inside this let's add some kind of padding from bottom let's say 24 DP so some space will be there so that's it now this is our home screen and inside our home screen we have this vertical pager inside success State we have this news row component where we are having one column composable one image then some space then some heading text some space some description and some author details component where we are showing author name and Source name if it's available okay so let me show you how our application is looking like let's kill the application so if we launch the application we have one splash screen then we have our News application ready we are fetching the data from the network and we are showing the news right if we don't have the proper URL for image from our server we are not able to show the image we are showing a placeholder okay we can go back we can go forward we are able to show the news properly okay now few more thing we need to do here we need to handle the empty state so I have one SVG with me so we can just create one vector this one no data okay so we have this image you can try to use this so when we come inside our home screen let's say if our articles are empty we are getting success State whatever articles are empty so we can handle we can show one empty space so for that we need to Define one composable and let's call it empty state component we can use one column and we are going to take the entire screen space here as well so we can use fill Max size and we can use some kind of padding here let's say 16 DP inside this we can use one image composable and we can use one painter resource we can pass the image ID with no data this one and for Content description we can add one string that no news as of now please check in some time okay like this we can add one image we can add one preview for this we can add as a composable preview we can just use empty State component preview inside we can use empty State component I think this is not going to build anytime soon let's use in code itself okay so next thing we are going to do we are just going to use heading text component and we are going to add and this actually we are going to make it null and we are going to pass this inside heading text component okay and we can extract this as a string if we want all right so this is going to be added here and now we can use this empty State component inside else condition if there is no article all right so now let's try to run this and I will make some change so that API call will give us empty response this time we will get empty response let's see what our application shows us okay at least we are seeing the empty space but this should be in mid right so we can use some alignment here and let's call it alignment center horizontally and we can use vertical Arrangement as well Arrangement Dot Center okay now we want to also take this in Center horizontally we are using this component in other places as well so we don't want to change this completely okay so from our empty State component let's pass some value to this let's call in center or we can call it Center aligned that do we need to put this text in Center align way if we are passing true then only we will do something okay let's make it as a Boolean parameter default value is false so we are going to use text align and if it's Center aligned then we need to use text align Dot Center else text align Dot start itself now let's run the application it should be in the center ok so now it's fine so now if we rewrite the API code back now we'll be having the data so we will be having the proper news State okay we are having the proper news State and if we don't have the data we are going to have this state where we have this no news as of now so that's it friends that's it for today's video I hope you enjoy this video I have implemented so many things including core routines dagger-hit mbvm approach view model repository including our data layers UI layer dependency injection layer so many things we have done if you enjoy this video please subscribe to my channel and please share this video with your friends who are running Android I'll see you very soon with another interesting video please subscribe the channel and be happy thank you [Music] foreign [Music]

Channel: Native Mobile Bits

Views: 19,316

Keywords: JetpackComposeTutorial, AndroidAppDevelopment, Full Project in Android, Android Complete Project 2023, Complete Android App Development Tutorial, AppDevelopmentTutorial, Android Development full course Jetpack Compose, Jetpack compose tutorials for beginners, how to learn jetpack compose, Jetpack Components Android, Jetpack compose free codecamp, State management in Jetpack compose, android projects for placement, MVVM, Retrofit, Coroutines, Flows, Dagger HILT, ViewModel in jetpack compose

Id: LFlobqW8Sy8

Length: 118min 36sec (7116 seconds)

Published: Wed Sep 27 2023