Android Kotlin: Forecast App 01 - Navigation & App Foundation - MVVM Tutorial Course

today I am very excited to tell you that you are starting a new Android development journey on which you are going to learn a ton of new things you are gonna build a real forecast app using the mvvm which stands for model view viewmodel architectural pattern I really recommend you to have a basic grasp of the model view viewmodel architectural pattern before jumping in into this tutorial series and to have this grasp you can check out my tutorials on mvvm by clicking on the cart in the corner so now let's quickly run through what you'll actually build and don't worry if you don't understand half of the stuff I'm about to say because this is the tutorial after all and I will teach you everything in detail in later parts so this app is going to do things like getting weather data from an API using retrofit and jisan libraries then we will cache this data in an SQLite database using the room library then we are also going to handle asynchronous code using Catherine's cover teens then we'll also be concentrating data operations in a repository class and we are also going to inject dependencies using the codon library and also we will get user location and more hello welcome to our ESL coder and now let's take a look at the actual app and what it's doing and how its implemented so we have the first screen which is today this is implemented as a fragment we are also using navigation architectural components right so this is the fragment today which displays the current temperature the feels-like temperature the wind with visibility precipitation and the very weather condition and also the wearer icon which is by the way fetched also from the API and we are currently displaying the weather which is in San Diego for today then we also can view the seven-day forecast for our city of San Diego so here we have it we can also go for example to October the 23rd and check out that weather in more detail so we have minimum and maximum values of temperature here for example and just basically more details when we click on a weather entry in this recycler view then we also can go over to settings and either use device's location but I am NOT going to do that now but we can also change the location to be for example New York and said ok and now when we come to today we have New York here different temperatures it's a bit more cold over there and it's also going to be raining quite a lot now in New York it seems so but we are in the USA right so we don't want to have degrees Celsius but we want to use Fahrenheit so let's go back to settings and over here we have unit system metric but we can also change it to imperial and now come back to today and we have 59 degrees Fahrenheit and not Celsius and we also have miles and miles per hour instead of kilometers alright so that's how the finished app will look like today we are only going to build the foundation so we are only gonna have empty fragments which are not going to do anything but we'll be able to navigate between all of those different fragments and in the later parts we are going to start off with implementing the current weather fragment which is this one so we'll be only fetching current weather and then later after we have the current weather implemented we will implement the future weather and also the detail of the future where right here once we click on then recyclerview item this is the detail and then once we have that we will also go and implement settings to change the location and also the unit system so I am sure that you will learn a lot and before we get started be sure to follow me on instagram my name over at instagram is also reso coder so you can find me really easily over there i am posting in progress stuff so if you want to have the latest info about what i am currently doing just follow me on instagram as resew coder and you will have all of that up-to-date information alright so let's start out by creating a new android project we are going to start out with an empty activity we are going to name our project forecast mvvm and also we want to set the language to be Kotlin then we want to include navigation controller down here and we also want to use android x artifacts if you don't know what android x is it's basically a replacement for all of the support libraries I'm using Android studio 3.3 now let's hit finish and first let's check out if we have everything properly enabled so first we want to go to file settings and then experimental and you want to make sure that you have this enable navigation error ticked on I mentioned that we are going to use Scotland's cover teens and color teens in Kotlin have a major change with cotton version 1.3 that's because co-routines in 1.3 will not be experimental anymore but they will be official so we need to change our cotton version to be 1.3 and as of now 1.3 is not yet official but it's only in a release candidate state if you are watching in this tutorial a bit later maybe even a month later after it's published Kathlyn will be in 1.3 officially so you probably won't even need to do what i am going to do now but for now we want to go under tools here then Kotlin and configure cotton plug-in updates and just make sure that you have this early access preview 1.3 selected over here and you wanna select it and hit OK right and you will be good to go now let's close off all of the files which are open for now and let's go over to build a Gradle for our project but before we do that let me change our like viewing file structure to be Android and not project because this is what we are all used to right so now we are good to go I'm not sure why we didn't have that by default and now let's go over to build a cradle for the project and also build a Gradle for our module app and let's start off with build a cradle for our whole project let's update this Gradle plugin so let's hit alt enter and you can also see what I am pressing up here in at the top of the screen and we want to update our Gradle plugin to 340 alpha oh one for now then we also want to add our key textured navigation save our X Gradle plugin so it will look something like this and this is for safely passing arguments between navigation destinations which are in our case fragments you can check out my tutorial which is dealing with safe arts and navigation architecture component in itself by clicking on the cart in the corner we are also going to have a lot and I mean really a lot of external libraries so I'm going to paste all of our libraries versions over here so we are gonna have room navigation coding lifecycle and also retrofit version pasted over here and we are going to use these values from our build a cradle for the module app so let's get over there right now first up top we want to apply to plugins which are Kotlin annotation processor which is basically like annotations for Java but these are for Catalan and also we want to apply plug-in navigation saved arcs which we have just added inside the project build a grade all right over here and now prepare yourself for a lot of libraries because all the way from below appcompat I'm going to delete all of this up to j-unit and now I'm going to paste a lot of lines in here so let's take a look at them but before we take a look at them let's also update the appcompat version to be one point 0.0 in now what do we have here we have navigation which is the simple navigation by using Android architecture components then we also have over here Catalan Android extensions and also counts train layout everyone laughs constrain layout trust me we are going to use it a lot in this tutorial then we also have room which is a layer on top of the sequel Lite library which simplifies a lot of things regarding database writes and reads so this is definitely good to have it also has compiled time query verification kind of things so you know if your queries are actually working before you run your app so we don't have run time crashes but your app doesn't even compile if you have some kind of errors in your queries we'll get to that in future videos just I'm telling you what you can expect so room is a really cool library and then we also have jisan right over here which is a library for parsing JSON to Java or in our case Scotland objects really cool then we also have Kathleen co-routines you can check out the separate tutorial of mine on co-routines by clicking on the cart in the corner and color teens are basically light-weight threats we are going to get to all of this later then we have retrofit which is a library for simply fetching data through api's in our catalan code we are also going to be using view model then we are also going to be using coding which is a Catalan dependency injection library and you can check out a separate coding tutorial for Android by clicking on the card in the corner then we are also going to be using good and simple to use date/time for a by using the 3/10 ABP if you know something about Java eight-time this is basically the Java 8 library for time management so it's really simple really concise something like joda-time if you are not sure what I'm talking about don't worry I'm going to get it get to it later but this is a port for Android which runs on Android versions which don't support Java 8 then we have Glide so guide is a library for displaying caching and doing all kinds of things with images so this is really good to have we're going to use it to display the error condition images so like that Sun or cloud which is raining we are going to use glide to display all of those images then we have grupe which is a simple recycler view library which enables us to do really complex things in a few lines of code then we are also going to be using Android X preferences so that we have backwards compatible then we are also going to be fetching location of our user so we are going to use this library to do that and then finally we also have new material design because we don't want to be looking at the old boring material design we want to have the new so-called material design to point now about which I have a separate tutorial and you can check it out by clicking on the cart in the corner and material design 2.0 is really nice whoo so that was a lot of explaining but now you know what kind of libraries we are using and you know what to expect from this tutorial series and trust me you are really going to learn a lot of things so now let's hit thing now in the corner also we are now gonna be using data binding in this tutorial series because when I was preparing for this tutorial on Android studio 3.2 it gave me an error some weird kind of an error so I couldn't use it over there then I migrated to Android studio 3.3 kenner which is what I am using now and over here it gave me a different error so I cannot use it and if something is as buggy as data-binding was for me the best thing to do is to just not touch it so we're gonna do it the old-fashioned way without data-binding all right once we have all of this let's close our build our Gradle files and let's go over to main activity but first let's create a new package so right-click new package it's name will be UI and we want to move our main activity over to this package so refactor and before we start editing the cut and file let's go over to res layout and activity main.xml and I'm going to paste the layout in here because I don't want to bore you with typing all of this layout out alright but before I take you through this layout which I just pasted it in here we need to do a bunch of things we need to define our toolbar themes so let's go over to values and then styles because we are using the new material design 2.0 we aren't going to have the parent theme to be app compat but it's going to be material components then because we have a toolbar we don't want to have the default action bar so we are going to have window action bar to be false and also window no title to be true and by the way if you want to get the code from this tutorial you can do so by clicking on the link in the video description which is going to take you to resew coder the calm so don't worry if I just paste something in here I'm doing it because this video would get quite long without it and you can really get the code from the link in the video description without any kind of a problem and now let's define our toolbar theme so I'm gonna paste it in here we have a toolbar theme it's parent is theme overlying material components action bar and we want to set the primary text color to be white and then the secondary text color will be a light grey color we have still one more thing to do before I show you what activity mainly looks like because over here you can see that we stay don't have bottom nav menu so we need to create this menu so first let's create the menu folder by right-clicking on rests we want to create a new Android resource directory its resource tab will be menu so now let's hit OK and under menu we want to create new menu resource file and its name will be bottom nav and this menu will have three menu items which will be the current weather fragment then also future list weather fragment and then also Settings fragment because as you remember from when I showed you the app the menu on the bottom has three destinations today seven days and settings and this is precisely the same menu that we are creating right now now we need to get these drawables into our project so we want to go over to drawable and normally you would go to right click new and then vector asset and search for your assets over here or just download an SVG file from some site on the internet and put it over to your project but you could search for calendar for example but we are now going to search for our icons because I am going to paste them into our project and again you can get this whole project from the link in the video description alright so now that we have this menu let me take you through activity main layout so over here we have the toolbar so nothing fancy with this toolbar then we have a fragment and this fragment is really important because this is the fragment which is going to be used by the navigation architecture component to display the current and future weather and also the settings we are going to create these fragments in a second and all of those fragments will be populated inside this one view these three attributes are the most important than name it has to be Navajos fragment then we have this nav graph to be mobile navigation and this navigation is right over here this is where all of our fragments will be added to in just a little while and then we also set this fragment to be the default navigation host and finally we have the bottom navigation menu which we have just created it has today seven days and settings buttons all right now let's go to main activity class and we are going to implement it right at the top we want to create a new property which will be private late init VAR its name will be nav controller of type nav controller and we are going to use this property in uncreate so first we want to get nav controller from navigation that find nav controller and we want to find a navigation controller for this activity and then the view ID will be our nav house fragment and in activity main you can see that the ID of our nav house fragment is nav host fragment so let's copy this ID and let's paste it in here so our that ID that nav house fragment so now that we have our nav controller we want to set up our bottom navigation menu with this nav controller what this is going to do is that whenever we press a button an item on this bottom navigation menu it's going to take this ID so for example current weather fragment and it's going to look for this precise ID in our mobile navigation graph so it's really important that the name of the destination which means the fragment that we are going to navigate to and this ID inside our menu the bottom menu matches so remember that IDs are really important when it comes to navigation and don't worry we are going to implement mobile navigation XML in just a bit so we will understand everything by the end of this tutorial so let's type bottom nav that set up with nav controller and the nav controller is the one that we have just gotten and then we also want to set up action bar with nav controller so let's write navigation UI that set up action bar with nav controller and the activity is this and the nav controller is the one that we have just gotten and we also need to set support action bar to be the tool bar from our activity which is right over here it has IV tool bar and we are getting it in our code then we also want to override one function in our main activity which is on support navigate up this one and over here we want to return navigation UI that navigate up and the draw layout will be null in our case because we don't have any draw layout in our layout file and the navigation controller is simply our nav controller the up navigation is this arrow so we have just set up there when we click on this arrow it takes us back all right now let's create what I call the skeleton of our fragments so we aren't going to implement the fragments we aren't even going to create a layout files for our fragments we are just going to leave them as they are and we are going to add them to mobile navigation so that at the end of this tutorial you can go to this app and navigate between different destinations before we add those fragment skeletons we need to organize our app though so let's create new packages we want to create a new so new package its name will be weather so now we have a package under UI and then weather we also want to have package UI and settings and I don't like that our UI package is now somehow showing as if it was at the root of our project right so let me create also the packages that are going to be completely empty for now and we are only going to create classes inside them in the future tutorials so for example one package will be for data this is where all of our database related stuff and also the network classes will be located so data and now let me take this data and pull it somewhere for example two settings and we want to move package to another package and we don't want to move it over to settings and UI but we want to move it over to our root package so delete UI and settings right and now hit refactor and suddenly we have the project structure much more clear now because we don't have the UI package stuck as if it were at the root of our project all right now under weather we are going to create a new fragment and it's going to be a fragment with a view model the fragments name will be current where a fragment and hit finish and we're going to close everything because we aren't going to touch the fragments code for now so he closed the view model also the fragment and also our layout right but in the layout we can change this to say current just so we can differentiate between different fragments then we also want to create new and another fragment with a view model and this one's name will be future list whether fragment and also hit finish and close everything X for the layout in which we will say future list all right and now it's a good time to separate this weather package into multiple different packages so let's create in our package its name will be current and let's push all of the current weather fragment classes over to here to the current package and there will be also another package called future so new package feature and let's put our future list whether fragment over to that new package and now under future let's create a new and another fragment will be over here so fragment with a view model and this one's name will not be future list but rather future detail whether fragment and this is the fragment which we get once we click on recycler view item it's going to take us to the detail of that weather so future detail whether fragment and we can now close everything because we aren't even going to be able to get to this fragment because we don't have the recycle will implement it at all so changing the text over here is pointless now let's divide even this future package into two packages which will be separate so one will be detail if I could spell so detail and this package will contain all of the detail fragments and then another package will be a list so let's create it and this will hold all of the list whether fragments awesome I know that this is exhausting but having this foundation is really critical in order for us to be able to navigate between different destinations and now the last fragment that we are going to create in this tutorial is the Settings fragment but we are now going to create it with going to fragment and then fragment with a view model because our settings fragment will be special it will be our preference fragment preferences are basically setting on Android and because of that it's not going to have a layout file and it's not going to have a view model or any of that stuff because of that we want to create a simple Catalan class and call it settings fragment and this fragment will be a subclass of preference fragment compact but for now it's not going to be actually inheriting from preference fragment compact because we would need to implement a bunch of functions which we currently don't have any implementation for because of that for now we are going to change it from preference fragment compact to be a simple fragment so that we don't have any problems with non implemented functions wow so that was a lot of fragments and now let's go to mobile navigation XML and we are going to add all of those fragments in here so that we can navigate between them so we are going to first add the fragment which is called current whether fragment then we are going to add future a list where a fragment just like this then also future detail whether fragment and then finally we're going to add the settings fragment which doesn't have any layout for some reason the ID of the settings fragment changed to be settings fragment too so let's delete this too from the ID so that it's only settings fragment because these IDs as I said previously are really important because if you take a look this settings fragment has ID settings fragment and in the bottom navigation menu we have ID which is also settings fragment so this is how the navigation in UI class will determine to which fragment it should navigate once we hit the button on the bottom navigation menu all right so we should be good to go now all that's left to do is to hit run and let's run it on our emulator and here we go so we have our current weather Fri and then we have our seven days fragment but we cannot navigate to our fragment for displaying the future list weather why is that well let's find out we can see that yeah the ID is wrong for our future weather fragment it also added for some reason the two after the ID so let's delete two in the ID and probably the same will be for yeah current weather fragment so also over here we have to delete the two from our ID and once we do that it's going to be all fine so now let's run our app again all right and now we can navigate to seven days so we have future lists where a fragment and then we also have settings so everything works properly and we can even navigate back and navigate back from settings so we are good to go and that's it for the first part of this tutorial series in which you are going to create this app for displaying the weather in the next part we are going to start implementing the current weather fragment so stay tuned for that and definitely subscribe to this channel and also hit the bell button so that you get notified when that video comes out and also give this video a like and also share it if it helped you with creating the foundation for this app remember that you can get the code from the link in the video description if you have anything to say leave it in the comments follow me on Instagram Facebook and Twitter and see you in the next video [Music]

Channel: Reso Coder

Views: 81,093

Rating: 4.9673367 out of 5

Keywords: resocoder, tutorial, programming, code, programming tutorial, android, kotlin tutorial, kotlin android tutorial, kotlin, android mvvm, android mvvm tutorial, android mvvm architecture, android mvvm design pattern, android room tutorial, android room database tutorial, android retrofit, android retrofit tutorial, android coroutines, kotlin coroutines, kotlin mvvm, kotlin mvvm android, kotlin kodein, kodein android, kotlin android

Id: yDaaM3u389I

Length: 30min 56sec (1856 seconds)

Published: Sun Oct 21 2018